SwiftUI | Toggleのつまみ（Thumb）の色設定方法

SwiftUI

2024.11.152024.05.29

SwiftUIでToggleのつまみ（Thumb）の色を設定する方法を説明する。

結論

init()の中でUISwitch.appearance().thumbTintColor = 色と記述する。

    init() {
        UISwitch.appearance().thumbTintColor = 色
    }

一例を示す。

init()の中でUISwitch.appearance().thumbTintColor = .redと記述しつまみ（Thumb）の色を赤に設定する。
Toggle()を配置する。

import SwiftUI

struct ContentView: View {

    init() {
        UISwitch.appearance().thumbTintColor = .red       // 1
    }
    
    @State private var 連動させたい変数 = false
    var body: some View {
        Toggle("表示させたい文字列", isOn : $連動させたい変数)  // 2
            .padding()
        Spacer()
    }
}

使用例

ゲームで使えそうな例を示す。キャラの装備を全て外すためのつまみの色を赤にする。

init()の中でUISwitch.appearance().thumbTintColor = .redと記述しつまみ（Thumb）の色を赤に設定する。
Toggleを配置する。

import SwiftUI

struct ContentView: View {

    init() {
        UISwitch.appearance().thumbTintColor = .red                   // 1
    }

    @State private var そうび無し = true
    var equipment: String {
        if そうび無し {
            return ""
        } else {
            return "E"
        }
    }
    let baseWidth: CGFloat = 250
    let baseHeight: CGFloat = 300

    var body: some View {
        Spacer()
        RoundedRectangle(cornerRadius: 10)
            .frame(width:baseWidth, height: baseHeight)
            .foregroundColor(.black)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .frame(width: baseWidth - 10, height: baseHeight - 10)
                    .foregroundColor(.white)
            )
            .overlay(
                Rectangle()
                    .frame(width: baseWidth - 20, height: 3)
                    .foregroundColor(.black)
                    .offset(y: -100)
            )
            .overlay(
                VStack(alignment: .leading) {
                    Text("いしかわ りか")
                        .padding()
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("うさみみバンド")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("バニースーツ")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("あみタイツ")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    Spacer()
                }
            )
        Toggle("そうびを全て外す", isOn : $そうび無し)              // 2
            .padding()
            .frame(width:baseWidth)
            .tint(Color(red: 1.0, green: 0.5, blue: 0.7))  // 背景色をピンクに
        Spacer()
    }
}

リンク