• 2022/7/7
• 3分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

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
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。