[Ch17] Using the Tab View

shintwelv·2022년 8월 1일
0

Using a Tab View

TabView{
            Text("One")
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("One")
                }
            Text("Two")
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Two")
                }
            Text("Three")
                .tabItem{
                    Image(systemName: "tortoise.fill")
                    Text("Three")
                }
            Text("Four")
                .tabItem{
                    Image(systemName: "folder.fill")
                    Text("Four")
                }
        }


TabView{
            Text("One")
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("One")
                }
            Text("Two")
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Two")
                }
            Text("Three")
                .tabItem{
                    Image(systemName: "tortoise.fill")
                    Text("Three")
                }
            Text("Four")
                .tabItem{
                    Image(systemName: "folder.fill")
                    Text("Four")
                }
            Text("Five")
                .tabItem{
                    Image(systemName: "internaldrive.fill")
                    Text("Five")
                }
            Text("Four")
                .tabItem{
                    Image(systemName: "cloud.drizzle.fill")
                    Text("Six")
                }
        }.tint(.purple)



Selecting Buttons Programmatically in a Tab Bar

@State var selectedView = 1
    var body: some View{
        VStack{
            HStack{
                Button("1") {
                    selectedView = 1
                }
                Button("2") {
                    selectedView = 2
                }
                Button("3") {
                    selectedView = 3
                }
                Button("4") {
                    selectedView = 4
                }
            }
            TabView(selection: $selectedView) {
                Text("One")
                    .tabItem{
                        Image(systemName: "heart.fill")
                        Text("One")
                    }.tag(1)
                Text("Two")
                    .tabItem{
                        Image(systemName: "hare.fill")
                        Text("Two")
                    }.tag(2)
                Text("Three")
                    .tabItem{
                        Image(systemName: "tortoise.fill")
                        Text("Three")
                    }.tag(3)
                Text("Four")
                    .tabItem{
                        Image(systemName: "folder.fill")
                        Text("Four")
                    }.tag(4)
            }
        }
    }

Displaying a Page View

TabView {
            Text("One")
                .tabItem{
                    Image(systemName: "heart.fill")
                }
            Text("Two")
                .tabItem{
                    Image(systemName: "hare.fill")
                }
            Text("Three")
                .tabItem{
                    Image(systemName: "tortoise.fill")
                }
            Text("Four")
                .tabItem{
                    Image(systemName: "folder.fill")
                }
            Text("Five")
                .tabItem{
                    Image(systemName: "tray.fill")
                }
            Text("Six")
                .tabItem{
                    Image(systemName: "keyboard.fill")
                }
        }.tabViewStyle(.page)
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

Displating Structures in a Tab View

// ContentView.swift
struct FileView: View {
        var body: some View {
            HStack{
                Spacer()
                VStack{
                    Spacer()
                    Text("This is separate structure")
                    Text("that's stored in the same file")
                    Spacer()
                }
                Spacer()
            }.background(.yellow)
        }
    }
    var body: some View{
        TabView{
            FileView()
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("First")
                }
            SeparateFileView()
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Second")
                }
        }
    }
// SeparateFileView.swift
import SwiftUI

struct SeparateFileView: View {
    var body: some View {
        HStack{
            Spacer()
            VStack{
                Spacer()
                Text("This is another structure")
                Text("but stored in a separate file")
                Spacer()
            }
            Spacer()
        }.background(.orange)
    }
}

struct SeparateFileView_Previews: PreviewProvider {
    static var previews: some View {
        SeparateFileView()
    }
}


Passing Data Between Structures in a Tab View

  • 데이터를 받을 structure에 필요한 만큼 변수 선언
  • 해당 변수를 parameter로 사용하여 해당 structure 호출
// ContentView.swift
@State var message = ""
    struct FileView: View {
        var choice: String
        var body: some View {
            HStack{
                Spacer()
                VStack{
                    Spacer()
                    Text("You typed = \(choice)")
                    Spacer()
                }
                Spacer()
            }.background(.yellow)
        }
    }
    var body: some View{
        TabView{
            TextField("Type here", text: $message)
                .tabItem{
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            FileView(choice: message)
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("First")
                }
            SeparateFileView(passedData: message)
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Second")
                }
        }
    }
// SeparateFileView.swift
import SwiftUI

struct SeparateFileView: View {
    var passedData: String
    var body: some View {
        HStack{
            Spacer()
            VStack{
                Spacer()
                Text("String from text field = \(passedData)")
                Spacer()
            }
            Spacer()
        }.background(.orange)
    }
}

struct SeparateFileView_Previews: PreviewProvider {
    static var previews: some View {
        SeparateFileView(passedData: "")
    }
}



Chainging Data Between Structures in a Tab View

  • State 변수 생성
  • NavigationLink로 structure에 State 변수 binding
  • 데이터를 받을 structure에 @Binding 변수 선언
  • Binding 변수 값 변경
// ContentView.swift
@State var message = ""
    struct FileView: View {
        @Binding var choice: String
        var body: some View {
            HStack{
                Spacer()
                VStack{
                    Spacer()
                    TextField("Type here", text: $choice)
                    Spacer()
                }
                Spacer()
            }.background(.yellow)
        }
    }
    var body: some View{
        TabView{
            TextField("Type here", text: $message)
                .tabItem{
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            FileView(choice: $message)
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("First")
                }
            SeparateFileView(passedData: $message)
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Second")
                }
        }
    }
//SeparateFileView.swift
import SwiftUI

struct SeparateFileView: View {
    @Binding var passedData: String
    var body: some View {
        HStack{
            Spacer()
            VStack{
                Spacer()
                TextField("Type here", text: $passedData)
                Spacer()
            }
            Spacer()
        }.background(.orange)
    }
}

struct SeparateFileView_Previews: PreviewProvider {
    static var previews: some View {
        SeparateFileView(passedData: .constant(""))
    }
}




Sharing Data Between Structures in a Tab View

@Published, ObservableObject 클래스, @StateOBject, .environmentObject(), @EnvironmentObject 사용

// ContentView.swift
import SwiftUI
class ShareString: ObservableObject {
    @Published var message = ""
}
struct ContentView: View {
    @StateObject var showMe = ShareString()
    var body: some View{
        TabView{
            TextField("Type here", text: $showMe.message)
                .tabItem{
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            FileView()
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("First")
                }
            SeparateFileView()
                .tabItem{
                    Image(systemName: "hare.fill")
                    Text("Second")
                }
        }.environmentObject(showMe)
    }
}
struct FileView:View {
    @EnvironmentObject var choice:ShareString
    var body: some View {
        HStack{
            Spacer()
            VStack{
                Spacer()
                TextField("Type here:", text: $choice.message)
                Spacer()
            }
            Spacer()
        }.background(.yellow)
    }
}
SeparateFileView.swift
import SwiftUI

struct SeparateFileView: View {
    @EnvironmentObject var passedData: ShareString
    var body: some View {
        HStack{
            Spacer()
            VStack{
                Spacer()
                TextField("Type here", text: $passedData.message)
                Spacer()
            }
            Spacer()
        }.background(.orange)
    }
}

struct SeparateFileView_Previews: PreviewProvider {
    static var previews: some View {
        SeparateFileView()
    }
}



profile
어짜피 생각대로 되는 것도 아니니까 그냥 하기나 해

0개의 댓글