【Swift】キーボードと一緒にViewも上げる方法

TextFieldを編集する際にキーボードが下から出てきて入力欄を隠してしまう事があります。この記事ではキーボードの出現とともにView自体の位置をキーボードの高さ分上げる方法を書いていきます。

少しピンと来ないかもしれないので、完成図も一緒に添えておきます。

1.準備

Storyboardの準備です。(と言ってもUITextFieldが一つあるだけですが)

 

TextFieldに入力する際にキーボードが覆いかぶるように画面下部にUITextFieldを設置します。

 

2.キーボードや予測変換部分の出現を検知

キーボードの出現の検知にはUIResponderの「keyboardWillChangeFrameNotification」を使います。

 

他にもキーボードの出現を知らせてくれるUIResponderの一種で「keyboardWillShowNotification」というのがあります。

 

直感的にこちらの方が正しいように思えますが、「keyboardWillShowNotification」ですと予測変換部分が表示された際には反応しないので、TextFieldが予測変換部分に隠れる場合があります。

 

ViewControllerに以下を追加します。

 

キーボードのframeに変化がある際にkeyboardWillShow function が呼ばれます。

さらには、if分岐で

viewのy座標が0(初期位置)の場合:

キーボードの高さ分viewを上に移動する。

 

viewのy座標が初期位置では無い場合:

これはキーボードは既に表示されているが、予測変換部分がまだ表示されていないケースです。つまり、view.frame.origin.yは0からキーボードの高さ分引いた値になります。

let suggestionHeight = self.view.frame.origin.y + keyboardSize.height
self.view.frame.origin.y -= suggestionHeight

ですので、予測変換部分の高さは新しく検知されたキーボードの高さ足す
view.frame.origin.yになります。

あとは割り出した予測変換部分の高さをview.frame.origin.yから引いてviewの位置を調整します。

 

3.キーボードが隠れた際にViewの位置も戻す

入力が終わったらキーボードを閉まって、Viewも元に位置に戻す必要があります。

 

ViewControllerに以下を追加します。

 

 

TextFieldのdelegateをViewControllerに渡して、「Return」が押された際に呼び出されるtextFieldShouldReturn functionから、TextFieldの編集を終了します。

 

これで「Return」が押されると同時にキーボードが隠れます。そしてUIResponderの「keyboardWillHideNotification」が呼び出されます。

 

keyboardWillHideNotificationを引き金として、keyboardWillHide functionが発火されます。

 

中身はシンプルでview.frame.origin.yが0(初期位置)じゃ無い場合は0に戻すようになっています。

 

最終的に、ViewControllerは以下のようになっています。

 

以上、キーボードと一緒にViewも上げる方法でした。

 

おまけ:タップでキーボードを隠す

画面のどこかをタップしたらキーボードが隠れるようにします。

 

ViewControllernい以下を追加します。

 

最終的にViewControllerは以下のようになっています。

 

参考URL