Storyboardで縦に長い画面を作る

調べるとStoryboardは2011年秋のiOS6と同時に登場したXcode4.2の新機能だったとか。まったくブランク時期で、Storyboardもまた初見です。その前のInterfaceBuilderにはまったく良い思い出がないのですが、このStoryboardは一転してXcode開発の印象が変わりました。置いたGUIパーツがそのまま実行時の配置そのままに表示されるのは従前どおりですが、細々と設定を行うことで動作アプリにより近づく見かけにできるレベルが、IDEに対する最低期待値をゆうに超えてきてくれているので実用になります。すなわち良いです。

Storyboardを使って同じような画面を作るにも様々方法があります。最終的にはコードで詳細にコントロールできるのでどうにでもなるのですが、書かなくて良いコードは書きたくないので、Storyboard上無理のない範囲でできるだけ組み立てておこうと思います。そうした中である一画面の作成において役に立ったのは以下のやり方でした。

• ConstraintsベースにAutolayoutを構築して画面サイズの違いとローテートを自動対応
• Table View-ContentをDynamic PrototypesとStatic Cellsを使い分ける
• View Controller-Simulated SizeをFreeformにして、高さを伸ばす

Autolayoutの勘所をつかむのに少々苦労しましたが、慣れるとほぼ直感的にコントロールを置けるようになりました。複雑な画面ではConstraintsを作り込むのに親Viewが大まかに分割されていたほうが設定しやすいため、普通にはUIViewをいくつかレイアウトしながらその子要素としてコントロール群を配置するかと思うのですけど、Static Cellに設定したTableViewはよく見るような縦に流れる作りの画面であればコードレスで柔軟な配置が可能のため今の私にはベストだと思います。Dynamic Prototypesだと各Cellの高さをコードでコントロールする必要があるのと、Cellに配置したコントロールのOutletの受け入れ先クラスを作らなければなりません。画面に動的な要素がない限りはStatic CellのほうがViewControllerクラスに各コントロールのOutletを直接受け入れられるので有利です。

画面が縦に長くなってきたときには、上記画像の右ペインに示される、Freeform設定で値を増やすとStoryboard上も伸びます。高さを倍の1,200に設定してみた状態です。