[SwiftUI]TabViewの上部にタブを表示するには？

どうも、ちょげ(@chogetarou)です。

TabViewの上部にタブを表示する方法を紹介します。

方法

TabViewの上部にタブを表示するには、TabViewの引数「selction」を使います。

まず、選択中のタブを判断するための変数を用意します。

用意した変数は、TabViewの引数「selection」に指定します。

@State var selectedTab = 1

次に、TabViewで切り替える画面にtag修飾子を付与し、引数に番号を指定します。

TabView (selection: $selectedTab){
    //画面にtagを付与する
    Page1()
        .tag(1)
    Page2()
        .tag(2)
    Page3()
        .tag(3)
    ・・・
}

最後に、自作のタブバーをVStackを使って、TabViewの上に配置します。

VStack {
    TabBarView() //自作のタブバーを配置
    TabView (selection: $selectedTab) {
          ・・・
    } 
}

自作のタブバーでは、タブをタップした際に、用意した変数の値を、タブに対応したtagの値に変更します。

Tab(・・・)
    .onTapGesture {
        self.selectedTab = 1 //タブに対応した画面のtagの値に変更する
    }

使用例

struct ContentView: View {
    @State var selectedTab = 1
    var body: some View {
        VStack {
            TabBarView(selectedTab: $selectedTab)
            TabView (selection: $selectedTab) {
                PageView(text: "Home View")
                    .tag(1)
                PageView(text: "Data View")
                    .tag(2)
                PageView(text: "Person View")
                    .tag(3)
            }
            
        }
    }
}

struct TabBarView : View {
    @Binding var selectedTab : Int
    var body: some View {
        HStack {
            Spacer()
            VStack {
                Image(systemName: "house.fill")
                    
                Text("Home")
            }
            .foregroundColor(selectedTab == 1 ? Color.blue : Color.gray)
            .onTapGesture {
                self.selectedTab = 1
            }
            Spacer()
            VStack {
                Image(systemName: "folder.fill")
                    
                Text("Data")
            }
            .foregroundColor(selectedTab == 2 ? Color.blue : Color.gray)
            .onTapGesture {
                self.selectedTab = 2
            }
            Spacer()
            VStack {
                Image(systemName: "person.fill")
                    
                Text("Person")
            }
            .foregroundColor(selectedTab == 3 ? Color.blue : Color.gray)
            .onTapGesture {
                self.selectedTab = 3
            }
            Spacer()
        }
    }
}

struct PageView : View {
    var text = ""
    
    init(text : String) {
        self.text = text
    }
    
    var body: some View {
        VStack {
            Text(text)
                .font(.title)
        }
    }
}