【SwiftUI】トグルスイッチの使い方

本記事ではトグルスイッチの設置方法からボタンクリックによる異なる処理の実装方法などについて解説していきます。

1. トグルスイッチとは
2. トグルスイッチを配置
3. トグルスイッチによる条件分岐
4. トグルボタンの色を変える
5. まとめ

トグルスイッチとは

トグルスイッチとは、クリックなどの一つの操作を繰り返すことでON/OFFを切り替えられる仕組みを実現することができるスイッチのことを示します。

例えば、以下のような電源スイッチを表すトグルスイッチでは、ONの時に電源が入り、OFFで電源を落とすことを表し、表示の切り替えだけでなく切り替えのタイミングで実際に動作を行うことができます。

トグルスイッチは、選択肢が主に2つである場合に、現在の選択されている値も一目でわかりやすくシンプルで非常に便利な機能になります。

トグルスイッチを配置

トグルスイッチは、VIewsライブラリからソースコードにドラッグ&ドロップで配置することができます。

設置はこれだけで完了し、以下のコードが追加されていることが確認できます。

var body: some View {
        VStack {
            Toggle(isOn: Is On) {
                Label
            }
        }
        .padding()
    }

Toggle()のパラメータには、画面でのON/OFF操作によってtrue/falseの値が切り替わるBool型の変数を渡してあげる必要があります。画面操作と連動して値が切り替わる必要があるため@StateをつけたBoolの値を用意してあげます。

@State var isChange = true

Label部分にはトグルの役割を表すテキストを入れてあげることで、冒頭の画像のようなトグルスイッチの完成です。完成系のコードは以下の通りです。

struct ContentView: View {
    @State var isChange = true
    var body: some View {
        VStack {
            Toggle(isOn: $isChange){
                Text("電源スイッチ")
            }
            
        }
        .fixedSize()
        .padding()
    }
}

画面表示

View上でスイッチをクリックしてみてON/OFFが切り替わることが確認できます。切り替えによる表示や動作の変更は実装はこれからですが、簡単にToggleスイッチを配置できました。

Toggle()に@Stateで宣言した変数isChangeに対して「$」をつけて引数を渡していることについて軽く触れます。

宣言したBool型の変数をそのままToggle()のパラメータisOnに渡して見ると以下のようなエラーが表示されます。これは、「Toggle()がパラメータとして求めている値はBool型ではなく、Binding<Bool>というデータ型です。」というエラーになります。

Cannot convert value 'isChange' of type 'Bool' to expected type 'Binding<Bool>', use wrapper instead

SwiftUI側が用意してくれているToggle()のコードを見てみますと、初期処理のinitのパラメータとしてバインディング型のデータをパラメータとしてもらうことを前提としていることが確認でできます。

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

受け手側で@BindingやBindingなどのバインディング型の引数を求めている場合には、変数に「$」をつけて渡してあげる必要がある点には注意しましょう！

トグルスイッチによる条件分岐

トグルスイッチのクリックによるON/OFFの切り替えによって、実際に異なる動きを実装していきます。

トグルスイッチの名称を電源スイッチにしていますので、電気のアイコンを使用して電源のON/OFFを画像の切り替えで表現していきます。まずは、切り替え前の画像と切り替え後の画像を用意します。

struct ContentView: View {
    @State var isChange = true
    var body: some View {
        VStack {
            Toggle(isOn: $isChange){
                Text("電源スイッチ")
            }
            .fixedSize()
            .padding()
            
            Image(systemName: "lightbulb.led")
                .font(.system(size: 200))
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(.black)
            Image(systemName: "lightbulb.led.fill")
                .font(.system(size: 200))
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(.yellow)
        }
    }
}

実行結果

SFシンボルというアイコン画像の使い方については以下の記事で解説していますので、ぜひご覧ください。

IT図書館

2024.01.20

【SwiftUI】SFシンボルの活用方法

https://jinluvman.com/archives/2024/01/20/1600

本記事では、SwiftUIで使用可能なSFシンボルと呼ばれるアイコン画像を表示する方法と色付けを行う方法について解説していきます。アプリ内のボタンのデザインや文章の合間のアイコンなど、画像やイラストを入れるまでもない部分に挿入するするなどの活用方法が考えられます。SFシンボルの表示SFシンボルは、Imageオブジェクトやlabelオブジェクトなどを活用して表示することが可能で、エディター右上の「＋」ボタンからツールパレットを開いてそこから好きなシンボルを選択することも可能です。ツールパレットの上部の一番右側の星のマ...

次にif文の条件分岐を用いてこの二つの画像を、ONの時に黄色い画像、OFFの際に黒い画像を表示するように作っていきます。if文は条件として、「aが~なら」という真偽値を条件として処理の分岐を行いますが、トグルスイッチで切り替えを行なっている変数isChangeは真偽値ですのでそのまま条件とすることができます。

struct ContentView: View {
    @State var isChange = true
    var body: some View {
        VStack {
            Toggle(isOn: $isChange){
                Text("電源スイッチ")
            }
            .fixedSize()
            .padding()
            
            if isChange {
                Image(systemName: "lightbulb.led.fill")
                    .font(.system(size: 200))
                    .symbolRenderingMode(.hierarchical)
                    .foregroundColor(.yellow)
            }else{
                Image(systemName: "lightbulb.led")
                    .font(.system(size: 200))
                    .symbolRenderingMode(.hierarchical)
                    .foregroundColor(.black)
            }
            
        }
    }
}

トグルスイッチがOFFの場合

トグルスイッチがONの場合

トグルボタンの色を変える

おまけでトグルボタンの色を変更する方法をご紹介します。

Toggle()の後ろに「.tint(色指定)」をつけることでトグルボタンの色を変更することができます。

Toggle(isOn: $isChange){Text("電源スイッチ")}.tint(.red)
Toggle(isOn: $isChange){Text("電源スイッチ")}.tint(.blue)
Toggle(isOn: $isChange){Text("電源スイッチ")}.tint(.purple)
Toggle(isOn: $isChange){Text("電源スイッチ")}.tint(.brown)
Toggle(isOn: $isChange){Text("電源スイッチ")}.tint(.mint)

表示結果