• 2023/2/20
• 4分

【SwiftUI】Toggle構造体の使い方！ON/OFF切り替えスイッチの実装

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

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

posted withアプリーチ

SwiftUIでON/OFF切り替えスイッチの実装方法

Swift UIを使用してON/OFFを切り替えられるスイッチを実装するにはToggle構造体を使用します。

struct Toggle<Label> where Label : View

参考文献： 公式リファレンス-Toggle構造体

toggleは「留木」を意味する英単語でITの分野ではON/OFFの切り替えのような同じ操作で交互に切り替わるような仕組みを指し、ボタン機能と連動させた「トグルボタン」として使われることが多いです。

Swift UIでも以下のような「トグルボタン」が簡単に実装できるようになっています。

実装方法

トグルボタンを実装するためには切り替わる値を保持させる変数を用意し、Toggle構造体の引数にバインディングさせます。

struct ContentView: View {
        // true/falseが切り替わる
    @State  var isOn:Bool = false
    
    var body: some View {
        Toggle(isOn: $isOn) {
            Text(isOn ? "OFF" : "ON")
        }.padding()
    }
}

イニシャライザは以下のようになっています。

init(isOn: Binding<Bool>, @ViewBuilder  label: () -> Label)

色の変更

トグルボタンはデフォルトでは緑色で実装されますが色を変更したい場合はtintモディファイアを使用します。

struct ContentView:  View {
    @State  var isOn:Bool = false
    
    var body: some View {
        Toggle(isOn: $isOn) {
            Text(isOn ? "OFF" : "ON")
        }.padding()
          .tint(.orange)
    }
}

見た目の変更

デフォルトではラベルとボタンが表示されますがtoggleStyleモディファイアを使用することでスタイル(見た目)を変更することができます。

struct ContentView:  View {
    @State  var isOn:Bool = false

    var body: some View {
        Toggle(isOn: $isOn) {
            Text(isOn ? "OFF" : "ON")
        }.padding()
          .tint(.orange)
          .toggleStyle(.button)
    }
}

スタイルはToggleStyleプロトコルの値から選択できます。

protocol ToggleStyle {
    static var automatic: DefaultToggleStyle  //  デフォルト
    static var button: ButtonToggleStyle // ボタン
    static var checkbox: CheckboxToggleStyle // チェックボックス(macOSのデフォルトスタイル)
    static var `switch`: SwitchToggleStyle // スイッチ (iOS/iPadOS/watchOSのデフォルトスタイル)
}

iOSアプリ開発の場合はbuttonとswitch(automatic)の2パターンが使用できます。

ToggleStyleでカスタムトグルボタンの作成

ToggleStyleプロトコルに準拠させることでオリジナルにカスタマイズしたトグルボタンを作成することも可能です。

例えばiOSではデフォルトで実装できないチェックボックス式のトグルボタンを実装してみます。

実装手順は以下の通りです。

1. ToggleStyleに準拠させた構造体を定義
2. makeBodyメソッド内にボタンを定義
3. 引数configurationから真偽値とラベルにアクセス

struct CheckBoxToggleStyle:ToggleStyle{
    
    func makeBody(configuration: Configuration) -> some View {
        Button{
            configuration.isOn.toggle()
        } label: {
            HStack{
                // configuration.label
                Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
            }
        }
    }
}

これで新しいトグルスタイルが定義できたのでtoggleStyleモディファイアを使ってスタイルを反映させてみます。

struct ContentView:  View {
    @State  var isOn:Bool = false
    
    var body: some View {
        Toggle(isOn: $isOn) {
            EmptyView()
        }.toggleStyle(CheckBoxToggleStyle())
    }
}

タイププロパティとして以下のようにしておくことでより簡単に参照できるようになります。

extension ToggleStyle where Self == CheckBoxToggleStyle {
    static var checkBoxiOS: CheckBoxToggleStyle { .init() }
}

Toggle(isOn: $isOn) {
    EmptyView()
}.toggleStyle(.checkBoxiOS)

おすすめ記事：【Swift】プロパティの種類！ストアドプロパティやタイププロパティとは？

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

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