iOS swift ソフト開発 プログラミング

[Swift4]複数のTextFieldがキーボードに隠れて入力できない時の対策

更新日:

iOSアプリで、複数のTextFieldを持ったフォームを作る場面、よくありますよね。そんな時に、何も考えずにTextFieldを組んだらこうなっちゃったこと、ありませんか。

TextFieldがキーボードで隠れる

そう、TextFieldがキーボードで隠れるんすよ。Androidだと、入力部分を上にスライドさせてくれるんですが、iOSはそういう親切なあれはありません。なので、自分で実装して、やり方をまとめてみました。

Swift: 4.0.3
Xcode: 9.2
ソース:
https://github.com/yheihei/ios/tree/master/TextFieldScrolleAndClose



完成図

TextFieldを選択すると、画面がスクロールし、キーボードで隠れなくなる。どのTextFieldが選択されているかを見て、スクロール量を決めてスクロールしている。

TextFieldが選択されたら画面をスライドさせる

 

やり方

ルートをScrollViewにする

一番下はScrollView

AutoLayoutの設定は下記。SafeAreaいっぱいに。

ScrollViewのConstraint

 

ScrollViewの子にViewを置く

ViewをScrollViewの子に置いて、AutoLayoutの設定は、ScrollViewいっぱいに。

ScrollViewの下にView

ViewのConstraint

必ずEqual Widthと Equal HeightをSafeAreaと同じにしておく。(ここ重要

なぜかViewのEqual WidthとHeighをいじる図

 

TextFieldを下の方に配置

適当に下の方に配置する。

TextFieldを画面下部に配置

TextFieldのReturn Keyを「Done」にしておく。後ほど、コードの中でキーボードの「Done」が押されたらtextFieldShouldReturnイベントを受けてキーボードを閉じるため。

TextFieldのreturn keyを設定しておく

 

ソース全文と解説

TextFieldScrolleAndCloseViewController.swift

 

 

ポイント

  1. レイアウトはルートをScrollViewに、その下にViewを入れ、その下にようやくTextField。Constraintが直感的でなく、ハックっぽいので注意(なぜEqual WidthとかEqual Heightが必要なのか謎)
  2. UITextFieldDelegateを用いて、textFieldDidBeginEditingでどのTextFieldが選択されたかのイベントを受ける
  3. キーボードが開いた時に、keyboardWillBeShownが呼ばれる。2で取得したTextFieldのY座標を取得し、scrollViewをどのぐらいスクロールさせるか決める
  4. textFieldShouldReturnで「Done」が押されたのを検知し、resignFirstResponderでキーボードを閉じる
  5. キーボードを閉じたら、keyboardWillBeHiddenが呼ばれ、3でスクロールした量を元に戻す

やってみると簡単だけど、大変めんどくさいすね。Androidはこんなこと考えなくても良いのに。。。

ソース:
https://github.com/yheihei/ios/tree/master/TextFieldScrolleAndClose

 



 

-iOS, swift, ソフト開発, プログラミング

Copyright© バイラシー , 2018 All Rights Reserved.