【Swift】Size Classの使い方。画面サイズごとに部品やレイアウトを変更する。(Swift 2.1、XCode 7.2)
Size Classとは
本記事ではSize Class（以下、サイズクラス）について説明する。
サイズクラスとは、画面端のサイズをCompactまたはRegularで表現し、縦横の組み合わせごとに、表示する部品やレイアウトを変更できる機能である。
例えば、縦向きのiPhoneのサイズは縦がRegular、横がCompactになる。それを横向きにしたらどうなるか。普通に考えると横がRegular、縦がCompactになりそうだが、実際は縦横両方がCompactになる。不思議な話だが覚えておこう。
ただし、「iPhone6 Plus」と「6s Plus」は横がRegularになる（2016年6月現在）。
一方、iPadは画面の向きが縦方向でも横方向でもすべてRegularになる。
そして、Regular、Compactのどちらも許容するサイズをAnyという。
このRegular、Compact、Anyの組み合わせパターンは下図の9種類（＝3種類×3種類）になり、パターンごとに表示する部品やレイアウトを設定できるということだ。
例えば、iPhoneの横画面のレイアウトを設計したいときは「幅 Compact × 高さ Compact」を選択し、iPad画面のレイアウトを設計したいときは「幅 Regular × 高さ Regular」を選択することになる。
サイズクラスの設定を確認する
サイズクラスを使うには、ストーリーボードを開いた状態で下図赤枠のファイルインスペクタボタンを押して設定画面を表示し、Use Size Classesにチェックを入れる。ただし、プロジェクトを作ったときに最初からチェックが入っているので、設定を変更しなくても最初からサイズクラスを利用できる。
Use Size Classesにチェックが入っていると画面下部（紫枠）に「wAny hAny」のような文字列が表示される。これが上記で説明した組み合わせパターンの1つで、下図の場合は「幅 Any × 高さ Any」、要するに全サイズ共通のレイアウトを設計していることになる。
画面サイズによって表示する部品を変える
下図紫枠をクリックすると吹き出しの設定画面が表示され、9種類の組み合わせパターンからどれを設定するかを選択する。
では、下図のように「幅 Regular × 高さ Compact」を選択し、iPhone6s Plusの横画面のみに表示される部品を配置してみよう。
なお、マウスカーソルを合わせたときの青い四角がめっちゃ横長になるが、これは超横長の画面ということではないので安心してほしい。
ラベルをデバイス画面に配置する（下図赤矢印）。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Titleに「明日は晴れ」、Colorを青、フォントサイズを「100」に設定する。
このラベルは「幅 Regular × 高さ Compact」の画面のみに表示される部品になる。
次に縦画面のみに表示される部品を配置する。
下図赤枠のサイズクラス表示部をクリックして吹き出しの設定画面を表示し、「幅 Compact × 高さ Regular」の四角を選択する。
ラベルをデバイス画面に配置する（下図赤矢印）。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Titleに「今日は雨」、Colorを緑、フォントサイズを「80」に設定する。
このラベルは「幅 Compact × 高さ Regular」の画面のみに表示される部品になる。
横画面が「幅 Regular × 高さ Compact」の端末といえばiPhone6S Plusなので、iPhone6S Plusのシミュレーターを起動する。
以下が実際のプレイ動画。縦画面と横画面で別々のラベルが表示された。
縦と横で部品のレイアウトを変更する
同じ部品を縦横どちらの画面でも表示したいが、レイアウトを縦横で変えたいときがある。やってみよう。
下図赤枠のサイズクラス表示部をクリックして吹き出しの設定画面を表示し、「幅 Any × 高さ Any」の四角を選択する。
デバイス画面にラベルを配置する（下図青矢印）。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Titleに「天気情報」、Colorを赤、フォントサイズを80に設定する。
このラベルはすべての画面に共通して表示される部品になる。
下図青枠のサイズクラス表示部をクリックして吹き出しの設定画面を表示し、「幅 Regular × 高さ Compact」の四角を選択する。
全画面共通のサイズクラスで配置したラベルなので、デバイス画面が横方向に切り替わっても「天気情報」のラベルは表示される。
天気情報のラベルを選択したあと下図黄枠のPinボタンを押して吹き出しの設定画面を表示し、上と右の位置の制約（黄緑枠）に「0」を入力する。WidthとHeightにチェックを入れて、「Add 4 Constraints」ボタンを押す。
これで横画面にしたときに「天気情報」のラベルは画面右上に表示されるようになった。
下図黄緑枠のサイズクラス表示部をクリックして吹き出しの設定画面を表示し、「幅 Compact × 高さ Regular」の四角を選択する。
デバイス画面が縦方向に切り替わっても「天気情報」のラベルは表示されている。
天気情報のラベルを選択したあと下図紫枠のPinボタンを押して吹き出しの設定画面を表示し、右と下の位置の制約（黄緑枠）に「0」を入力する。WidthとHeightにチェックを入れて、「Add 4 Constraints」ボタンを押す。
これで縦画面にしたときに「天気情報」のラベルは画面右下に表示されるようになった。
以下は実際のプレイ動画
なお、画面表示を確認するときはシミュレーターを起動するのではなく、プレイビュー機能を使うことをお勧めする。⇒「プレビュー機能とは」