Swift・SwiftUI2020.02.17

SwiftUIでタブメニュー(UITabBarController)を表示する方法【SwiftUI入門】

今回は画面下部にタブメニューを表示するサンプルを紹介します。UIKit で言うところの UITabBarControler を SwiftUI で実現します。

SwiftUIでタブメニュー(UITabBarController)を表示する方法

struct ContentView: View {
    var body: some View {
        TabView {
            FirstView().tabItem {
                Text("Command")
                Image(systemName: "command")
            }
            SecondView().tabItem {
                Text("Shift")
                Image(systemName: "shift")
            }
            ThirdView().tabItem {
                Text("Option")
                Image(systemName: "option")
            }
        }
    }
}

struct FirstView: View {
    var body: some View {
        Text("タブメニュー１の画面")
    }
}

struct SecondView: View {
    var body: some View {
        Text("タブメニュー２の画面")
    }
}

struct ThirdView: View {
    var body: some View {
        Text("タブメニュー３の画面")
    }
}

テキストのみの画面、FirstView・SecondView・ThirdView を用意しています。

まず、ContentView の body の中に TabView {} を作ります。その中にタブメニューに紐付ける View を FirstView().tabItem {} という感じで並べます。

tabItem にはタイトルとして Text をアイコンに Image を設定しています。

以上