【Swift】UITextFiledの使い方、キーボード表示、閉じるDelegate

ども。
プログラミングスクールのテックキャンプに通いながらSwiftを学習しています。今日はUITextFieldについて理解した部分をまとめていきます。また自分なりのリファレンスの解釈と使い方も備忘録としています。

Interface BuilderでのTextFieldの使い方と、プログラムソース上での書き方をあわせて記述していきます。

TextFieldを置いてOutlet接続する

Xcodeでプロジェクトを開いたらMain.storyboardを開き、Interface Builderの右下、オブジェクトライブラリーからText Fieldを検索して出てくるので、それをドラッグして配置します。

配置したら場所とサイズの制約を付与しておきます。数値は適当でよく今回は画面上部に幅一杯で表示しました。

この時点でシミュレーターを起動するとこのような感じです。

TextFieldをソースコードと関連付けするためにOutlet接続をしておきます。

関連付けに成功するとソースコードがこのようになります。

ということで、ここからいろいろといじっていきます。

UITextFieldのプロパティを調べた

UITextFieldにはいくつかのプロパティがあり、これを設定することで文字サイズを指定したり、色を変えたりといったことが出来るようになります。

ソースコード上のUITextFieldにマウスカーソルを合わせてcommandを押しながらクリックすると、定義部分が見れます。

現時点で不明点もあるのでわかる所だけ簡単な説明を入れています。これらはソースコード上で設定できますが、Interface Builder上で設定できるプロパティもあります。

・text テキストフィールドに表示させる文字列
・attributedText テキストフィールドに表示させる属性付きテキスト
・textColor テキストの色
・font テキストのフォント
・textAlignment テキストを整列
・borderStyle テキストフィールドの境界線のタイプ
・defaultTextAttributes デフォルトの属性
・placeholder もともと表示させておく文字列
・attributedPlaceholder もともと表示させておく属性付き文字
・clearButtonMode クリアボタン
・keyboardType キーボードのタイプ
・returnKeyType リターンキーのタイプ
・clearsOnBeginEditing
・adjustsFontSizeToFitWidth
・minimumFontSize
・delegate デリゲート
・background
・disabledBackground
・isEditing
・allowsEditingTextAttributes
・typingAttributes
・clearButtonMode
・leftView
・leftViewMode
・rightView
・rightViewMode
・inputView
・inputAccessoryView
・clearsOnInsertion

UITextFieldのよく使うプロパティについて使い方を説明しておきます。

Interface Builder上で設定できる項目たち

ソースコード上で設定できるTextFieldのプロパティたち

textプロパティ:テキストフィールドに表示させる文字

テキストフィールドに最初から入力しておく文字列を指定する。

textColorプロパティ:テキストフィールドの文字色

テキストフィールドに表示させる文字の色を指定できます。以下のようにUIColorクラスにある色を使えます。

fontプロパティ:テキストのフォントに関する設定

fontプロパティにUIFontクラスの初期値を与えて指定できます。

どんなフォントが使えるかはこちらの記事で調べることができます。
iOSのフォントの種類を確認する(コピペ用)

textAlignmentプロパティ:テキストの整列

テキストフィールド内に表示させる文字列の場所を指定できます。

使い方は以下のようになります。textAlignmentプロパティにright / center / leftのいずれかを指定します。

borderStyleプロパティ:テキストフィールドの境界線のタイプ

境界線は次の3種類と、境界線なし(none)があります。roundedRectが見栄えがいい気がしますね。

placeholderプロパティ:テキストフィールドにもともと表示させておくグレーの文字

placeholderプロパティでもともと表示させておく文字を設定できます。これによりテキストフィールドにどういった内容を記入してほしいか、などの事例を見せたり‥といった使い方がいいかもしれません。

clearButtonModeプロパティ:クリアボタンの設定

クリアボタンはいわば消去ボタンです。テキストフィールド内の文字列をワンボタンで消すことができます。

clearButtonModeプロパティに以下の値を設定します。

keyboardTypeプロパティ:キーボードのタイプ

TextFieldをタップしたときに、文字入力パッド(キーボード)が自動的に表示されますが、その時のキーボードのスタイルを指定できます。

Attributes Inspectorでも設定できます。

URLはURLを入力しやすいし、phonePadは電話番号の入力に最適です。またemailAddressはメールの入力がしやすいですね。

ソースコードでは以下のように実装します。

実際に現れるキーボードのタイプは以下のようになります。

これら以外にも値があります。

asciiCapable、asciiCapableNumberPad、numbersAndPunctuation、phonePad、default、numberPad、webSearch、decimalPad、namePhonePad

ちなみに●ボタン長押しから日本語を選べば、日本語キーパッドが出ます。

returnKeyTypeプロパティ:リターンキーのタイプ

こちらはキーボードの右下に出てくるリターンキーに何を表示させるかを指定できます。

Attributes Inspectorでも設定できます。

ソースコードの方で指定するには以下のように記述します。

よく使いそうなのは以下の3つでしょうか。

キーボードの右下に現れる青色のリターンキーのタイプをご覧ください。

UIReturnKeyTypeには他にも指定できるスタイルがあります。

continue → 続ける
go → 開く
search → 検索
default → 改行
join → 接続
next → 次へ
emergencyCall → 緊急電話

TextFieldのキーボードが表示されないことがある

何故かわかりませんがXcodeのシミュレーターを起動して、TextFieldをタップしてもキーボードが下から出てこない場合があります。
Xcode画面上部メニューから以下のようにたどればOK

Hardware→Keyboard→Connect Hardware Keyboardでチェックを入れる

これでもキーボードが出ない場合はさらに以下のように

Hardware→Keyboard→Toggle Software Keyboardにチェックを入れる

これでキーボードが出ます。左下の●ボタン長押しから日本語切り替えもできます。

TextFieldのキーボードを閉じるDelegate

UITextField単体ではキーボードの表示までは出来るけど、フォーカスを変えた時とか、リターンキーを押した時にキーボードを閉じることができない。

これを閉じるようにするためにDelegate(デリゲート)という仕組みがiOSに用意されています。

デリゲートというのはオブジェクトの状態を監視してなにか変化が起こった時に通知されるメソッドが用意されていて、その中で任意の処理を行うことができます。

テキストフィールドのdelegateプロパティに、ViewControllerを登録しておくと、フォーカスが外れるイベントが発生したときにViewController側に通知がいきます。これをもってViewControllerにメソッドを用意しておくことでキーボードを閉じる、という処理ができるようになります。

デリゲートを使えるようにするためには処理を実装するクラス(このばあいはUIViewController)の宣言部分に、デリゲートを宣言する。

クラス名の後にコンマをつけて、プロトコル名Delegate と記述します。

そして

TextFieldのdelegateプロパティにself(UIViewController)を指定します。

余談だがUITextFieldDelegateを見てみるとどんなメソッドがあるのかわかる。

この中からリターンキーがー押された時に呼び出されるメソッドがtextFieldShouldReturnです。

このリターンが押されたときに発生するメソッドが用意されているので、それを上書きするようにして使えばよく、ここにリターンが押されたときの処理を記述します。このメソッドはUIViewController内に記述します。これでTextFieldの状態の変化を監視して処理をさせることができます。

resignFirstResponder()メソッドでキーボードを閉じるという処理になります。

キーボードを閉じる処理は他にもやり方があります。

ViewControllerのプロパティであるview(UIView)のメソッドendEditingを使うことで閉じることもできる。

全体的なソースコード

最後に試験的に書いたソースコードの全文を貼り付けます。