• 2022/8/4
• 5分

【Swift UI】Listの背景色を変更する方法！行単位と全体背景

＼ アプリをリリースしました ／

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

posted withアプリーチ

Swift UIのList構造体のデザインを変更する方法をまとめていきます。

Listの1行単位の背景色を変更する

Swift UIのView構造体の1つであるList構造体を使ってリストを表示すると1行1行の背景色がデフォルトでは白色になります。

これを変更するにはList内で表示している要素に対してlistRowBackgroundモディファイアを使用して色を指定します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        List{
            Text("要素1")
                .listRowBackground(Color.orange)
            Text("要素2")
                .listRowBackground(Color.cyan)
            Text("要素3")
                .listRowBackground(Color.red)
        }
    }
}

これでリストの1行単位の色を自由にカスタマイズすることができるようになります。

List全体の背景色を変更する

行ではなくその背景色を変更するにはList構造体のモディファイアではなく、List構造体と紐付くUIKitのUITableViewクラスのデフォルトの設定を変更します。

Listを表示している大元のView構造体のイニシャライザやonAppearなど、Viewが生成されるタイミングで設定を変更します。

UITableViewクラスのappearance(:外観の意)メソッドを呼び出しbackgroundColorプロパティに値をセットすることで変更できるようになります。

import SwiftUI

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = UIColor.gray
    }
    
    var body: some View {
        List{
            Text("要素1")
            Text("要素2")
            Text("要素3")
        }
    }
}

これで全体の背景を変更することが出来ました。カラーとして指定するのはSwift UIのColor構造体ではなくUIKitのUIColorなので注意してください。

背景画像をクリアにして画像をリストの背面に設置する

背景に画像などを持ってきたい場合は背景色を.clearにすれば透明のリストが出来上がります。

import SwiftUI

struct ContentView: View {
    init() {
        UITableView.appearance().backgroundColor = .clear
    }
    
    let deviceWidth = UIScreen.main.bounds.width
    let deviceHeight = UIScreen.main.bounds.height
    
    var body: some View {
        ZStack {
            
            Image("icon").resizable().aspectRatio(contentMode: .fill)
                .frame(width: deviceWidth/6, height: deviceHeight/6)
                .position(x: deviceWidth/2, y: deviceHeight/2)
                .opacity(0.2)
        List{
            Text("要素1")
                .listRowBackground(Color.clear)
            Text("要素2")
                .listRowBackground(Color.clear)
            Text("要素3")
                .listRowBackground(Color.clear)
        }
        }
    }
}

リストの1行を画面いっぱいまで広げる

デフォルトでは1行ごとの周りに自動で余白が取られ画面いっぱいまで広がることはありません。行を画面いっぱいまで広げたい場合は.listStyle(GroupedListStyle())を指定するとリストのスタイルを変更することができます。

 var body: some View {
    ZStack {
        
        Image("icon").resizable().aspectRatio(contentMode: .fill)
            .frame(width: deviceWidth/6, height: deviceHeight/6)
            .position(x: deviceWidth/2, y: deviceHeight/2)
            .opacity(0.2)
    List{
        Text("要素1")
            .listRowBackground(Color.orange)
        Text("要素2")
            .listRowBackground(Color.cyan)
        Text("要素3")
            .listRowBackground(Color.red)
    }.listStyle(GroupedListStyle()) // Listのスタイルを横に広げる
    }
}

背景色が変更されない？

※：2023年2月16日追記

iOS16以降からUIKitのappearanceを使った背景色の変更が反映されなくなりました。

私が試した感じではListに限ったことではなく背景色がSwiftUIからでは変更できずにappearanceから設定していたTextEditorなども同様でした。

iOS16以降〜：scrollContentBackground

その代わりにiOS16以降から使用できるscrollContentBackgroundが追加されました。

使用する場合はプロジェクトの「TARGETS」＞「Minimum Deployments」から対応iOSを16以上に設定しておきます。

使用方法はscrollContentBackgroundの引数にhiddenを渡し通常のSwiftUI部品のようにbackgroundを変更するだけです。

List {
    Text("要素1")
    Text("要素2")
    Text("要素3")
}.scrollContentBackground(.hidden)
.background(Color.blue)

iOS15と16に対応した背景色を変更するListを作る

16以前にも対応したアプリを開発する際にiOS15と16に対応した背景色を変更するListを作ってみます。これで16の際にはscrollContentBackgroundで、15などの際にはイニシャライザのUITableViewを別途設置すれば背景色を変更できます。

struct AvailableListPlaneStack<Content: View>: View {
    var content: Content

    init(@ViewBuilder  content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        if #available(iOS 16.0, *) {
            List {
                content
            }.scrollContentBackground(.hidden)
                .listStyle(.grouped)
                .background(Color.white)
        } else {
            List {
                content
            }.listStyle(.grouped)
        }
    }
}

私がSwift UI学習に使用した参考書

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

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