こんにちは!株式会社メモリアインクのふくしまです!
この記事では、テキストフィールドの入力内容に応じてボタンの活性・非活性を動的に制御する方法をわかりやすく解説します。
この記事を読んで分かること…
・テキストフィールドの入力内容に基づいてボタンの活性・非活性を動的に制御する方法
・テキストフィールドの変更を監視する方法
・ボタンの背景色を活性・非活性状態に応じて変更する方法
ボタンの非活性化の実装
概要
テキストフィールドの入力内容に基づいてボタンの活性・非活性を切り替える機能を実装を例にサンプルコードを示しながらボタンの非活性化の実装方法を解説します。
前提
画面上にUITextFieldとUIButtonを1つずつ配置し、ViewControllerに紐づけておきましょう。
サンプルコード
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var textField: UITextField!
@IBOutlet weak var actionButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// ボタンの初期状態の設定
initialSetupButton()
// テキストフィールドの変更を監視する
textField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
}
func initialSetupButton() {
// 初期状態でボタンを非活性にする
actionButton.isEnabled = false
// 非活性状態の色:透明度50%
actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
}
@objc func textFieldDidChange(_ sender: UITextField) {
// テキストフィールドの内容に応じてボタンの活性状態を更新
actionButton.isEnabled = !sender.text!.isEmpty
updateButtonState(isEnabled: actionButton.isEnabled)
}
func updateButtonState(isEnabled: Bool) {
actionButton.isEnabled = isEnabled
// ボタンの背景色を活性状態に応じて更新
if isEnabled {
actionButton.backgroundColor = UIColor.systemOrange // 活性状態の色
} else {
// 非活性状態の色:透明度50%
actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
}
}
}
サンプルコードの説明
🔸7-13行目:ボタンの初期状態を設定するメソッドを呼び出し、addTarget
でテキストフィールドのテキストが変更されたときに呼び出されるメソッドを指定しています。
🔸12行目:addTaraddTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event)
・target
: アクションメソッドが存在するオブジェクト。アクションを受け取るオブジェクトを指定します。
・action
: 実行するメソッドを指定するセレクタ。イベントが発生したときに呼び出されるメソッドを指定します。
・controlEvents
: リスナーを追加するイベントのタイプ。.touchUpInside
(ボタンのタップ)、.valueChanged
(スイッチの切り替えやスライダーの値変更など)、.editingChanged
(テキストフィールドのテキスト編集)など、UIControl.Event
の値を使用して具体的なイベントを指定します。
🔸15-20行目:ボタンの初期設定を行うinitialSetupButton
メソッドを定義。ボタンを非活性にし、背景色を透明度50%のオレンジ色に設定します。
🔸22-27行目:テキストフィールドのテキストが変更されるたびに呼び出されるメソッドです。テキストフィールドが空でない場合にボタンを活性化し、それ以外の場合は非活性化します。その後、ボタンの状態に応じて背景色を更新するupdateButtonState
メソッドを呼び出します。12行目のaddTaraddTarget
のaction
に設定します。
🔸29-38行目:ボタンの活性・非活性状態に応じて背景色を更新するupdateButtonState
メソッドを定義。活性状態では標準のオレンジ色、非活性状態では透明度50%のオレンジ色に設定しています。
動作確認
それではビルドして、動作確認してみましょう!
まとめ
いかがでしたか?
テキストフィールドの入力内容に応じてボタンの活性・非活性を動的に制御する方法について解説しました。この実装を通じて、ユーザーインターフェースの操作性を高め、より直感的に理解しやすいアプリケーションを開発することができるでしょう。
それではまた、次回の記事でお会いしましょう。この記事が、皆様の開発ライフの一助になれると幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] […]