とがみんブログ
就活中、自己分析にハマり、心理学、脳科学の本を読み漁りつつ哲学チックなことをひたすら考えていました。このブログでは、そんなとがみんの考えや経験を綴っていきます。
swift

【Swift4】キーボード表示時、TextFieldが隠れないようにViewをスクロールする方法

どうも。とがみんです。

現在セブ島のNexSeedというプログラミングと英語を勉強できる学校で、エンジニア留学卒業後、ティーチングアシスタントとして、インターンをしています。

>エンジニア留学|NexSeed

今回は、ジェスチャー機能を用いて、UIImageViewのドラッグ機能を実装したので、紹介します。

今回作成するサンプルアプリ

以下が今回作成するアプリです。

TextFieldをタッチすると同時に、キーボードが表示されます。この時、キーボードにTextFieldが隠れないように、画面も一緒に動くようになっています。

このサンプルアプリの実装方法について紹介していきます。

スポンサードリンク

実装方法

キーボードが表示された時に、TextFieldの位置を移動する

キーボードが表示された時に、TextFieldの位置を移動させるためにする事は以下の2つです。

  1. スクロールビューの配置
  2. キーボードが表示される時にスクロールビューを動かし、閉じる時にスクロールビューを元に戻す処理

それぞれについて説明していきます。

スクロールビューの配置

スクロールビューのデータを入れるための変数をViewControllerクラスの中に宣言します。

そして、viewDidLoad()でインスタンス化します。

scrollViewのサイズ指定のため、デバイスの画面サイズを取得します。

scrollViewのサイズと位置を指定します。キーボード非表示時は、画面がスクロールされないようにするため、デバイスのサイズと同じサイズにしています。

このスクロールビューにTextFieldを乗せる処理を記述します。

次に、スクロールビューの中に入れるコンテンツの大きさを指定し、viewに追加します。キーボードが表示されていない時は、画面がスクロールされないようにするために、コンテンツのサイズは画面のサイズと同じに設定しています。

これで、TextFieldの乗った、スクロールViewが追加されます。ちなみに、heightを画面の高さ以上の大きさにすると、Viewをスクロールする事ができるようになります。

キーボードが表示される時にスクロールビューを動かす処理と閉じる際に戻す処理

viewWillAppear関数を追加し、以下のコードを記述します。

NotificationCenterはある動作があった時に、別の動作を実行させるような機能です。

このコードは、キーボードが表示される時に、keyboardWillShow(notification:)関数が呼び出され、

キーボードが閉じる時に、keyboardWillHide(notification:)が呼ばれます。

それらの関数を、記述します。

extensionを活用して、キーボードの処理をまとめていきます。

キーボードが呼ばれた時に、スクロールビューを少しずらし、閉じる時に、元に戻します。

参考サイト

>NotificationCenter基礎の基礎

>TextViewをキーボードに隠されず、高さが動的に変わるようにする

これで実行すると、キーボードが表示される時と、表示された後にスクロールビューが動き、TextFieldが隠れずにしっかり入力することができます。

GitHub

以下GitHubにサンプルコードをあげているので、参考にしながら実装してみてください。

>https://github.com/togamin/ScrollKeyboard.git

まとめ

キーボードが表示された時、TextFieldが隠れないようにする方法を実装しました。