2022年9月29日木曜日

作成済(レイアウト済み)アプリへのScrollView追加実装について

 アプリ配信後、現在の職場の方数名にアプリをダウンロードして、使ってもらったところ、とあるおじ様のiPhone8にて、レイアウト崩れを確認。

前回のアプデにて、レイアウト改善できた。・・・はずだった。

アプデしてもらうと・・・あら不思議!画面下部の登録ボタンだけ見切れて、肝心のデータ保存ができない!!

Labelなどのフォントサイズは指定して、同機種シミュレータで見切れないことも確認したのだが・・・・なぜだ!?というわけで、ScrollView実装に踏み切りました!実装自体は簡単ですが、レイアウト完成済ということもあり、めっちゃくちゃ苦労しました!


実装における問題点

  • ScrollViewを追加配置すると、作成していたViewより前に来るので配置換えが必須。
  • 上記解消のため、コンポーネントの配置換えをすると、オートレイアウトの制約が全て解除される!(ここが一番の問題点)
以上の問題が発生。特にオートレイアウトの制約解除はキッツイ・・・今までの苦労が水の泡に・・・。ってなるので、必死に試す、調べる、試す・・・を繰り返すこと数時間?やっと損害の少ない方法にたどり着いた!(多少は手直し必要です。ですが全部より断然マシです)


解決方法!(ここに至るまでが大変だった!)

  1. ScrollView及びその上にViewを配置、各種設定。(この手順はこちらのサイト参照)
  2. レイアウトを崩さずに、ScrollViewに乗せたい(スクロールしたい)コンポーネントを全選択する。
  3. Xcodeのメニューにある、Editor>Embed in>View を選択すると、選択したコンポーネントが一つのViewコンポーネントに格納される。
  4. このViewコンポーネントを、手順1で配置したScrollView上のViewに格納
  5. そうすると、一部エラーが出て、制約の手直しが必要になるものの、大まかなレイアウトは崩れずにScrollView上に配置できる。制約の手直しも、ほぼオートで大丈夫。(自分の場合)

以上!


flutterについて、学んだことなど

Swiftについて学んできたため、つい比較してしまいがちです。 SwiftUIと比較して、書いてみました。 似ているようで似ていない flutterには、SwiftUIにおける「View」という概念が、「Widget」と呼ばれるものになる SwiftUIのようにWidgetの中に...