【Swift UI】TabViewの使い方とtabItemの色を変更する方法!

この記事からわかること
- SwiftUIのTabViewの使い方
- タブビューを簡単に実装する方法
- tabItemの色を変更するには?
- スワイプでタブ送りできるようにする
index
[open]
\ アプリをリリースしました /
SwiftUIのTabView構造体の使い方と記述方法をまとめていきます。
TabView構造体とは?
SwiftUIのTabView構造体
を使えば簡単に複数のタブで切り替えられるページが実装できます。タブはビューの下側に設置され、クリックすることで表示されるビューを切り替えることができるようになります。
TabView構造体を扱う上ではいくつかのポイントが重要になります。
- 選択されているタブ番号を格納する変数の準備
- タブボタンになるtabItem
- タブであることを示すtag()の指定
使い方
SwiftUIではライブラリパネルから簡単に構造体を挿入できるので、コードを確認してみます。
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)
}
引数にはアクティブになっているタグ番号を格納するためにバインディングする変数を渡し、クロージャの中に実際にタブビューで表示される要素部分を渡します。
TabView
を使う上ではまず下記のようにバインディングするための変数を宣言します。初期値としてはアクティブにしたいタブ番号を指定
し、内部から変更できるように@State
をつけて宣言します。
@State var selectedTag = 1
中に記述するビューにはタブボタンを実装するためのtabItem
とタブ番号を明示的に指定するtag(番号)
を付与します。
Text("Tab Content 1").tabItem { Text("Tab Label 1") }.tag(1)
tabItemの中にImage要素とText要素を記述するとVStackがかかった状態(縦に並ぶ)になります。
タブボタンの色を変更する
タブボタンの色はデフォルトでは青色になっています。これを変更するにはTabView自体にaccentColorモディファイア
使います。

引数に変更したい色を指定すればアクティブになっているタブボタンの色を変更することができます。
TabView {
・・・
}
.accentColor(.orange)
未選択のタブボタンの色を変える
アクティブになっていないタブボタンはデフォルトで灰色になっています。これを変更するにはTabView構造体のイニシャライザから設定します。

struct ContentView: View {
init() {
UITabBar.appearance().unselectedItemTintColor = .brown
}
var body: some View { ・・・
タブビューをスワイプで切り替える
タブビューは下のボタンをクリックすることで切り替えますが、左右へのスワイプでビューを切り替えることも可能です。
実装するにはTabViewにtabViewStyleモディファイア
を追加し、引数にPageTabViewStyle()
を渡します。tabItemでの文字表示はできなくなるので削除しておきます。
TabView(selection: $selectedTag) {
Text("Tab Content 1").tag(1)
Text("Tab Content 2").tag(2)
}
.tabViewStyle(PageTabViewStyle())
タブにバッチを付与する
タブボタンのところにバッチを付与することも可能です。実装するにはbadge()
を使います。バッチには数値または文字列が指定可能です。
TabView(selection: $selectedTag) {
Text("Tab Content 1")
.badge("2")
.tabItem{
Image(systemName: "pencil.circle")
Text("Add")
}.tag(1)
Text("Tab Content 2")
.badge("Tip")
.tabItem{
Image(systemName: "yensign.circle")
Text("Calc")
}.tag(2)
}

TabViewの背景色を変更する
TabViewの背景色を変更するにはタブボタン同様にTabView構造体のイニシャライザから設定していきます。
init() {
// 文字色
UITabBar.appearance().unselectedItemTintColor = .white
// 背景色
UITabBar.appearance().backgroundColor = .black
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
個人開発に限界を感じたらiOSに特化したプログラミングスクール「iOSアカデミア」も検討してみてください!無料相談可能で「最短・最速」でiOSエンジニアになれるように手助けしてくれます。