UIScrollViewとAutolayout
画面の回転を考慮した, Autolayoutを利用したUIScrollViewの使い方
Autolayoutと, UIScrollviewを利用して, UITableViewと同じような画面を作成したかったときに, 画像の回転やConstraintの警告をなくすのにハマったので, その対応方法をまとめてみました. 実現したいことはUITableViewを使えばできることだとは思うのですが, 今回はUIScrollViewでの実現を目的としています.
サンプルアプリをもとに, 作成手順について以下に説明します.
サンプルアプリの画面構成
- UIViewの上に, UIScrollViewを配置
- UIScrollViewの中に, Frameとなる2つのUIView(以下, RedFrameView, BlueFrameViewとする)を設置
- RedFrameViewとBlueFrameViewにそれぞれにUILabelを配置
- RedFrameViewとBlueFrameViewはUILabelの長さに応じて, 高さ方向が可変
それぞれのViewのConstraintの設定
まず, UIScrollViewについては, 親のUIViewから上下左右に20のマージンを持つようConstraintを設定します. 次に, RedFrameViewの中のUILableについて以下の図のように, RedFrameViewから上下左右20のマージンを持つようConstraintを設定します.
BlueFrameView内の, UILabelについても同様に設定します.
次に, RedFrameViewのConstraintを設定します. まず, 以下の図のように, 親のUIScrollViewに対して, 左右と上方向のマージンが0となるよう設定します.
そして, UIScrollViewとRedFrameViewの両方を選択した状態で, それぞれの幅(width)が同様になるようConstraintを設定します. この設定を行うことで, 回転などによりUIScrollViewのwidthが変わった場合でも, UIRedViewのwidthが追従して変更されます.
最後に, BlueFrameViewのConstraintを設定します. まず, 親のUIScrollViewに対して, 左右, 下方向のマージンが0, RedFrameViewに対して, 上方向のマージンがある一定の感覚(今回は8)となるように設定します. このとき, 下方向のマージンは通常BlueFrameからUIScrollViewのBottomまでの長さが設定されていますが, 0と設定することで, Scrollが有効になります.
最後に, RedFrameViewの場合と同様に, BlueFrameViewについてもUIScrollViewとのwidthが同じになるようConstraintを設定します.
サンプルアプリの結果
以下の図のように, RedFrameView, BlueFrameViewがそれぞれUILabelの長さに応じて可変になっている様子がわかります.
(プログラムでUILabelに文字列を指定し, numberOfRowsを0と指定 )
また, 画面の回転によって, UIScrollViewの大きさが変更し, それに伴い, RedFrameView, BlueFrameViewのUIScrollViewのwidthの大きさに沿うように変更されます.
サンプルソース
今回作成したサンプルアプリのソースです.
