SizeClassesの基本

SizeClassesは簡単に言えば、解像度や縦横比がいろいろ違うiPhone、iPadなどのデバイスの画面レイアウトを、一つのStoryboardで扱えるようにしようというもの。

Xcode6から導入された…んだよな、たしか？

WYSIWYGだったそれまでのStoryboardと違い、iOSのプレビュー画面を見ながらレイアウトしていく必要があり、ちょっととっつきにくいと思う。

（ちなみにプレビュー表示は確実じゃないこともあるようなので、最後はちゃんとシミュレーターか実機で確認した方がいい）

Xcodeのプレビュー画面表示（右側）

AutoLayoutは併用必須なので、そっちは覚えること。

んで基本は、

「全部の画面サイズで“一応表示できる”ものを作って、その後細かな画面サイズ向けに直す」

ということ。

「iPhoneでは画面が狭いから表示できないボタンを、iPadでだけ表示させる」なんてこともできるし、ポートレイト表示とランドスケープ表示で大きくレイアウトを変えるなんてこともできる。

画面下の表示が「wAny hAny」になってれば、全部のデバイス向けのレイアウト画面。

「Base Values、For all layouts」と書いてあるとおり、ここで全デバイス共通のレイアウトをする。

どう考えても縦長（ポートレイト表示）か横長（ランドスケープ表示）のiOSデバイスであるが、前述のとおりなぜかレイアウト画面は正方形。イラっとするけど我慢。

（追記：レイアウト画面をそれぞれのデバイスの大きさにする方法がわかった！　一番最後に書いたよ）

この「wAny hAny」の画面がすべての基本になるので、ここに配置したUI部品が全てのSizeClassに表示される。

とりあえずレイアウトができたら（AutoLayoutはそんな簡単じゃないんだけどさ）、今度は下のwAny hAnyの部分をクリックして出た水色の四角を以下のようにwCompact hAnyとかにする。（ポートレイト表示の場合）

今度はiPhoneっぽい縦長の画面になる。

ここにもやはりBase Values、そして3.5-inch, 4-inchi and 4.7-inch iPhonesとかなんとか書いてあるとおり、iPhoneできれいに表示されるように調整する。

ここで調整したレイアウトは、この画面に対応したSizeClass（3.5〜4.7インチのiPhone）でのみ有効になり、他のSizeClass（iPadやAppleWatchなど）には影響がないし、「wAny hAny」画面に戻れば「wAny hAny」画面は変更されていないのがわかる。

縦長のくせにランドスケープ表示も対応してるらしいのがよくわかんないけど、さらっと無視。

同様にiPad用にwAny hRegularとか、Base ValuesになってるSizeClassで、望んだレイアウトで表示されるように調整する。

wAny hRegularだとiPhoneのポートレイトとiPadのポートレイト、ランドスケープ全てに共通するSizeClassのようなので、iPhoneとiPadで完全に分けるなら、iPadは直接Final Valuesと書かれたwRegular hRegularでやっちゃったほうがいいのかもしんない。

レイアウト画面ごとのconstraintsの設定は、constraintsを選んだ状態で画面右のここ↓でも確認、変更することができる。
Constantの値54がwAny hAnyで設定した共通の値。それをwCompact hAnyでは0にしてるということね。
一番下にあるwC hAny ✔️InstalledはwCompact hAnyの設定でこの値が有効になってるということ。
その上の何も書いてないとこのInstalledのチェックが外れてるのは、wAny hAnyの画面で有効にしてないっつーことですな。wAny hAny画面に戻ってもさっきのConstantの54が適用されてないよと。（別のやり方でAutoLayoutを設定してるんでこうなってる）

Labelなどのフォントサイズは、インスペクタのFont横の「＋」を押すことでRegularとかAnyとかの情報を追加できるので、SizeClassごとに変更することができる。

最初できないのかと思ってコード中で変えてたんだけど、やっぱりできたんだ。

まあだいたいこんなところ。

基本（Base）画面で設定して、デバイスと画面の向き（ポートレイトかランドスケープか）別に変更が必要なところだけ最終（Final）画面で調整するってわけだ。

iPadはいいけど、画面縦横比がそれぞれ異なるiPhoneでのレイアウト画面がざっくりとしか分かれてないのが気になる。

iPhone 4sとiPhone 6Plusで変更したい場合とかどうするのかな？　何か方法があるかもしれないので、各自調べること。まだわかんないことも多いし。

レイアウト画面を各デバイスの縦横比で表示する方法

ViewControllerを選んでからAttribute InspectorのSimulated MetricsのSize、Orientationを変更すればいい。

SizeClassのwAny hAnyだけでうまく表示されるように作ってない場合は、当然SizeClassも変更してやればいい。

これでいちいちプレビューを表示しなくても良くなる。

まあプレビューはプレビューで複数の画面サイズを一度に確認できるから便利だけどね。

それにしてもこんなんよほど調べなきゃわからんよなあ。英語の解説には書いてあるのかもしれないけど。