Auto Layout Tips

USAMI KosukeFenrir Inc.

Auto Layout→ iOS / OS X でのビューのレイアウト手法

→ 制約を定義することでサイズや位置を自動計算→ 従来のフレームベースレイアウトと発想が異なる

UIKit デザインパターンと Auto Layout

→ UIScrollView と Auto Layout→ UITableView と Auto Layout

→ UICollectionView と Auto Layout→ これらの組み合わせは案外たいへん

UIScrollView & Auto Layout

うまくいかないパターン

→ UIScrollView の中身の View のサイズが Auto Layout で決まらない

→ contentSize をコードで設定する必要が出てくる→ 適切な contentSize をどう与えるか難しくなる

Content View→ まず UIScrollView の内側に Content View を作る→ UIScrollView と Content View との上下左右の各辺

に制約を定義する→ これで contentSize = Content View のサイズとな

る

うまくいくパターン

→ Content View のサイズを UIScrollView の 外側 にある要素から決まるようにする

→ 例えば次のような階層のとき→ (1) UIView - (2) UIScrollView - (3) Content View→ (3) のサイズが (1) から決まるようにする

→ （例えば、幅が等しいとか）

UIScrollView & Auto Layout→ これで Auto Layout だけで完結する

→ contentSize をコードで設定する必要がなくなる

UITableView & Auto Layout

UITableView→ UITableViewDelegate / UITableViewDataSource→ Cell の生成の前に、Cell の高さを返す必要がある

→ Cell の高さが固定であれば効率が良い設計

高さが固定でないとき

→ Cell の高さが固定でないときはあまり良くない→ 高さを知るために仮に Cell を生成する？

→ 特に Auto Layout とは相性が悪い

Self Sizing Cell (iOS 8)→ tableView:estimatedHeightForRowAtIndexPath: で

仮の高さを返す→ tableView:heightForRowAtIndexPath: で UITableViewAutomaticDimension を返す

→ これで Auto Layout で決まる高さが Cell の高さに

UITableView & Auto Layout→ これで Auto Layout だけで完結する→ 仮の Cell とか作らなくていい

注意 : Storyboard 上の設定→ Storyboard 上では UITableViewCell の高さ入力要→ Cell の高さと Content View の高さを整合させる→ Content View のレイアウトを組みながら、それにあわせて Cell の高さを調整・・・（正直だるい）

UICollectionView & Auto

Layout

UICollectionView→ 設計は UITableView を踏襲

→ UICollectionViewLayout で様々なレイアウト→ ここでは UICollectionViewFlowLayout を扱う

サイズが固定でないとき

→ やはり先に Cell のサイズを返す必要がある→ Auto Layout とは相性が悪い

Self Sizing Cell (iOS 8)→ estimatedItemSize に仮のサイズを返す

（UISizeZero 以外）→ itemSize は設定しなくて良い

→ これで Auto Layout のサイズが Cell サイズに

UICollectionView & Auto Layout→ これで Auto Layout だけで完結する→ 仮の Cell とか作らなくていい

Auto Layout上手に使おう