UITextFieldをストーリーボードで設置して入力した文字列を取得する

[UIKit] [Stroryboard] [UITextField]

※ 前提として「UIButtonをストーリーボードで配置して機能させる」で設置したボタンがある状態での手順となります。 ボタンの設置がまだの場合は上記を参照ください。

ストーリーボードでテキストフィールドを設置

Xcodeでストーリーボードをクリックして表示させます。 右上のあるパーツ追加の「+」ボタンを押して、テキストフィールドをストーリーボードにドラッグ&ドロップします。

/data/uploads/2020-04-22_17_08_03.png

テキストフィールドをソースコードと接続

次にテキストフィールドをコード内で使えるように、ストーリーボードとViewController.swiftのソースコードを接続します。 ストーリーボードに設置したTextFieldをControlを押しながらコード側にドラッグ&ドロップして、その際に表示されるダイアログの「Name」部分に「textField」と入力して「Connect」ボタンを押します。 ここではtextFieldとしていますが、Name=変数名なので、自身のプロジェクトではソースコードで使う変数として任意の名前を付けてください。

/data/uploads/2020-04-22_17_09_17.png

ソースコードの編集

ボタンをタッチした時に、テキストフィールドに入力した内容をデバッグコンソールに表示します。 touchButton1のメソッド内を以下のコードに修正します。

テキストフィールドに入力された文字列はtextField.text!で取得することができます。

@IBAction func touchButton1(_ sender: Any) {
  print(textField.text!)
}

アプリの実行

ここまで出来たら、Xcodeの「▷」を押してiPhoneシミュレーターでアプリを実行してみます。 起動できたら、テキストフィールドに文字を入力して「Button」を押します。

/data/uploads/20200422171716.png

デバッグコンソールに入力した文字列が出力されれば成功です。

/data/uploads/20200422171417.png

今回はテキストフィールドの設置と入力した文字列の取得についての解説でした。 もっと詳しい処理は「UItextField」カテゴリーより参照してください。

Posted_at:2020-04-22