【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】利用規約画面を例にチェックボックスの実装や操作の制御について詳しく解説!

【Swift】利用規約画面を例にチェックボックスの実装や操作の制御について詳しく解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!

この記事では、利用規約画面にチェックボックスを実装し、その操作を制御するサンプルコードを用いながら、ステップバイステップで解説します。

この記事を読んで分かること…
・Swiftにおけるチェックボックスの基本的な実装方法
・チェックボックスの操作可・不可を制御する方法

目次

利用規約画面の実装方法

概要

アプリの利用規約画面を例にチェックボックスの実装とユーザーが利用規約を読んだか否かを判断し、読んだ場合のみ利用規約同意のチェックボックスを操作できるようにする方法をサンプルコードを示しながら解説していきます。

UI設計

画面は利用規約同意画面と利用規約画面の2画面を用意します。
利用規約同意画面では利用規約画面へ遷移するためのボタン(UIButton)と利用規約同意ボタンのチェックボックス(UIButton)を利用規約同意のテキスト(UILabel)を用意します。
利用規約画面では、利用規約同意画面へ戻るためのボタン(UIButton)を用意します。

利用規約同意画面の実装

サンプルコード

import UIKit

// 利用規約が読まれたことを通知するためのプロトコル
protocol TermsViewControllerDelegate: AnyObject {
    func didAgreeToTerms()
}

class ViewController: UIViewController, TermsViewControllerDelegate {
    var agreeButton: UIButton!
    var termsLabel: UILabel!
        
        override func viewDidLoad() {
            super.viewDidLoad()
            
            // 利用規約ボタンの設定
            let termsButton = UIButton(frame: CGRect(x: 20, y: 100, width: 200, height: 50))
            termsButton.setTitle("利用規約を読む", for: .normal)
            termsButton.backgroundColor = .blue
            termsButton.addTarget(self, action: #selector(openTerms), for: .touchUpInside)
            self.view.addSubview(termsButton)
            
            // チェックボックスの設定
            agreeButton = UIButton(frame: CGRect(x: 20, y: 160, width: 20, height: 20))
            agreeButton.setImage(UIImage(systemName: "square"), for: .normal)
            agreeButton.setImage(UIImage(systemName: "checkmark.square"), for: .selected)
            agreeButton.isEnabled = false
            agreeButton.addTarget(self, action: #selector(toggleCheckbox), for: .touchUpInside)
            self.view.addSubview(agreeButton)
            
            // 「利用規約の同意」というラベルの設定
            termsLabel = UILabel(frame: CGRect(x: agreeButton.frame.maxX + 10, y: 160, width: 200, height: 20))
            termsLabel.text = "利用規約の同意"
            self.view.addSubview(termsLabel)
        }
    
    @objc func openTerms() {
        let termsVC = TermsViewController()
        termsVC.delegate = self
        self.present(termsVC, animated: true, completion: nil)
    }
    
    @objc func toggleCheckbox(sender: UIButton) {
        sender.isSelected = !sender.isSelected
        // ここで、チェックボックスの状態に応じて必要な処理を追加できます
        // 例: 利用規約に同意したかどうかを保存する処理など
        if sender.isSelected {
            // チェックされた時の処理
            print("利用規約に同意しました")
        } else {
            // チェックが外された時の処理
            print("利用規約の同意を解除しました")
        }
    }
    
    // TermsViewControllerDelegateのメソッド
    func didAgreeToTerms() {
        agreeButton.isEnabled = true // 読了後はチェックボックスを操作可にする
    }
}

サンプルコードの説明

🔸3-6行目:TermsViewControllerDelegateという名前のプロトコルを定義しています。このプロトコルは、利用規約が読まれたことをViewControllerに通知するために使用されます。didAgreeToTermsというメソッドが含まれていますが、これは具体的な実装を持たず、プロトコルに適合するクラスで実装される必要があります。
🔸8行目:ViewController(利用規約同意画面)でTermsViewControllerDelegateプロトコルに準拠しています。利用規約が読まれたことを知るためのメソッドを実装する必要があります。
🔸16-20行目:利用規約画面へ遷移するボタン(termsButton)の設定です。16行目で位置とサイズ、17行目でボタンのタイトル、18行目でボタンの背景色を設定しています。
🔸19行目:termsButton がタップされたときにopenTermsメソッドを呼び出すように設定しています。
🔸20行目:termsButtonをビューコントローラのビューのサブビューとして追加しています。
🔸22-28行目:利用規約に同意するためのチェックボックスとして機能するagreeButtonを作成します。
🔸24,25行目:agreeButtonの画像を設定しています。通常状態では四角形、選択された状態ではチェックマークが入った四角形が表示されます。setImage(_:for:)メソッドは、指定された状態に対してボタンの画像を設定します。
.normal…ボタンが通常状態のとき
.selected…ボタンが選択状態のとき
🔸36-40行目:openTermsメソッドは、利用規約の画面を表示するために呼び出されます。新しいTermsViewControllerインスタンスを作成し、現在のViewControllerインスタンスをそのデリゲートに設定しています。そして、presentメソッドを使用してTermsViewControllerをモーダルで表示しています。
🔸42-52行目:toggleCheckboxメソッドは、チェックボックスの状態を切り替えるために呼び出されます。senderagreeButton)のisSelectedプロパティの値を反転させています。これにより、ボタンの選択状態が切り替わります。またチェックボックスの状態に応じてコンソールにメッセージを出力しています。
🔸56-58行目:didAgreeToTermsメソッドはTermsViewControllerDelegateプロトコルの一部としてViewController内で実装されています。これは、利用規約が読まれた後に呼び出され、チェックボックス(agreeButton)を操作可能にします。

利用規約画面の実装

サンプルコード

import UIKit

class TermsViewController: UIViewController {
    weak var delegate: TermsViewControllerDelegate?
       
