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

この記事からわかること

  • SwiftUITabView使い方
  • タブビューを簡単に実装する方法
  • tabItem変更するには?
  • スワイプタブ送りできるようにする

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

SwiftUIのTabView構造体の使い方と記述方法をまとめていきます。

TabView構造体とは?

SwiftUIのTabView構造体を使えば簡単に複数のタブで切り替えられるページが実装できます。タブはビューの下側に設置され、クリックすることで表示されるビューを切り替えることができるようになります。

TabView構造体を扱う上ではいくつかのポイントが重要になります。

使い方

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モディファイアを付与してタブボタンの色を変数する

引数に変更したい色を指定すればアクティブになっているタブボタンの色を変更することができます。

TabView {
    ・・・
}
.accentColor(.orange)

未選択のタブボタンの色を変える

アクティブになっていないタブボタンはデフォルトで灰色になっています。これを変更するにはTabView構造体のイニシャライザから設定します。

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の背景色を変更するにはタブボタン同様にTabView構造体のイニシャライザから設定していきます。

init() {
  // 文字色
  UITabBar.appearance().unselectedItemTintColor = .white
  // 背景色
  UITabBar.appearance().backgroundColor = .black
}
TabViewの背景色を変更する

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

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

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index