ども。
プログラミングスクールのテックキャンプに通いながら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プロパティ：テキストフィールドに表示させる文字
テキストフィールドに最初から入力しておく文字列を指定する。
//使い方の例 myTextField1.text = "テキストフィールドの文字"
textColorプロパティ：テキストフィールドの文字色
テキストフィールドに表示させる文字の色を指定できます。以下のようにUIColorクラスにある色を使えます。
//使用例 myTextField1.textColor = UIColor.blue myTextField2.textColor = UIColor.red myTextField3.textColor = UIColor.cyan myTextField4.textColor = UIColor.green
fontプロパティ：テキストのフォントに関する設定
fontプロパティにUIFontクラスの初期値を与えて指定できます。
どんなフォントが使えるかはこちらの記事で調べることができます。
→iOSのフォントの種類を確認する（コピペ用）
//使用例 myTextField1.font = UIFont(name: "HiraMinProN-W3", size: 30) myTextField2.font = UIFont(name: "HiraMaruProN-W4", size: 20)
textAlignmentプロパティ：テキストの整列
テキストフィールド内に表示させる文字列の場所を指定できます。
使い方は以下のようになります。textAlignmentプロパティにright / center / leftのいずれかを指定します。
myTextField1.textAlignment = NSTextAlignment.right myTextField2.textAlignment = NSTextAlignment.center myTextField4.textAlignment = NSTextAlignment.left
borderStyleプロパティ：テキストフィールドの境界線のタイプ
境界線は次の3種類と、境界線なし（none）があります。roundedRectが見栄えがいい気がしますね。
myTextField2.borderStyle = UITextBorderStyle.bezel myTextField3.borderStyle = UITextBorderStyle.line myTextField4.borderStyle = UITextBorderStyle.roundedRect
placeholderプロパティ：テキストフィールドにもともと表示させておくグレーの文字
placeholderプロパティでもともと表示させておく文字を設定できます。これによりテキストフィールドにどういった内容を記入してほしいか、などの事例を見せたり‥といった使い方がいいかもしれません。
myTextField1.placeholder = "男性、女性、回答せず"
clearButtonModeプロパティ：クリアボタンの設定
クリアボタンはいわば消去ボタンです。テキストフィールド内の文字列をワンボタンで消すことができます。
clearButtonModeプロパティに以下の値を設定します。
myTextField1.clearButtonMode = UITextFieldViewMode.whileEditing //編集時表示 myTextField2.clearButtonMode = UITextFieldViewMode.unlessEditing //編集時以外表示 myTextField3.clearButtonMode = UITextFieldViewMode.always //つねに表示 myTextField4.clearButtonMode = UITextFieldViewMode.never //つねに表示させない
keyboardTypeプロパティ：キーボードのタイプ
TextFieldをタップしたときに、文字入力パッド（キーボード）が自動的に表示されますが、その時のキーボードのスタイルを指定できます。
Attributes Inspectorでも設定できます。
URLはURLを入力しやすいし、phonePadは電話番号の入力に最適です。またemailAddressはメールの入力がしやすいですね。
ソースコードでは以下のように実装します。
myTextField2.keyboardType = UIKeyboardType.URL myTextField3.keyboardType = UIKeyboardType.phonePad myTextField4.keyboardType = UIKeyboardType.emailAddress
実際に現れるキーボードのタイプは以下のようになります。
これら以外にも値があります。
asciiCapable、asciiCapableNumberPad、numbersAndPunctuation、phonePad、default、numberPad、webSearch、decimalPad、namePhonePad
ちなみに●ボタン長押しから日本語を選べば、日本語キーパッドが出ます。
returnKeyTypeプロパティ：リターンキーのタイプ
こちらはキーボードの右下に出てくるリターンキーに何を表示させるかを指定できます。
Attributes Inspectorでも設定できます。
ソースコードの方で指定するには以下のように記述します。
よく使いそうなのは以下の3つでしょうか。
myTextField2.returnKeyType = UIReturnKeyType.google //検索ボタン myTextField3.returnKeyType = UIReturnKeyType.send //送信ボタン myTextField4.returnKeyType = UIReturnKeyType.done //完了ボタン
キーボードの右下に現れる青色のリターンキーのタイプをご覧ください。
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 と記述します。
class ViewController: UIViewController, UITextFieldDelegate {
そして
TextFieldのdelegateプロパティにself（UIViewController）を指定します。
class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var myTextField1: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
myTextField1.delegate = self
}
}
余談だがUITextFieldDelegateを見てみるとどんなメソッドがあるのかわかる。
public protocol UITextFieldDelegate : NSObjectProtocol {
textFieldShouldBeginEditing(_ textField: UITextField) -> Bool
textFieldDidBeginEditing(_ textField: UITextField)
textFieldShouldEndEditing(_ textField: UITextField) -> Bool
textFieldDidEndEditing(_ textField: UITextField)
textFieldDidEndEditing(_ textField: UITextField, reason: UITextFieldDidEndEditingReason)
textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool
textFieldShouldClear(_ textField: UITextField) -> Bool
textFieldShouldReturn(_ textField: UITextField) -> Bool
この中からリターンキーがー押された時に呼び出されるメソッドがtextFieldShouldReturnです。
このリターンが押されたときに発生するメソッドが用意されているので、それを上書きするようにして使えばよく、ここにリターンが押されたときの処理を記述します。このメソッドはUIViewController内に記述します。これでTextFieldの状態の変化を監視して処理をさせることができます。
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
resignFirstResponder()メソッドでキーボードを閉じるという処理になります。
キーボードを閉じる処理は他にもやり方があります。
ViewControllerのプロパティであるview(UIView）のメソッドendEditingを使うことで閉じることもできる。
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
self.view.endEditing(true)
return true
}
全体的なソースコード
最後に試験的に書いたソースコードの全文を貼り付けます。
import UIKit
class ViewController: UIViewController, UITextFieldDelegate {
@IBOutlet weak var myTextField1: UITextField!
@IBOutlet weak var myTextField2: UITextField!
@IBOutlet weak var myTextField3: UITextField!
@IBOutlet weak var myTextField4: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
myTextField1.text = "普通の右寄せ"
myTextField1.textColor = UIColor.blue
myTextField1.font = UIFont(name: "HiraMinProN-W3", size: 30)
myTextField1.textAlignment = NSTextAlignment.right
myTextField1.clearButtonMode = UITextFieldViewMode.whileEditing //編集時
myTextField1.returnKeyType = UIReturnKeyType.google //検索ボタン
myTextField2.text = "https://"
myTextField2.font = UIFont(name: "TimesNewRomanPS-ItalicMT", size: 30)
myTextField2.textAlignment = NSTextAlignment.left
myTextField2.borderStyle = UITextBorderStyle.bezel
myTextField2.clearButtonMode = UITextFieldViewMode.unlessEditing //編集時以外
myTextField2.keyboardType = UIKeyboardType.URL
myTextField3.placeholder = "電話番号を入力してください"
myTextField3.font = UIFont(name: "HiraMaruProN-W4", size: 20)
myTextField3.textAlignment = NSTextAlignment.center
myTextField3.borderStyle = UITextBorderStyle.line
myTextField3.clearButtonMode = UITextFieldViewMode.always //つねに
myTextField3.keyboardType = UIKeyboardType.phonePad
//myTextField3.returnKeyType = UIReturnKeyType.send //送信ボタン
myTextField4.placeholder = "メールアドレス入力用"
myTextField4.font = UIFont(name: "CourierNewPS-BoldMT", size: 30)
myTextField4.textAlignment = NSTextAlignment.left
myTextField4.borderStyle = UITextBorderStyle.roundedRect
myTextField4.keyboardType = UIKeyboardType.emailAddress
//myTextField4.returnKeyType = UIReturnKeyType.done //完了ボタン
//デリゲートをTextFieldに適用
myTextField1.delegate = self
myTextField2.delegate = self
myTextField3.delegate = self
myTextField4.delegate = self
}
//テキストフィールドでリターンが押されたときに通知され起動するメソッド
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
//textField.resignFirstResponder() ←↓どっちでもいい
self.view.endEditing(true)
return true
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
