【SwiftUI】true/falseの入力・トグルの作成

SwiftUIにおける入力フォームを作成する際に、ON/OFFの2つの状態を持たせたい場合は“トグル”を使用すると便利です。
トグルを使用することで以下のような入力フォームを作成できます。

対応バージョン
コード例
トグルのカスタマイズ例
buttonスタイル
スタイルの自作
1. システムアイコンの画像を変更すればチェックボックスのデザインも変更できる
チェックマークのデザイン例

対応バージョン

iOS	13.0以上
XCode(当サイトの環境)	13.4.1

コード例

import SwiftUI

struct ToggleSample: View {
    @State private var toggleState = false
    var body: some View {
        VStack {
            Toggle("ToggleState", isOn: $toggleState)
        }
        //トグルのスタイルを指定
        .toggleStyle(.switch)
    }
}

トグルのカスタマイズ例

toggleStyleモディファイアを使用すると、トグルの外観を変更することができます。

import SwiftUI

struct ToggleSample: View {
    @State private var toggleState = false
    var body: some View {
        VStack {
            Toggle("トグルの状態", isOn: $toggleState)
        }
        //トグルのスタイルを指定
        .toggleStyle(.button)
    }
}

buttonスタイル

.buttonを指定すると以下のような見た目に変更されます。

スタイルの自作

appleの開発サイトを参考にToggleStyleの自作方法を紹介します。

makeBody(configuration:) | Apple Developer Documentation

Creates a view that represents the body of a toggle.

スタイルの作成は、ToggleStyleプロトコルを使用して作成することができます。
ToggleStyleプロトコルでは”func makeBody”を宣言して、その中に作成したいViewを定義していきます。

import SwiftUI

struct ToggleSample: View {
    @State private var toggle1State = false
    @State private var toggle2State = false
    var body: some View {
        VStack {
            Toggle("トグル1の状態", isOn: $toggle1State)
            Toggle("トグル2の状態", isOn: $toggle2State)
                
        }
        //トグルのスタイルを指定
        .toggleStyle(CheckToggleStyle())
    }
}

struct CheckToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            //Toggleスタイルのプロパティでラベルとトグルの状態にアクセスできる
            configuration.isOn.toggle()
        } label: {
            HStack {
                //システムアイコンを使用する
                Image(systemName: configuration.isOn
                        //toggleがtrueの時の表示
                        ? "checkmark.circle.fill"
                        //toggleがfalseの時の表示
                        : "circle")
                //toggleのラベル
                configuration.label
            }
        }
        //以下はトグルの見栄えを変更するモディファイア
        //tintは色を変更できる
        .tint(.primary)
    }
}

システムアイコンの画像を変更すればチェックボックスのデザインも変更できる

“checkmark.circle.fill”→”checkmark.square”に変更すると以下のようなチェックボックスとなります。

//システムアイコンを使用する
Image(systemName: configuration.isOn
     //toggleがtrueの時の表示
     ? "checkmark.square"
      //toggleがfalseの時の表示
      : "square")

チェックマークのデザイン例

元々、以下のような選択肢にチェックマークを重ねたデザインを使用したかったため、トグル機能を調べていました。

.overlayを使用することで、やりたかったことが実現できそうです。参考までにコード例を載せておきます。

struct CheckMarkToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            //Toggleスタイルのプロパティでラベルとトグルの状態にアクセスできる
            configuration.isOn.toggle()
        } label: {
            HStack {
                //toggleのラベル
                configuration.label
                    .overlay(
                        //システムアイコンを使用する
                        Image(systemName: configuration.isOn
                        //toggleがtrueの時の表示
                        ? "checkmark"
                        //toggleがfalseの時の表示
                        : "")
                            .foregroundColor(.red)
                            .font(.system(size: 40))
                )
            }
        }
        //以下はトグルの見栄えを変更するモディファイア
        //tintは色を変更できる
        .tint(.primary)
    }
}