【SwiftUI】タブ（TabView）を追加する詳細な手順

はじめに
開発環境
手順
全体のコード
おわりに
参考

はじめに

UIKitではUITabBarでタブを表示していましたが、SwiftUIではTabViewを使います。私はSwiftUIを触る頻度がそこまで高くないので、やり方を忘れないよう記事に残します。他の記事となるべく内容が重複しないように、スクリーンショットを多めにして、初心者でもどこを変更すればよいのかわかりやすくしてみました。

開発環境

・macOS Catalina 10.15.7

・Xcode 12.2

・Swift 5.3.1

手順

プロジェクトを作成

"Create a new Xcode project"を選択。

f:id:hfoasi8fje3:20201218175605p:plain

"App"を選択。

f:id:hfoasi8fje3:20201218175758p:plain

"Product Name"を入力して"Next"を選択。

f:id:hfoasi8fje3:20201218182720p:plain

TabViewを追加

ContentView.swiftを開いて、Textを削除。

f:id:hfoasi8fje3:20201218183041p:plain

画面右上の"+"を選択。

f:id:hfoasi8fje3:20201218183254p:plain

"tab"と入力して、"Tab View"を選択。

f:id:hfoasi8fje3:20201218183453p:plain

bodyにTabViewが追加される。

f:id:hfoasi8fje3:20201218184011p:plain

選択しているタブを保持するための変数selectionを追加。

// 選択しているタブを保持するための変数
@State private var selection = 0

f:id:hfoasi8fje3:20201218184437p:plain

TabViewの引数selectionに変数selectionを指定。

※"$"が漏れないように注意！

TabView(selection: $selection) {
    Text("Tab Content 1").tabItem { Text("Tab Label 1") }.tag(1)
    Text("Tab Content 2").tabItem { Text("Tab Label 2") }.tag(2)
}

f:id:hfoasi8fje3:20201218185651p:plain

Resumeを選択するとタブが正常に追加されたことを確認できる。

f:id:hfoasi8fje3:20201218190625p:plain

タブのアイコンとタイトルを変更する

変更前の左側のタブは以下のようになっている。

※前の手順から若干インデントを調整しています。

Text("Tab Content 1")
       .tabItem {
             Text("Tab Label 1")
       }
       .tag(1)

tabItem内でImageとTextを追加すると変更できる。

以下のドキュメントに従ってアイコンとタイトルを変更してみる。

Apple Developer Documentation

変更後は以下の通り。

Text("Tab Content 1")
       .tabItem {
             Image(systemName: "1.square.fill")
             Text("First")
       }
       .tag(1)

f:id:hfoasi8fje3:20201218192105p:plain

右側のタブも以下のように変更する。

Text("Tab Content 2")
       .tabItem {
             Image(systemName: "2.square.fill")
             Text("Second")
       }
       .tag(2)

全体のコード

ContentView.swiftの全体のコードは以下。

import SwiftUI

struct ContentView: View {
    // 選択しているタブを保持するための変数
    @State private var selection = 0
    
    var body: some View {
        TabView(selection: $selection) {
            Text("Tab Content 1")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
                .tag(1)
            
            Text("Tab Content 2")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
                .tag(2)
        }
    }
}

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