こんにちは!株式会社メモリアインクのふくしまです!
この記事では、利用規約画面にチェックボックスを実装し、その操作を制御するサンプルコードを用いながら、ステップバイステップで解説します。
この記事を読んで分かること…
・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
メソッドは、チェックボックスの状態を切り替えるために呼び出されます。sender
(agreeButton
)の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
を指定しているため、閉じる完了時の追加処理は行われません。
プロトコルやデリゲートについては以下の記事で解説していますので、併せてご覧ください。
動作確認
それではビルドして、動作確認してみましょう!
まとめ
いかがでしたか?
本記事では、アプリにチェックボックスを実装し、利用規約画面と連携させる方法を詳しく解説しました。
それではまた、次回の記事でお会いしましょう。この記事が皆様の開発ライフの一助になれると幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] […]