【SwiftUI】

TabViewの背景色を変更する方法

UITabBar.appearance().backgroundColorを使用する

投稿日 2021/01/22 更新日 2021/09/26


こんにちは。当サイトの管理者「元木皇天」です。

iOSアプリケーションの開発に欠かせないものがTabViewです。

今回はそんなTabViewの背景色を変更する方法について解説したいと思います。

環境
OS:MacOS Big Sur
Xcode:バージョン12.3
Swift:バージョン5.3

やりたいこと

SwiftUIのTabViewの背景色を変更する。

TabViewの背景色を変える前と後のスクショ

目次

TabViewの背景色を変更する

TabViewの背景色を変えるには以下のコードを使用します。

//TabViewの背景色の設定(青色の場合)
UITabBar.appearance().backgroundColor = UIColor.blue

RGB値で指定する場合は以下のコードを使用します。

//TabViewの背景色の設定(青色の場合(RGB:0,0,255))
UITabBar.appearance().backgroundColor
    = UIColor(red: 0, green: 0, blue: 255/255, alpha: 1)

上記のコードをイニシャライザ内に記載することでTabViewの背景色を変更することができます。

今回の例ではContentView内にTabViewを作成して、そこにイニシャライザを作成します。 なお、TabViewに関してはデフォルトのままですのであらかじめご了承ください。

以下がTabViewの背景色の変更を実装したコードです。

struct ContentView: View {
    @State  private var selection:Int = 1

    //イニシャライザ
    init(){
        //TabViewの背景色の設定(青色)
        UITabBar.appearance().backgroundColor = UIColor.blue
    }

    var body: some View {
        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)
        }
    }
}

以下は実際にXcodeで記載した画面です。

TabViewの背景色を変更するコード

次に、実際にTabViewの背景色が変わっているか確認してみましょう。

TabViewの確認

iPhone12Proのシュミレーターで動作確認するとTabViewが青色に変化していることが確認できます。

iPhone12Proのシュミレーター

まとめ

TabViewの背景色を変えるには
UITabBar.appearance().backgroundColorをイニシャライザ内に記載しましょう。

参考文献・おすすめ文献

元木皇天

化学系大学出身
現在は3年目SEとして
日々がんばっています

Twitter