Autolayoutでスクロールビューを簡単に実装してみる

iOS開発をしていて、
Autolayoutを使ってScrollviewを実装しようとした際、
エラーが消えずに少々苦戦しました。
スクロールビューの高さ・幅がわからない、というエラーです。
慣れれば難しくなくなってくるため、
今回、スクロール以外何もしない画面を作って実践してみたいと思います。
※Mac・XCodeの使い方はある程度分かっている前提で記載していきます。

① ViewController上にスクロールビューを置く(画像ではピンクの色をつけました)
② Pinにてスクロールビューの上下左右をピン留する

③ スクロールビューの上にスクロール範囲を決めるためのViewを乗せる
④ 乗せたView(子ビューとします)にもピン留をする(スクロールビューに対して上下左右距離が「0」になるよう設定する)

※ここでScroll Viewの制約が足りないというエラーが出ます。
そのエラーがあるため、子ビューへのピン留めが効きません。
Need constraints for: X position or width
Need constraints for: Y position or height

⑤ 子ビューの幅を指定する必要があるため、大元のView(スクロールビューの親View)とEqual widthsという制約をつける
⑥ 子ビューの高さを指定するため、子ビューの上に必要なオブジェクトを乗せてAutolayout制約をつける。
例では、中にボタンが縦に並んだだけのStackViewを子ビューの上に乗せました。
その上で、そのStackViewに上下100の位置で子ビューに対して制約をつけています。
また、位置も真ん中になるようhorizontally in containerという制約をつけています。

※子ビューは、わかりやすいよう緑色にしてあります。
※子ビューに乗せているオブジェクトの高さによって、子ビューの高さが決まります。

⑦ スクロールができるようになるくらいまで、子ビューの高さが大きくなるようオブジェクトを配置していく
※例ではStackViewにボタンをどんどん詰め込みました。

⑧ 完成!です。エラーも消えています。
5

簡単にまとめますと、
重要なのは⑤⑥のスクロールビューの上に乗せた子ビューへの制約です。
スクロールビューがスクロールできる範囲は、上に乗っている子ビューの大きさで決まります(④で子ビューにはスクロールビューに対してのピン留の制約をつけているため)。
スクロールビューがスクロールできる範囲が不明のままですと、Autolayoutエラーが消えません。

以上、意味のない簡単な画面を作りましたが、スクロールビューをAutolayoutで実装する際の参考になれば幸いです。
6a42236a47828190a6d5a99f0beed716_s

ホームページ http://www.ois-yokohama.co.jp

facebook   https://www.facebook.com/orientalinformationservice/