3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

テキストフィールドのキーボードを引っ込める

Posted at

みなさん、こんにちは。アプリ道場の蒲池です。

今回はテキストフィールドなどが入力状態になった時に表示される「キーボードを引っ込めるボタン」を追加する方法について、勉強したことを書いてみます。

テキストフィールドに入力する際に表示されるキーボードを引っ込めるタイミングは、

  • 他の画面(テキストフィールドの外)がタップされた時
  • キーボードにある「return」が押された時

などがありますが、Doneボタンを作ってキーボードに乗せて表示させておいて、入力が終わってそのDoneボタンを押したら、キーボードが引っ込む、そういうやり方が安定していて好きなのです。

キードードに初めから備わっていない「Doneボタン」を追加してやって、それを押した時に、引っこませようとするわけです。


ツールバー(ボタンビュー)部分を作成する

色は分かりやすくするためgreenColorにしましたが、実際は、lightGrayColorなどが良いと思います。

// Doneボタンの乗るボタンビュー buttonViewForKeyboard を作成します。

そのビューの位置・サイズは、frame: CGRectMake(0, 0, 320, 40)で設定すれば、乗せるキーボードの端から、この場合は、幅320高さ40です。

ボタンビュー作成
let buttonViewForKeyboard = UIView(frame: CGRectMake(0, 0, 320, 40))
buttonViewForKeyboard.backgroundColor = UIColor.greenColor()

Doneボタンを作成します。

「Done」の位置は、ビューの右側。幅80、高さ30です。

Doneボタンを作成
let myButton = UIButton(frame: CGRectMake((self.view.bounds.size.width
- 80), 5, 80, 30))
myButton.backgroundColor = UIColor.greenColor()
myButton.setTitle("Done", forState: UIControlState.Normal)

Doneボタンが押された時のメソッドを指定する

Doneボタンが押されたらonMyButtonのメソッドを呼び出す
myButton.addTarget(self, action: "onMyButton", forControlEvents:
UIControlEvents.TouchUpInside)

ボタンの乗ったボタンビューをKeyboardのビューに追加 add する

ボタンビューをaddする
buttonViewForKeyboard.addSubview(myButton)

ボタンの乗ったビューたる buttonViewForKeyboard をフィールドに設定

いくつTextFieldを作っても、全部、このようにbuttonViewForKeyboardを設定すれば良いようです。inputAccessoryView のおかげで、どのデバイスでもうまく収まるようです。

ボタンの乗ったビューをフィールドに設定
firstTextField.inputAccessoryView = buttonViewForKeyboard
secondTextField.inputAccessoryView = buttonViewForKeyboard
andSoOnTextField.inputAccessoryView = buttonViewForKeyboard

Doneボタンを押した時呼ばれるメソッド。

その名前が、onMyButton。

つまり、これが、キーボードを引っ込める命令。

キーボードを引っ込める
func onMyButton(){
self.view.endEditing(true)
}

僕のアプリはこの機能が頻繁に発生するので、定番化しています。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?