【SwiftUI】Toggle()を用いて変数を切り替える方法を解説！

2025年1月22日

ほりうち

こんにちは！Shoriと申します。この記事では、Swift 5.10およびXcode 15.4を使用して、SwiftUIでtoggle()を使用して値を切り替える方法について、サンプルコードを交えながら説明しております。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・toggle()の使い方
・.toggleStyle()を用いた.toggleのカスタマイズの方法
・makeBodyを用いた.toggleのカスタマイズの方法

実行環境

・実行環境：SwiftUI+XCode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：2024年12月30日（月）

※ 今回紹介するtoggle()は、iOS13.0+, macOS10.15+以上で動作しますので、それ未満の場合はOSのアップデートが必要な場合があります。

toggleとは？

struct Toggle<Label> where Label : View

toggleは変数のONとOFFを切り替えることの出来る制御部品です。

Toggleを使ってみよう（.switch）

実装イメージ

今回実装するボタンのイメージ図は下記の通りです。通信が多く発生するアプリにおいて、通信量を削減するために通信モードを切り替えるための部品を実装する、という状況を想定して実装を行います。

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var isUnlocked: Bool = false
    
    var body: some View {
        Toggle(isOn: $isUnlocked) {
            Text("通信量を削減する \n \(isUnlocked)")
        }
        .padding(16)
        .toggleStyle(.switch)
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。Bool型のisUnlockedという変数を定義します。
◾️行 4: Toggleを宣言します。isOnを引数に取り、その中にisUnlockedを代入します。その際にBinding<Bool>型に変換する必要があるため、行頭に$を付けておきます。
◾️行 4~5: Toggleのブラケットの中でTextを宣言します。ラベルを改行することで、isUnlockedの値が更新されたら2行目に表示されるようにします。
◾️行 6: 　余白を16に設定します。
◾️行 7: .toggleStyle(.switch)を指定することで、通常のToggleのスタイルを適用することができます。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

出力

トグルを押したことで、Boolの値が更新されていることが確認できました。

toggleを使ってみよう（.button）

今回は、先ほどのコードで指定した.toggleStyleの中身を変更して起動してみましょう。

概要

.toggleStyle(.button)

.toggleStyleには引数に、.button, .switch, Configuration, .automatic, makeBody()を取ることができます。
※ .automatic, makeBody()はこの記事で紹介するものと内容が重複するため、この記事では割愛します。

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var isUnlocked: Bool = false
    
    var body: some View {
        Toggle(
                "通信量を削減する",
                systemImage: "dot.radiowaves.left.and.right",
                isOn: $isUnlocked
            )
        .padding(16)
        .toggleStyle(.button)
    }
}

#Preview {
    BlogView()
}

また、今回はtoggleの書き方も変更してみましょう。toggleは引数を3つ取ることが可能で、画像もtoggleに使うことができます。

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。Bool型のisUnlockedという変数を定義します。
◾️行 4: Toggleを宣言します。
・第1引数： ラベルに表示するTextを宣言します。
・第2引数：Image()の中でsystemImageを引数に取り、任意の画像を指定します。
・第3引数：isOnを引数に取り、その中にisUnlockedを代入します。その際にBinding<Bool>型に変換する必要があるため、行頭に$を付けておきます。
◾️行 8: 　余白を16に設定します。
◾️行 9: .toggleStyle(.button)を指定することで、特殊なToggleのスタイルを適用することができます。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

出力

トグルを押したことで、Toggleが更新されていることが確認できました。

toggleを使ってみよう（CustomToggleStyle）

今回も、先ほどのコードで指定した.toggleStyleの中身を変更して起動してみましょう。

概要

.toggleStyle(CustomToggleStyle())

CustomToggleStyle()を使うことで、カスタマイズしたViewを渡すことができます！

サンプルコード

import SwiftUI

struct BlogView: View {
    @State private var isUnlocked: Bool = false
    
    var body: some View {
        Toggle(
                "ボタンを押して録音",
                isOn: $isUnlocked
            )
        .padding(16)
        .toggleStyle(CustomToggleStyle())
    }
}

struct CustomToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            
            Spacer()
            
            switch configuration.isOn {
            case true:
                Rectangle()
                    .fill(.blue)
                    .frame(width: 30, height: 30)
            case false:
                Circle()
                    .fill(.red)
                    .frame(width: 30, height: 30)
                    
            }
        }
        .onTapGesture {
            configuration.isOn.toggle()
        }
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

// BlogView
◾️行 1: SwiftUIをインポートしています。
◾️行 2: @Stateを付けて変数の値の状態変更を監視します。またprivate修飾子をつけることで、他のファイルからのアクセスを制限します。Bool型のisUnlockedという変数を定義します。
◾️行 4: Toggleを宣言します。isOnを引数に取り、その中にisUnlockedを代入します。その際にBinding<Bool>型に変換する必要があるため、行頭に$を付けておきます。
◾️行 4~5: Toggleのブラケットの中でTextを宣言します。ラベルを改行することで、isUnlockedの値が更新されたら2行目に表示されるようにします。
◾️行 8: 　余白を16に設定します。
◾️行 9: .toggleStyle(CustomToggleStyle())を指定することで、CustomToggleStyle()のスタイルを適用することができます。

CustomToggleStyle
◾️行 1: ToggleStyleを継承します。
◾️行 2: Configurationを引数に取るmakeBody()という名前のメソッドを定義します。その際、メソッドの名前は必ずmakeBody()にする必要があります。
◾️行 3~: HStackを宣言します。そのブラケットの中でconfiguration.labelとSpacer()とShape()を横並びに並べます。左から順番にToggleに使うlabel、自動にスペースを調整するためのSpacer()、最後にToggleのために使うRectangle()とCircle()を定義します。
◾️行 7~: configuration.isOnを使うことで、Toggleのon/offを検知することができます。falseであれば、sizeが30で赤い丸を描画します。一方でtrueであれば、sizeが30の青い丸を描画します。
◾️行 17~: onTapGesutureを用いて、タップ検知イベントを実装します。toggleメソッドを用いて、Configuration.isOnを切り替えます。この行で、falseであればtrueに、trueであればfalseを返却するようにします。