AutoLayoutを使ってレイアウト設計をちゃんとすればデバイスサイズが違おうが、横に向けようがまぁまぁマトモな見た目になってくれます。
けれどレイアウトによっては横向きにした場合にあまりにもレイアウトが崩れてしまう場合、Landscapeを非対応にするとかそんな消極的なやり方をチョイスせず、どの向きでもベストな使い勝手を提供すべきでしょ、となった場合の手順。
サイズクラスという考え方
サイズクラスというのはInterfaceBuilderにおけるこちらです。
初期状態では「wAny hAny」となっていますがこれは全てのサイズに対応するデフォルトとしてのレイアウトを意味します。
この状態でうまく制約を設定してやればデバイスサイズや向きに関わらず、少なくともコントロール間の位置関係は維持してくれます。
この「wAny hAny」をクリックするとでてくる吹き出し内の枠をドラッグしてやると「Compact Width」とか「Regular Height」と表示されます。これが各デバイスサイズや向きに対応したサイズクラスで実機との対応関係は以下のようになります。
| デバイス/向き | 横サイズクラス | 縦サイズクラス |
|---|---|---|
| iPhone縦 | Compact | Regular |
| iPhone横 | Compact | Compact |
| iPhone6Plus横 | Regular | Compact |
| iPad縦 | Regular | Regular |
| iPad横 | Regular | Regular |
6Plus以外のiPhoneはPortraitでは「CompactxRegular」なのにLandscapeでは「CompactxCompact」なので注意。
とりあえず実験用として「wAny hAny」でラベルを３つ配置してみます。
サンプルとして分かりやすいレイアウトにしてみました。
それぞれ位置を固定できるようにAutoLayoutは設定済みです。
通常、ラベルに幅と高さは指定する必要はありませんが、ここでは縦書きにするためにLINE数を３〜4にした上で幅、高さも固定しています。シミュレータで動かしてみて横に向けるとこんな感じです。
ここで、6Plusの場合のみ横を向いたら横書きになるようにしてみます。
特定デバイスのレイアウトだけ変更する
まずサイズクラスを横向きのiPhone6Plusに当たる「wRegular hCompact」に変更します。
ラベルの文字を横書きにしたいので幅/高さを固定している制約を解除します。
アウトラインから各ラベルに設定しているwidthかheightの制約を１つ選択します。
そしてサイズインスペクターの一番下にいる「installed」の左側にある「+」をクリックします。
表示されるポップアップに現在表示中のサイズクラスである「Regular width | Compact height」という行があるので選択します。
すると先ほどまで「installed」とあった行の下に「wR hC installed」という行が追加されました。
この新たに追加された行にチェックが入っていると思いますが、これを外します。
こうすることで「Regular width | Compact heightの時はこの制約は有効ではない」という指定がなされたことになります。
同様の設定を各ラベルのwidth/height制約に対して行っていきます。
次に一番上のラベルを左に寄せるためにtrailingを、一番下のラベルを右に寄せるためにleadingを変更します。
それぞれの制約を選択して「wR hC」のサイズクラスを追加してチェックを外します。
次に各ラベルを適切な位置に移動して一番上のラベルにはLeading制約、一番下のラベルにはTrailing制約を追加します。
アウトラインはこんな感じになります。
色が薄くなっている箇所は現在のサイズクラスでは無効になっている制約です。
これを6Plusで実行してみましょう。
Portrait時
Landscape時
課題
このサンプルプログラムですが、上下逆さまにすると横向き扱いです。
ソースコード（と言ってもStoryboardしか触ってませんが）はこちらに置いているので興味ある方は直してみてください。
ちなみに私は直し方が分かりません。。