SwiftUIでNavigationViewのタイトルやテーブルビューの背景を変える

2020年5月4日

SwiftUIでNavigationViewのタイトルやテーブルビューの背景を変える方法です。 TableView と UITextView の appearance を変更しました。

ListViewBackground

CanNotChangeBackgroundView.swift

struct CanNotChangeBackgroundView: View {
    var body: some View {
        NavigationView {
            List {
                Text("Apple")
                Text("Orange")
                Text("Banana")
                Text("Lemon")
                Text("Strawberry")
            }
            .background(Color.orange)
            .navigationBarTitle("Fruits")
        }
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    init() {
        // Large Title Text Color
        UINavigationBar.appearance().largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableView.appearance().separatorStyle = .singleLine
        UITableView.appearance().separatorColor = UIColor.white.withAlphaComponent(0.6)
        UITableViewCell.appearance().backgroundColor = .clear
    }

    var body: some View {
        NavigationView {
            ZStack {
                // Background Color
                Color.orange.edgesIgnoringSafeArea(.all)
                List {
                    Text("Apple")
                        .foregroundColor(Color.white)
                    Text("Banana")
                        .foregroundColor(Color.white)
                    Text("Peach")
                        .foregroundColor(Color.white)
                    Text("Orange")
                        .foregroundColor(Color.white)
                }
                .background(Color.orange)
                .navigationBarTitle("Fruits")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}