【SwiftUI】(その3) ZStack構成のViewの配置で、ignoreSafeAreaとキーボード回避についてキーボード回避で避けた方が良いと思うUI

・問題のUI構成

UI構成として、TextFildが数多く並んだリストが上部で、最下部に、固定入力フィールドがある構成のUIはキーボード回避をした時に、おかしな挙動になるので、UIデザインを検討する際に避けた方が良いです。

例えば以下のようなコードの構成で、ScrollViewの画面下の方にあるTextFieldをタップすると、画面下部の固定のTextFieldも一緒にリストアップする。タップしたのが、 ScrollView中のTextFieldであるにも関わらず、他のTextFieldも、キーボードと一緒にリフトアップされる。この動作が人により違和感を感じることだろうと思います。これは、キーボードによりViewの下部が迫り上げられるため、本現象は発生します。

VStack {
 // 表示量が画面の高さをこめる量とする
  ScrollView
       ForEach { 
       TextField
     }
  }
  TextField
}

・代替案

固定のTextFieldを上部に配置して、その下部に、TextFieldを並べたScrollViewを配置した場合は、キーボード回避に違和感はなくなリます。
→そもそも、ScrollView内に、すべてTextFieldを配置してしまう場合もありでしょう。

・検討案

もし、どうしても上部にTextFieldを並べたScrollViewで、下部に固定のTextFieldにしたい場合は、以下の方法を検討してみてはいかがでしょうか。上部のScrollViewと下部の固定のTextFieldをキーボード回避を無効にして、キーボード出現時に、上部のScrollView内部のoffsetと下部の固定のTextFieldのOffsetをそれぞれタップされ、Focusがあたったときに、導き出す。この動作が可能な場合、それぞれでキーボード回避の挙動が実現できるのではないでしょうか。

このブログの人気の投稿

アプリアイコンの素材探し

【SwiftUI】グラスモーフィズムを試してみました

【SwiftUI】バグ報告について