SwiftUIでTabBarを作る方法

はじめに

SwiftUIでTabBarの作る方法を紹介します。
TIPSとして役立ててください。

今回の作るTabBar画面

TabAViewとTabBViewを作りそれをTabBarで画面を切り替えるSwiftUIを作ります。

作り方

TabAViewとTabBViewを作る

File>New>File...でSwiftUI ViewでTabAviewとTabBViewを新規にファイル追加します。
中のコードは今回はわかりやすいように、TextにThis is Tab A.とThis is Tab B.と表示するようにします。

TabAview.swift

import SwiftUI

struct TabAView: View {
    var body: some View {
        Text("This is Tab A.")
    }
}

struct TabAView_Previews: PreviewProvider {
    static var previews: some View {
        TabAView()
    }
}

TabBview.swift

import SwiftUI

struct TabBView: View {
    var body: some View {
        Text("This is Tab B.")
    }
}

struct TabAView_Previews: PreviewProvider {
    static var previews: some View {
        TabAView()
    }
}

ContentView.swiftにTabBarを定義する

TabViewと定義しその中に、TabBarの中のデザイン定義をVStack{}内に定義します。
今回は、アイコンと文字にしました。アイコンはどの環境にもあるSF Symbolを使っています。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TabAView()
                .tabItem {
                    VStack {
                        Image(systemName: "a")
                        Text("TabA")
                    }
            }.tag(1)
            TabBView()
                .tabItem {
                    VStack {
                        Image(systemName: "bold")
                        Text("TabB")
                    }
            }.tag(2)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考サイト

• Implementing TabView in SwiftUI