UIScrollViewのAutoLayoutをStoryboardのみで設定
Oct 23, 2016 · iosswift3
Storyboard上だけでUIScrollViewのAutoLayoutを完結させる方法。
中のUIを動的に追加や削除しないのであればコードを書く必要もないし、
UILabelのようにコンテンツに応じて動的に高さが変わるようなものにも対応可能
ポイントはContainerViewを利用してScrollViewを別のViewControllerに持っていくこと
手順
サンプルとしてViewControllerの全画面に縦スクロールするScrollViewを配置する例を考える
1. ViewControllerのScrollViewを置きたい場所にContainerViewを置き制約を設定する
（サンプル）全画面にしたいのでViewに対して0で設定
Layout Guideに対して制約を設定するとステータスバーなどに合わせて位置が変わる
2. 1で追加した子ViewControllerをアウトライン上で選択し、ViewControllerのサイズをFreeformへ変更する
変更するとHeightの部分が変更できるようになるので、
ContentSizeの高さがあらかじめ決まっているのであれば同じに、
そうでないなら余裕を持った数字に変えておく
サイズを変更しなくても組めるが変更した方がスクロールせずに作業が行えるので楽
3. 1で追加した子ViewControllerのViewにScrollViewを追加し任意の制約を設定する
（サンプル）全画面にしたいのでViewに対して今回も0で設定
4. 3で追加したScrollViewにViewを追加し制約を設定する
（サンプル）縦スクロールにしたいので制約は以下の通り
- 縦と横はそれぞれ親(Scrollview)に対して
0 - 横幅は親(Scrollview)と同じ
ここで追加したViewがいわばContentViewとなる
5. 4のviewに各パーツを配置していく
この工程は普段通りのAutoLayoutの設定でOK。
UILabelの高さをコンテンツに応じて変えたいなら高さを設定せずにマージンだけを設定する
Scrollviewの中身の高さが固定でないならheightは設定しないこと
参考：Viewの階層
子ViewControllerのアウトライン
感想
AutoLayoutって使い方のコツを見つけるまでが大変だけど、このサンプルみたいにやり方を見つけてしまうと楽すぎ〜〜
開発環境
- OS X 10.12.0
- Xcode 8.0 / Swift3
- iOS 10.0.2