こんにちは。エクセルソフトの田淵です。
iOS の UIScrollView、ややこしいですよね。少しわかった気がしたのでブログに残しておこうと思います。
遅れましたが、Xamarin Advent Calendar 2019 2日目のエントリーです!
UIScrollView を使う際のポイント
- UIScrollView 内の View の Constraints の付け方に気を付ける。
です。
実際の作業
Scroll View とその中の View
普通に Scroll View 以外を配置します。今回は少し意地悪に画面一番下にも Label をおいてみます。
Scroll View を配置して、普通に Constraints を設定します。
Scroll View の中に View を配置します。
外側の Scroll View とぴったり同じにして、Super View との Constraints を上下左右に 0 で設定します。
View の下にある I (アイが横になったやつ)をドラッグして、View でドロップします。凸マークの下にあるやつなので注意してください。幅を SuperView と同じに設定する。という作業です。
最後に View の高さを任意の高さ(今回は 1,000)にして、
高さの Constraints を = 1,000
に設定します。
最終的に View の Constraints が以下の画像のようになっていれば OK です。
更にその中の 各 View
中にコンテンツを配置するのにやりづらいので、View Controller(View の下の枠)を選択して、Simulated Size を Fixed から Freedom
に変更して、高さを 1200
などと入力します。
以下のようになるので、中に必要なコンテンツを追加しましょう。
Scroll View も合わせて一時的に 1,000 などに設定しておきます。選択する際は Storyboard エディター上部のブレッドクラムを選択すると便利です。
Constraints は全て Super View(この場合は Scroll View 内の View)に対して設定されます。
最終的に以下のような感じになりました。
サンプルプロジェクト
以下にアップしておきました。
参考サイト
Xamarin の Storyboard エディターだと分かりづらいなって場合は、以下などを参考にして Xcode でやってしまうのも手ですねw
大変参考になりました。