【SwiftUI】Tabbarの背景色や区切り線を消去する方法

2023年2月28日

SwiftUI

目次 [ close ]

今回作成するアプリ

Tabbarの背景色や区切り線を消すにはどうすればいいでしょうか？

左図はデフォルトの状態で、少しだけグレー寄りの白の背景色と1pxの黒線が見えると思います。

これを右図のように背景色を自由に変更し（Tabbarの背景色をアプリの背景と同色にすることで背景を消すことができます）、さらに区切り線を消去する方法をご紹介します。

実装

コード

import SwiftUI

struct ContentView: View {
    init() {
        let appearance = UITabBarAppearance()
        appearance.shadowColor = .clear
        appearance.backgroundColor = UIColor.cyan
        UITabBar.appearance().standardAppearance = appearance
    }

    var body: some View {
        TabView {
            // タブのコンテンツをここに記述する
        }
    }
}

解説

UITabBarAppearance を使用して、タブバーから線を削除します。

init() メソッド内で、 UITabBarAppearance オブジェクトを作成し、線の色を .clear に設定します。そして、UITabBar の標準外観を作成した UITabBarAppearance に設定しています。

また、もちろんですが線の色を.clearでなく.redなど具体的な色を設定することで、線の色を自由に変更することも可能です。

同様な方法で背景色も変更することができます。

Tabbarの背景色に関しても.clearを指定することは可能ですが、前章の左図のように少しグレーがかった白色になるので、アプリの背景と同じ色を指定することをおすすめします。

このように、 UITabBarAppearance を使用することで、 TabView のタブバーの外観をカスタマイズすることができます。ただし、注意点としてこの方法は、iOS 13以降のみで使用可能です。それ以前のバージョンでは、 UITabBarItem の imageInsets を使用して、線を削除する必要があります。