[SwiftUI]カスタムToggleStyle(Customトグルスタイル)を実装するには？

どうも、ちょげ(@chogetarou)です。

自作したToggleStyleを実装する方法を紹介します。

方法
使用例

方法

カスタムToggleStyleを実装するには、まず「ToggleStyle」に準拠した構造体を用意します。

struct CustomToggleStyle : ToggleStyle { }

次に、CustomToggleStyleにmakeBodyメソッドを追加します。

makeBodyメソッドでは、Toggleの表示を指定します。

struct CheckToggleStyle : ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        ToggleView() //トグルの表示を指定
    }
}

makeBodyメソッドでは、引数「configuration」のプロパティでToggleの情報を取得・操作することが出来ます。

Toggleで必須のラベルは「configuration.label」、値は「configuration.isOn」で取得・操作することが出来ます。

最後に、ToggleにtoggleStyle修飾子を付与し、toggleStyleの引数にCustomToggleStyleのインスタンスを指定します。

Toggle(・・・)
    .toggleStyle(CustomToggleStyle())

これでカスタムToggleStyleを実装することが出来ます。

使用例

struct ContentView: View {
    
    @State var isOn = false
    
    var body: some View {
        VStack {
            Toggle("Switch", isOn: $isOn)
                .toggleStyle(CheckToggleStyle())
                .padding()
        }
    }
    
}

struct CheckToggleStyle : ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button(action : {
            configuration.isOn.toggle()
        }) {
            Label {
                configuration.label
            } icon: {
                Image(systemName: configuration.isOn ? "checkmark.square" : "square")
                                    .foregroundColor(configuration.isOn ? .accentColor : .secondary)
                                    .imageScale(.large)
            }
        }
        .buttonStyle(PlainButtonStyle())
    }
}