超絶簡単手作りSwiftチェックボックスの作り方

チェックボックスを作る

現在業務で会社のAndroidアプリをiOSのアプリに作り替えることをしています。色々やり方はあるかと思いますが、下準備なしで、Swiftのデフォルトの機能だけでチェックボックス的なやつを超絶簡単に作ったのでご紹介します。

Swift 5.2.4
Xcode 11.6

使うのはこれだけ

・Booleanをいれる変数
・UIButton
・SF Symbolsから"checkmark"くん

まずは変数を宣言します

ViewController.swift

private var isChecked = false

デフォルトではチェックされてない状態なのでfalseを代入。

次にUIButton

先ほどの変数の下に以下を記述。

ViewController.swift

    private let checkBox: UIButton = {
        let button = UIButton(frame: CGRect(x: 0,
                                            y: 0,
                                            width: 50,
                                            height: 50))
        button.layer.borderWidth = 2
        button.layer.borderColor = UIColor.gray.cgColor
        return button
    }() //縦横50、灰色の太さ2の枠があるボタン
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(checkBox)
        //ボタンをviewに追加
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        checkBox.center = view.center
        //ボタンの中心をviewの中心に合わせる
    }

ボタンを押すたびにcheckedの値を変える

ということで以下をreturn buttonの上あたりに追記

ViewController.swift

button.addTarget(self,
                 action: #selector(didTapCheckBox),
                 for: .touchUpInside)

そしてviewDidLayoutSubviewsの下あたりにこれを追記

ViewController.swift

@objc private func didTapCheckBox(){
     print("tap")
}

これで灰色の四角をタップするたびにdidTapRadioButton関数の中身が実行されるようになります。

何をどうしたいのか

・ボタンをタップするたびに変数checkedの値をtrueだったらfalse, falseだったらtrueに変えたい
・trueの状態であれば四角にチェックマークが欲しい、falseだったら空っぽにしたい

これらをすっきり記述できるのがSwitch文です！それでは以下をdidTapRadioButton関数の中に記述します。

ViewController.swift

checkBox.setImage(isChecked ? UIImage(systemName: "checkmark") : nil, for: .normal)
checked.toggle()

これで完成！全体像。

ViewController.swift

import UIKit

final class ViewController: UIViewController {
    private var isChecked = false
    
    private let checkBox: UIButton = {
        let button = UIButton(frame: CGRect(x: 0,
                                            y: 0,
                                            width: 50,
                                            height: 50))
        button.layer.borderWidth = 2
        button.layer.borderColor = UIColor.gray.cgColor
        button.addTarget(self, action: #selector(didTapRadioButton), for: .touchUpInside)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(checkBox)
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        checkBox.center = view.center
    }
    
    @objc private func didTapCheckBox() {
       radioButton.setImage(isChecked ? UIImage(systemName: "checkmark") : nil, for: .normal)
       isChecked.toggle()
    }
}

さいごに

他にも背景色を変えたりアニメーションで遅延を起こしたりして色々アレンジできるので、もしよかったら試してみてください😄