【SwiftUI】TabViewに色を付ける

はじめに

iOS15からTabが透明になりました。

• iOS14と同じ見た目にする方法
• Tabに色を付ける方法

この二つを紹介します

iOS14と同じ見た目にする方法

struct ContentView: View {
+   init() {
+       let appearance: UITabBarAppearance = UITabBarAppearance()
+       appearance.configureWithDefaultBackground()
+       UITabBar.appearance().scrollEdgeAppearance = appearance
+       UITabBar.appearance().standardAppearance = appearance
+   }
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("ホーム")
                }
            SearchView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("検索")
                }
            SettingView()
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("設定")
                }
        }
    }
}

Tabに色を付ける方法

import SwiftUI

struct ContentView: View {
+   init() {
+       let appearance: UITabBarAppearance = UITabBarAppearance()
+       appearance.backgroundColor = .yellow
+       UITabBar.appearance().scrollEdgeAppearance = appearance
+       UITabBar.appearance().standardAppearance = appearance
+   }
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("ホーム")
                }
            SearchView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("検索")
                }
            SettingView()
                .tabItem {
                    Image(systemName: "gearshape")
                    Text("設定")
                }
        }
    }
}

おわり

iOS15の標準	iOS14の標準	色付き