       override func viewDidLoad() {
           super.viewDidLoad()
           
           self.view.backgroundColor = .white
           
           // 閉じるボタンの設定
           let closeButton = UIButton(frame: CGRect(x: 20, y: 50, width: 100, height: 50))
           closeButton.setTitle("閉じる", for: .normal)
           closeButton.backgroundColor = .red
           closeButton.addTarget(self, action: #selector(closeTerms), for: .touchUpInside)
           self.view.addSubview(closeButton)
       }
       
       @objc func closeTerms() {
           delegate?.didAgreeToTerms()
           self.dismiss(animated: true, completion: nil)
       }
}

サンプルコードの説明

🔸4行目:TermsViewControllerDelegate型のプロパティdelegateを宣言しています。これにより、デリゲートパターンを使用して他のコンポーネントとの通信を可能にします。
🔸19-22行目:closeTermsメソッドを定義しています。このメソッドは、閉じるボタンがタップされたときに呼び出されます。
🔸20行目:デリゲートが設定されていれば、didAgreeToTermsメソッドを呼び出しています。これは、利用規約が読まれ、同意されたことをデリゲートに通知するために使用されます。
🔸21行目:dismissメソッドを呼び出して、モーダルで表示されたビューコントローラ(利用規約画面)を閉じています。animated: trueは閉じるアニメーションを有効にするためのものです。completionパラメータにnilを指定しているため、閉じる完了時の追加処理は行われません。

プロトコルやデリゲートについては以下の記事で解説していますので、併せてご覧ください。

動作確認

ふくしま

それではビルドして、動作確認してみましょう!

【Swift】利用規約画面を例にチェックボックスの実装や操作の制御について詳しく解説!

まとめ

いかがでしたか?
本記事では、アプリにチェックボックスを実装し、利用規約画面と連携させる方法を詳しく解説しました。
それではまた、次回の記事でお会いしましょう。この記事が皆様の開発ライフの一助になれると幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次