Storyboard のみで Auto Layout な UIScrollView を動かす w/ Xcode 11

#xcode11 #uiscrollview #storyboard #ios

macOS Mojave 10.14
Xcode 11.3

Xcode 11 の Storyboard で UIScrollView を追加したが単純に追加しただけではエラーが発生しスクロールも行えなかったため原因を調査した。

TL;DR

UIScrollView にスクロールサイズを教えるため、子要素に Align とは別に width, height の制約を追加する必要がある。

UIScrollView 追加方法

UIScrollView を追加し、好みの場所へ設置する。

この段階ではスクロール対象のサイズが不明なため Scrollable Content Size Ambiguity: Has ambiguous scrollable content width (height) と警告が出される。

UIScrollView に View を追加。スクロール対象要素をまとめるコンテナとして使う。今回は Container と名前をつけた。

Container のサイズを調整する。この際対象が必ず Super View (Scroll View), もしくは Content Layout Guide になっているか確認する。 Frame Layout Guide になっていると前述のエラーは解消しない。

Scroll View へサイズを伝えるため Container の height, width の制約を追加する。サイズを伝える以外に特に意味はないので優先度は 250 (Low) に設定しておく。

ここまでで一旦スクロールは動作するようになるが、スクロールサイズを Scroll View と同じに設定してしまっているためバウンス分しかスクロールできない。

スクロール確認用に適当な大きさの UIImage を追加して Container の width 制約を2画面分くらい (今回は 818) 設定。実行すると右までスクロールできる事が確認できる。

スクロール方向の制限をする

今回の画面では横方向にスクロールしたいだけであって縦方向に反応するのは単純に邪魔なだけなので特定の方向には反応しないように制限を入れる。

縦方向のスクロールを制限したいので、まず Container の height の制約を削除する。そしてヒエラルキーの Container を選択し、⌃ キー + ドラッグで Scroll View に持っていく。制約のメニューが表示されるので、Equal Heights を設定する。
この設定により Scroll View のスクロール領域の高さは Scroll View と同じ、つまりスクロールの必要がない。という事が伝わりバウンスも含めて縦方向にはスクロールしなくなる。