Classは、使えば使うほどその便利さに気がつきます。Classを理解すべく、IBとアセットカタログのみを利用したサンプルを用意してみました。Classを使えば、画面のサイズ(デバイスの種類や向き)に応じた画面レイアウトを実現できるだけでなく、フォントサイズや画像も画面サイズごとに設定できます。Builder)上で簡単に実装できてしまいます。Class」に関連するクラスやプロトコルもいくつか追加されており、回転時の処理などにも変更が出ています。これらの内容を理解することも重要です。Class」という概念そのものを正しくとらえることが大切であり、概念が分かってしまえばそれをコードに応用することは難しくないはずです。Classでは、画面の幅(W)と高さ(H)を「Compact」と「Regular」という2つのグループに分けて表現します。Classは次のようになっています。Classになることに注意してください。Compactこのような分類はよく見かけますが、実はこれ、実装時にはあまり便利ではありません。Classでは、幅と高さという2通りのサイズを、CompactとRegularというこれまた2通りの定義で表現するため、その組み合わせは全部で4通りです。この「4通り」に主眼を置いて上の表を書き換えます。Classを必ず指定しなくてはならないわけではありません。「幅がCompactで高さは任意」といった表現も可能で、この場合、上の表の3番と4番が該当します。Classは、「全てのiPhoneのPortraitと、5.5インチ以外のiPhoneのLandscape」を指し示すことになります。6で新規プロジェクトを作成すると、Storyboardに含まれる画面が正方形になっています。hAny)と表現します)。Classコントロールがあり、クリックするとサイズを変更するための3x3のマス目が表示されます。このマス目は、1列(行)でCompact、2列(行)でAny、3列(行)でRegularを示します。hRegular)を意味し、上の表の3番に該当します。全iPhoneのPortraitはこのレイアウトになるということです。Classコントロールの下にも該当するデバイスが表示されますので、いちいち上の表を見なくても大丈夫です。Classを変更できます。hRegular)にしておいてもいいかもしれません。hRegular)を基準にして実装しても問題ないでしょう。Class依存の変更を施す方が、IBとの親和性が高いように感じています(ここは好みの問題もあるとは思いますが)。Classの使い方を説明します。Class対応)までスキップしてください。hAny)でレイアウトをしていきます。表示するのは、UIImageViewが2つ、UITextFieldが2つ、UILabelが2つです(世間はバレンタインですね)。デフォルトのレイアウトが少々気になると思いますが、ここは無視して先に進んでください。部品を配置したら制約(Constraint)を設定します。Guideまでの距離を8とします。Guideまでのマージンを28とします。親ビューの中心に合わせます。なんとなく、もう少し下に配置したくなると思いますが、このあとプレビューで確認しながら修正していくので、今はこのままでOKです。(AND)とY中心を合わせ、さらに左右のマージンを、左(コンテナマージン)0、右(UILabel)8とします。サンプルではさらに、UITextFieldの高さを50としていますが、これは必須ではありません。(Me)“You”のUITextFiledと左右対称で同等のことをします。(Line)までの距離を8とします。20.0′′としています。プレビューでレイアウトの確認アシスタントエディタ(画面右側)のPreviewでレイアウトを確認してみます。表示するデバイスは、Previewエディタ左下の「+」ボタンから追加できます。確認してみると、iPadでは問題ありませんが、iPhoneではPortrait、Landscape共に問題があることが分かりました。スクリーンショットは4インチのものですが、5.5インチでも程度の差こそあれやはり問題は残っています。レイアウトの方針を決めるデフォルトレイアウトのままではダメなことが分かったので、レイアウトの方針を決めます。(Cake)これはiPhoneの画面には大きすぎます。この画像はiPad専用とし、iPhoneではもう少し小さい画像を使いましょう(デコレーションケーキは諦めてカップケーキにします...)。画像の置き換えにはアセットカタログを使います。(Line)幅が狭いとはみ出してしまいます。この画像は幅が狭い画面(=Compact)のときには表示をやめてしまいましょう。(2015.02.14)iPhoneではバランスが取れていますが、iPadでは少々小さすぎるようです。フォントサイズを大きくしましょう。UITextField幅が狭いと窮屈です。高さが十分なのであれば、横並びに配置するのではなく、縦並びに配置することにします。幅が狭い=Compactで、かつ高さが十分=Regularのときにレイアウトの調整を行います。Classに対応させていきます。Classに応じてUIImageViewのコンテンツを変更するためには、アセットカタログ(images.xcassets)を使います。Inspectorを開きます。Width、Heightという欄があるので、ここで必要なサイズを追加できます。Compactを選びます。これで、4通りの画像が配置できるようになります。幅、高さのいずれかもしくは両方がCompactのときは、別の画像を表示します。アセットカタログ上では、「*」がAny、「-」がCompact、「+」がRegularを示しますので、該当箇所に画像を配置します(サンプルでは@2xしか配置していませんが、必要に応じて@1xや@3xも配置してください)。Storyboardに戻り、Previewを見てみます。いい感じになりました。Classに応じた画像を適用できるのでとても便利です。ちなみに、ここでは違いが分かりやすいように、デコレーションケーキの代わりにカップケーキを使いましたが、やり過ぎ(違い過ぎ)は禁物です。Classでは表示しない続いて一番下のライン画像です。幅がCompactのときは非表示とします。Classを使えばIB上で数クリックです。Inspectorを表示します。下に、「Installed」と書かれたチェックボックスがあります。これが、表示・非表示をコントロールするためのチェックボックスです。デフォルトでは「Installed(表示)」状態になっています。Height」を選びます。hAny”と書かれた欄が表示されたら、Installedのチェックボックスを外します。hAny)のときにはこのUIImageViewは表示されません。Installedではないビューは、hiddenプロパティがYESになるのではなく、ビュー階層から削除されます。hAny)とは、最初の表で「3」と「4」に該当する組み合わせです。全iPhoneのPortraitと、5.5インチ以外のiPhoneのLandscapeで、この画像が非表示となります。5.5インチのiPhoneでは、Portraitでは表示され、Landspaceでは表示されません。ここでは単独のビュー(UIImageView)の表示・非表示を切り替えましたが、サブビューを持つようなコンテナビューでも同様のことができます。hAny)のとき、一番下の画像をビュー階層から取り除いてしまったため、レイアウトが影響を受けたビューがあります。それが日付を記載したUILabelです。このUILabelは、下のUIImageViewまでのマージンを8としていたため、この画像がなくなると垂直方向の位置を決定する要素がなくなってしまいます。そのため、UILabelが一番上に来てしまっています。この問題に対処するために、UILabelに制約を追加します。hAny)のときのみ制約を追加します。hAny)のままで上の操作を行うと、ステップ1のところで制約に不整合が生じて警告が表示されます。ステップ3まで進めば不整合は解消されますので心配はいりません。hAny)に変更してから制約を追加することもできます。Classを変更してから制約を追加する例は、UITextFieldのレイアウト変更で解説しています。hRegular)のときのみ30.0に変更します。wRegular)は、iPadのPortraitとLandspaceに対応しますので、この設定で、iPadでは30.0ポイント、iPhoneでは20.0ポイントのフォントサイズが採用されることになります。InspectorのFont欄の左側にある「+」ボタンをクリックします。hRegular)を選択します。入力欄が表示されたら、フォントサイズを30.0にします。ここではフォントサイズを変更しましたが、フォントそのものの変更もできます。Classを利用して上手にカスタマイズしたいものです。UITextFieldのレイアウトを変更する最後は少々複雑です。Classに応じてビューの並びを横並びから縦並びに変更します。デフォルトでは、横並びのレイアウトになっているため、これを縦並びにします。hRegular)のときのみです。これは、全てのiPhoneのPortraitに該当します。hAny)としていないことに注意してください。幅のみに注目し、高さをAnyとしてしまうと、高さがより小さなiPhoneのLandscapeモードでも縦並びになってしまいます。hRegular)と、幅、高さともに指定することが重要です。hRegular)に変更してから作業します。hRegular)を選んでください。Classを切り替えるとXcodeがクラッシュすることが多い気がします)。不要な制約の削除からです。(You)から、以下の2つの制約を削除します。右側のUITextFieldからも、これと同等の2つの制約を削除します。Inspectorを表示したらInstalledの横の「+」ボタンをクリックします。Classが一番上に表示されるので、ここを選択します。チェックボックスが追加されたら、Installedのチェックをはずします。同様の作業を他の3つの制約に対しても行います。Classでのみ制約を削除するためのキーボードショートカットも用意されています。Classから削除されてしまうので注意してください)。続いて、YouのUITextFieldを少し上に、MeのUITextFieldを少し下にずらし、両サイドのレイアウトガイドまで引き伸ばします。(AND)までの上マージンを追加します。左右のマージンは0、上下のマージンは12とします。hRegular)のときのみInstalledになっていることが分かります。Classをあらかじめ変更してから作業したためです。Classでしか有効となりません。hAny)で作業していくことをお勧めします。これですべての修正が終わりました。プレビューで確認してみます。上から順番に4インチiPhoneのPortrait、Landscape、5.5インチiPhoneのLandscape、そして最後がiPadのPortraitです。iPadでは、PortraitでもUITextFieldが横並びになっていること、ケーキが元々のデコレーションケーキであることが確認できます。Classは便利です。今回、ここに挙げたすべての処理をアセットカタログとIBだけで完結させています。これまでだと、回転時や起動時に画面サイズを検出し、それに応じた処理をする必要がありました。複雑なレイアウトになると、デバイス回転時に画面遷移を行うことすらありました。Classの導入でコード量も一気に減り、とても分かりやすくなったと感じています。Layoutは好みではないとか、IBは嫌いだとか、そういう意見もときには聞きますが、個人的にはこれからの開発には全て必須だと思っています(あくまでも個人的な意見です)。今後また新たなサイズのデバイスが発売されても平静を保てるよう、今のうちから対応しておきたいものです。今回、サンプルで使った美味しそうなケーキのイラストはこちらからいただきました。ありがとうございました。http://girlysozai.comサンプルプロジェクトはGitHubにあります。Swiftですがコードは変更していません。7ベース、Objective-Cです)。