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

 



 

おすすめWeb系転職記事

30代未経験からイケイケWeb系企業に転身できた理由 1

32歳でSIerを退職し、未経験からWebエンジニア兼Webデザイナーとして零細企業に転職。 転職から2年が経ち、札幌の …

中途未経験からWeb系企業に入る 2

僕は大手SIer勤務を経て、Web業界未経験から、転職2社目にして札幌のとあるイケイケWeb系企業への転職を成功させまし …

中途未経験から高収入Web系企業に入る 3

僕は大手SIer勤務を経て、Web業界未経験から転職2社目にして札幌のとあるイケイケWeb系企業への転職を成功させました …

未経験からTechAcademyでエンジニアになる 4

TechAcademyは様々なプログラミング言語が学べる、オンラインプログラミングスクールです。   僕は未経 …

ドットインストールでWebデザイナー 5

  ドットインストールはプログラミング動画講座サービスです。 ドットインストールを3行で説明 ソフト開発の言語 …

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

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