こんにちは!株式会社メモリアインクのふくしまです!
この記事では、UITextFieldDelegate
を利用して、エラーメッセージをテキストフィールドの下に表示する方法について解説します。
この記事を読んで分かること…
・UITextFieldDelegateとは?
・テキストフィールドの編集プロセスを監視して制御する方法
・入力フィールドのバリデーションを行う方法
UITextFieldDelegateとは?
UITextFieldDelegate
は、UITextField(テキストフィールド)の動作に関するデリゲートメソッドの集まりを提供するプロトコルです。このプロトコルを使用することで、テキストフィールドの編集開始時、編集中、編集終了時など、さまざまなイベントに応じたカスタマイズされた挙動を実装することが可能になります。SwiftにおけるiOSアプリ開発で、ユーザー入力の管理やバリデーションを効果的に行うために広く利用されています。
デリゲートについては、以下の記事で詳しく解説していますので併せてご覧ください!
主なUITextFieldDelegateメソッド
textFieldShouldBeginEditing(_:)
: テキストフィールドが編集を開始する直前に呼ばれるメソッドです。このメソッドでfalse
を返すと、編集が開始されません。textFieldDidBeginEditing(_:)
: テキストフィールドの編集が開始された直後に呼ばれるメソッドです。textFieldShouldEndEditing(_:)
: テキストフィールドが編集を終了する直前に呼ばれるメソッドです。このメソッドでfalse
を返すと、編集モードが終了しません。textFieldDidEndEditing(_:)
: テキストフィールドの編集が終了した直後に呼ばれるメソッドです。編集終了の理由に応じて、複数のバリエーションがあります(例:textFieldDidEndEditing(_:reason:)
)。textField(_:shouldChangeCharactersIn:replacementString:)
: テキストフィールドに入力されたテキストが変更されるたびに呼ばれるメソッドです。このメソッド内で入力されたテキストのバリデーションを行うことができます。textFieldShouldClear(_:)
: テキストフィールドの内容がクリアされる直前に呼ばれるメソッドです。このメソッドでfalse
を返すと、内容のクリアがキャンセルされます。textFieldShouldReturn(_:)
: キーボードのリターンキーが押されたときに呼ばれるメソッドです。このメソッド内でキーボードを閉じる処理などを行うことが一般的です。
エラーメッセージの表示方法
概要
それでは、テキストフィールドに入力した文字をバリデーションチェックして、エラーがある場合にエラーメッセージを表示する方法をサンプルコードを示しながら解説していきたいと思います。
前提
UserID、PasswordのUITextFieldとエラーメッセージのためのUILabel、ログインボタンのためのUIButtonを用意し、ViewControllerに紐づけておきましょう。
サンプルコード
import UIKit
class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var userIdTextField: UITextField!
@IBOutlet weak var passwordTextField: UITextField!
@IBOutlet weak var userIdErrorLabel: UILabel!
@IBOutlet weak var passwordErrorLabel: UILabel!
@IBOutlet weak var actionButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
userIdTextField.delegate = self
passwordTextField.delegate = self
userIdErrorLabel.isHidden = true
passwordErrorLabel.isHidden = true
// エラーメッセージの色を赤に設定
userIdErrorLabel.textColor = UIColor.red
passwordErrorLabel.textColor = UIColor.red
// ボタンの初期表示時の設定
initialSetupButton()
// テキストフィールドに変更があった時の処理
userIdTextField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
passwordTextField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
}
func textFieldDidEndEditing(_ textField: UITextField) {
if textField == userIdTextField {
validateUserId()
} else if textField == passwordTextField {
validatePassword()
}
}
func validateUserId() {
guard let userId = userIdTextField.text, !userId.isEmpty else {
userIdErrorLabel.text = "ユーザーIDを入力してください。"
userIdErrorLabel.isHidden = false
return
}
userIdErrorLabel.isHidden = true
}
func validatePassword() {
guard let password = passwordTextField.text, password.count >= 8 else {
passwordErrorLabel.text = "パスワードは8文字以上である必要があります。"
passwordErrorLabel.isHidden = false
return
}
passwordErrorLabel.isHidden = true
}
func initialSetupButton() {
// 初期状態でボタンを非活性にする
actionButton.isEnabled = false
// 非活性状態の色:透明度50%
actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
}
func updateButtonState(isEnabled: Bool) {
actionButton.isEnabled = isEnabled
// ボタンの背景色を活性状態に応じて更新
if isEnabled {
actionButton.backgroundColor = UIColor.systemOrange // 活性状態の色
} else {
// 非活性状態の色:透明度50%
actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
}
}
@objc func textFieldDidChange(_ sender: UITextField) {
let isUserIdFilled = !(userIdTextField.text?.isEmpty ?? true)
let isPasswordFilled = !(passwordTextField.text?.isEmpty ?? true)
actionButton.isEnabled = isUserIdFilled && isPasswordFilled
updateButtonState(isEnabled: actionButton.isEnabled)
}
}
サンプルコードの説明
・3行目:UITextFieldDelegate
プロトコルに準拠しており、テキストフィールドのデリゲートメソッドを実装することができます。
・25-31行目:テキストフィールドの編集が終了した時に呼び出されるメソッドです。どのテキストフィールドが編集されたかに応じて、適切なバリデーションメソッド(validateUserId
またはvalidatePassword
)を呼び出します。
・33-40、42-49行目:ユーザーIDとパスワードの入力をバリデーションし、条件を満たさない場合はエラーラベルを表示します。
・53-58、60-69行目:ボタンの初期状態を非活性に設定し、テキストフィールドの入力状態に応じてボタンの活性・非活性を動的に更新します。
・72-77行目:どちらのテキストフィールドにも入力がある場合にのみ、ログインボタンを活性化するロジックを実装しています。このメソッドは、テキストフィールドの内容が変更されるたびに呼び出されます。
ボタンを非活性にする方法については、以下の記事で詳しく解説していますので、併せてご覧ください!
動作確認
それではビルドして動作確認してみましょう!
まとめ
いかがでしたか?
本記事では、UITextFieldDelegate
を利用してログイン画面における入力バリデーションを行い、エラーメッセージを表示する方法を解説しました。ユーザーからの入力値を適切に検証し、エラーがある場合はその内容を明確に伝えることで、よりユーザーにとって使いやすいアプリケーションとなるでしょう。
この記事が皆様の開発ライフの一助になれると幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント