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

この記事からわかること

  • SwiftUION/OFF切り替えスイッチ実装する方法
  • Toggle構造体使い方
  • ラベルスタイルカラー変更方法
  • ToggleStyleカスタムトグルボタンの作成方法

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

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

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

struct Toggle<Label> where Label : View

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

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

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

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

実装方法

トグルボタンを実装するためには切り替わる値を保持させる変数を用意し、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)
    }
}
【SwiftUI】Toggle構造体の使い方!ON/OFF切り替えスイッチの実装

見た目の変更

デフォルトではラベルとボタンが表示されますが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)
    }
}
【SwiftUI】Toggle構造体の使い方!ON/OFF切り替えスイッチの実装

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

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

iOSアプリ開発の場合はbuttonswitch(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())
    }
}
【SwiftUI】Toggle構造体の使い方!ON/OFF切り替えスイッチの実装

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

extension ToggleStyle where Self == CheckBoxToggleStyle {
    static var checkBoxiOS: CheckBoxToggleStyle { .init() }
}
【SwiftUI】Toggle構造体の使い方!ON/OFF切り替えスイッチの実装
Toggle(isOn: $isOn) {
    EmptyView()
}.toggleStyle(.checkBoxiOS)

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

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index