【Swift】ボタンを非活性にする方法をサンプルコードを示しながら分かりやすく解説！

2024年3月3日2024年4月2日

ふくしま

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

この記事では、テキストフィールドの入力内容に応じてボタンの活性・非活性を動的に制御する方法をわかりやすく解説します。

この記事を読んで分かること…
・テキストフィールドの入力内容に基づいてボタンの活性・非活性を動的に制御する方法
・テキストフィールドの変更を監視する方法
・ボタンの背景色を活性・非活性状態に応じて変更する方法

ボタンの非活性化の実装

概要

テキストフィールドの入力内容に基づいてボタンの活性・非活性を切り替える機能を実装を例にサンプルコードを示しながらボタンの非活性化の実装方法を解説します。

前提

画面上にUITextFieldとUIButtonを１つずつ配置し、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エンジニアを目指すなら【ユニゾンキャリア】
をオススメします！