iOSアラートのテキストエリアで入力した内容をUIに反映させる #Swift

Swift4, iOS 12.1で作成

つくるもの

　ボタンを押すとアラートが表示され、テキストエリアに入力するとLabelのテキストが入力されたものに変更されます。

UI

　StoryBoardにLabelとButtonを配置します。ボタンに表示されるテキストを"alert"にしました。

　ViewControllerと連携させます。

アラートを表示させる

　alertボタンが押された時にアラートを表示するようにコードを記述します。

ViewController

    @IBAction func myAlert(_ sender: Any) {
        let alertController = UIAlertController(title:"hoge", message:"fuga", preferredStyle: UIAlertController.Style.alert)

        present(alertController, animated:true, completion: nil)
    }

　アラートを表示するためにまずUIAlertControllerクラスのインスタンスを生成します。title:は太字のタイトル、message:はメッセージ、preferredStyle:はアラートスタイルです。
　今回はUIAlertController.Style.alertで中央に表示させるアラートを使用します。他にもアラートを下に表示させるUIAlertController.Style.actionsheetがあります。

　presentを使って上で生成したアラートを表示させます。animated:をtrueにするとアニメーション効果が付加されます。completion:はUIAlertControllerを表示したあとに実行するものですが、何もないのでnilにします。

　実行するとこのように表示されます：

　このままだとこの表示から逃げられないのでOKボタンとCancelボタンを追加します。

OK, Cancelボタンを追加

　インスタンスの生成alertControllerと、表示presentの間に以下のコードを挿入します。

ViewController

        let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default)
        alertController.addAction(okButton)

        let cancelButton = UIAlertAction(title: "cancel", style: UIAlertAction.Style.cancel, handler:nil)
        alertController.addAction(cancelButton)

　空行で分けた２つは殆ど同じ内容で、ボタンを定義しアクションを追加しています。

　UIAlertActionはアラート内でのアクションを定義します。title:はボタンに表示される内容、style:はスタイル、handlerはアクション後に実行する内容です。
　okButtonにはstyle:をUIAlertAction.Style.defaultで何らかの処理を行うボタンのスタイルを設定しています。
　一方cancelButtonはstyle:をUIAlertAction.Style.cancelとし、キャンセルボタンのアクションに設定しています。cancelにすると、何も変更されず操作をキャンセルするアクションとなります。
　cancelButtonにのみhandler:が設定されています。これはキャンセル後に実行する内容がないためnilにしています(現在のところokButtonも無いのですが、あとで追記します)。

　実行すると以下のようになります：

　cancelボタンとOKボタンが追加されました。どちらをクリックしても元の画面に戻れることを確認してください。

テキストエリアを追加

　アラート画面にテキストエリアを追加します。
　alertControllerと、okButtonの間にalertController.addTextFiledを追加してください。

ViewController

        let alertController = UIAlertController(title:"hoge", message:"fuga", preferredStyle: UIAlertController.Style.alert)

        alertController.addTextField()

        let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default)
        alertController.addAction(okButton)

　.addTextFiledでテキストエリアを追加できます。

　これを実行すると以下のようにテキストエリアが追加されます。

OKボタンでテキストを書き換える処理

　OKボタンにアクションを追加します。OKボタンをタップすると、テキストフィールドに書かれた文字列が、最初に用意したmyLabelに表示されるようにします。

　okButtonのUIAlertActionのインスタンス生成の部分を書き換えます。

ViewController

        let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) { (action: UIAlertAction) in
            if let textField = alertController.textFields?.first {
                self.myLabel.text = textField.text
                }
        }
        alertController.addAction(okButton)

　UIAlertAction()をUIAlertAction(){}の形式に書き換え、OKボタンをタップした時に{}内の処理が行われるようにしています。

ViewController

            if let textField = alertController.textFields?.first {
                }

　alertControllerのtextFiledを参照します。alertControllerにtextFieldsがあるか無いかを調べるためにtextFileds?とオプショナル型になっています。ある場合に{}のコードが実行されます。.firstとなっているのはtextFieldsがArray型のためです。

ViewController

                self.myLabel.text = textField.text

　myLabelにtextFiledの文字列を入れます。クロージャ内なのでmyLabelには明示的にselfをつける必要があります。

全コード

ViewController

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }


    @IBAction func myAlert(_ sender: Any) {
        let alertController = UIAlertController(title:"hoge", message:"fuga", preferredStyle: UIAlertController.Style.alert)

        alertController.addTextField()

        let okButton = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) { (action: UIAlertAction) in
            if let textField = alertController.textFields?.first {
                self.myLabel.text = textField.text
                }
        }
        alertController.addAction(okButton)

        let cancelButton = UIAlertAction(title: "cancel", style: UIAlertAction.Style.cancel, handler:nil)
        alertController.addAction(cancelButton)

        present(alertController, animated:true, completion: nil)
    }

}

完成

実行すると以下のように、OKボタンをタップするとテキストフィールドに入力した文字列で、Labelが置き換えられました。