2024/3/29

【Swift UI】SegmentedPickerStyleの背景色や選択色を変更する方法！

この記事からわかること

Swift UIのPickerでSegmentedPickerStyleの背景色や選択色を変更する方法
UISegmentedControlのappearanceのカスタマイズ方法

index

[open]

Swift UIのSegmentedPickerStyleの背景色や選択色を変更する方法
UISegmentedControlのappearanceを調整する
テキストカラーやフォントなど

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

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

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

Swift UIのSegmentedPickerStyleの背景色や選択色を変更する方法

Swift UIでピッカーを実装する際にSegmentedPickerStyleを指定すると以下のようなデザインになります。

 Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(lang, id:\.self) { item in
        Text(item)
    }
}.pickerStyle(SegmentedPickerStyle())

デフォルトでは設定されているカラースキームによって白か黒の背景色、選択色になっています。これを背景色の変更はbackgroundを使用することで変更することが可能です。

 Picker(selection: $selectedLang, label: Text("language")) {
    ForEach(lang, id:\.self) { item in
        Text(item)
    }
}.pickerStyle(SegmentedPickerStyle())
    .background(Color.gray) // 背景色をグレーに設定

しかし選択色を変更するモディファイアは現在まだ定義されていないので元のViewクラスであるUISegmentedControlのappearanceを直接変更することで色を変えることができるようになります。

UISegmentedControlのappearanceを調整する

UISegmentedControlのappearanceのselectedSegmentTintColorの値を変更することでピッカーで選択されてるアイテムの背景色を変更することが可能です。

init() {
    let appearance = UISegmentedControl.appearance()
    // 選択しているアイテムの背景色
    appearance.selectedSegmentTintColor = .systemIndigo
}

テキストカラーやフォントなど

UISegmentedControlのappearanceからでも背景色やテキストカラーなんかも変更することができます。setTitleTextAttributesにはNSAttributedString型で文字の属性を細かく指定することが可能です。

init() {
    let appearance = UISegmentedControl.appearance()
    // 選択しているアイテムの背景色
    appearance.selectedSegmentTintColor = .systemIndigo

    // ピッカー全体の背景色
    appearance.backgroundColor = .gray

    let font = UIFont.boldSystemFont(ofSize: 18)
    // 未選択アイテムの文字属性
    appearance.setTitleTextAttributes([.font: font, .foregroundColor: UIColor.black], for: .normal)
    // 選択アイテムの文字属性
    appearance.setTitleTextAttributes([.font: font, .foregroundColor: UIColor.white], for: .selected)
}