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