Xcode 6のサイズクラスの概要

みなさんこんにちは！ 今日は、サイズクラスなどについて簡単に紹介したいと思います。 最近Xcode 6で登場し、Appleからのドキュメントはほとんどありません。



それでは、サイズクラスとは何ですか？ 私たちは皆、iPhone 6が既に2つ（少なくとも）異なるディスプレイサイズ（4.7と5.5）で近づいていることを知っています。その後、開発者は、さらにiPadの拡張機能のためにUIレイアウトをさらに気にする必要があります。 その結果、サポートされているすべての画面の数は約7になります（Androidには少しこんにちは）。 今日のヒーロー-サイズクラス-は、この問題の解決に役立つように設計されています。



Xcode 6でテスト例を作成しましょう。SingleViewApplicationを選択し、デバイスをユニバーサルに設定します。







次に、Main.storyboardを選択し、[ファイルインスペクター]タブで、[サイズクラスを使用]の横にチェックマークを付けます（デフォルトで選択されていない場合）。







それでは、ストーリーボードに注目しましょう。これまで見てきた方法とはまったく異なります。







[サイズクラスの使用]が選択された後、ViewControllerはwAny hAny（任意の高さ、任意の幅）で指定された特定の抽象（ベース）サイズを採用しました。



ちょっとした理論。 作成された各ViewControllerには、独自のUITraitCollectionオブジェクトがあり（iOS 8で使用可能なViewControllerの特性に関する詳細情報を提供します。詳細については、こちらを参照してください）、2つのサイズクラスがあります：水平および垂直。 各サイズクラスには、コンパクト、レギュラー、および任意の3つの値を設定できます。 これらの値は、デバイスとその向きによって異なります。 つまり、アプリケーションには、現在のサイズクラスに基づいて、ViewControllerごとに独自の個別のインターフェイスがあります。



私たちのワニーに戻って、それは何ですか？ これは、次のような特定の種類のデバイスを操作するための構成選択グリッドにすぎません。







グリッドにカーソルを合わせると、Appleは開発者に、どのサイズのデバイスが何を意味するかに関するヒントを提供します。 グリッドの全体像は次のようになります。



基本値（任意の幅|任意の高さ）：







iPhone横向きモード（コンパクトな幅|コンパクトな高さ）：







iPhoneポートレートモード（コンパクトな幅|通常の高さ）：







iPadの横向きおよび縦向きモード（通常の幅|通常の高さ）：







グリッドの各正方形の中央にある緑色の点に注意する必要があります。 この構成で行った変更がどのデバイスに適用されるかを示しています。 たとえば、基本的な値（任意の幅|任意の高さ）では、ポイントは、すべてのタイプのデバイスに変更が適用されることを開発者に示します。 このため、アップルは、この特定の構成のインターフェイスでほとんどの作業を行うことをお勧めします。



テストケースに戻りましょう。 前述のように、ViewControllerには基本的なサイズクラス（幅|高さ）があります。 ViewController 3に100 x 100のサイズのシンプルなビューを追加し、それらを緑に色付けし、幅600および高さ50のUILabelおよびUIButtonを追加し、わかりやすくするために色付けします。







制約を追加します。

ボタン-高さおよびワイトと同様に、垂直および水平にセンタリングします。

3つのビュー-高さとワイト、水平スペースと垂直スペース。 UILabelでも同じことを行います。



その結果、ViewControllerとConstraintsは次のようになります。







iPhone 5のポートレートとランドスケープでアプリケーションを実行してみましょう。









およびiPad 2：





ご覧のとおり、結果はあまり快適ではありません。iPhone5のポートレートでは、2つのビューが不明瞭になり、ビューとラベルのサイズを含むランドスケープモードでは、単なる災害であり、幅が大きすぎます。 iPadではすべてがそれほど怖いわけではありませんが、ラベルとボタンの間の距離が大きすぎて、最初のUIViewが引き伸ばされています。



まず、iPhone 5のすべてを修正しましょう。最初に、[サイズクラス]で、縦向きに（コンパクトな幅|通常の高さ）を選択します。







[サイズクラス]選択バーが青になっていることに注意してください。 これは、現時点では基本的な構成になっていないため、より注意深くなることを意味します。4つのタイプの変更は、このタイプとデバイスの向きにのみ適用されます。 これらの変更は何ですか？ 前述のように、それらの4つがあります。



1）制約値

2）フォント

3）Constraint'ovの有効化/無効化

4）サブビューの有効化/無効化



PSサイズクラスグリッドの緑色の点が示すように、次に行われることはすべてiPhone 5の縦向きにのみ適用されることを思い出してください！



ポイント1から始めて、すべてが正しく見えるようにConstraintの値を修正しましょう。 この構成では、制約エラーが表示されます。







この方向でそれらを修正するには、制約設定に移動し、ビュー間の水平距離の値を選択します。iPhoneの場合は大きすぎるためです。







[ユーティリティ]パネルの[サイズインスペクター]タブで、[定数]項目の横（および[インストール済み]の横にありますが、後ほど）にある小さな[+]記号をクリックします。







「コンパクト幅| 通常の高さ（現在）“：







新しい向き（wC hR）があります。この向きに値34を入力します。2番目と3番目のビューの間の2番目の制約でも同じことを行います。







その後、ビュー間の幅に関連するエラーが消えます：







この方向のボタンとラベルの幅についても同じことを行います。 幅を選択し、定数「コンパクト幅| 通常の高さ（現在）」、および値を200に設定します。







思い出すと、ボタンをコンテナの水平方向の中央とコンテナの垂直方向の中央に設定すると、残りの競合が発生します。 それらは、必要なものに応じて少なくとも2つの方法で解決できます。1つ目の方法、必要に応じてボタンを中央に配置するか、すべてをそのままにして上記のリストから3ポイントを使用します。 この例では、サイズクラスに関する記事であるため、番号2のメソッドを使用します。



したがって、面倒な制約を「オフ」にするには、リストから選択する必要があります。







[サイズインスペクター]タブに戻り、[インストール済み]チェックボックスの横にある[+]をクリックします。







繰り返しますが、「コンパクト幅| 通常の高さ（現在）、そして今、定数（wC hR）のように、wC hR「インストール済み」チェックボックスが表示され、それを削除してエラーが消えたことがわかりますが、この構成ではこの制約がオフになっています：







アプリケーションを実行して、すべてが正しく表示されることを確認しましょう（ビューのサイズは特定のデバイスに合わせて調整されていないため、ほとんどすべてです。Xcodeはそれらの1つを自動的に削減します）。







この問題は後で修正します。



iPhone 5ランドスケープでも同じことを行い、グリッドでサイズクラス（コンパクトな幅|コンパクトな高さ）を選択します。







ポートレートモードでは、ビューとボタンとラベルの寸法の距離を変更する必要があります。ポートレートモードと同じ値を選択しました。ビュー34間の距離、ボタンとラベルのサイズ200。アプリを実行します。







繰り返しますが、サイズを調整しなかったため、Xcodeはビューを拡大します。 このエラーを縦（コンパクトな幅|通常の高さ）および横（コンパクトな幅|コンパクトな高さ）方向で修正します。 3つのビューを選択し、メニューから[エディター]-> [ピン]-> [幅]を選択します。 その後、アプリケーションを実行して実行し、すべてが正しく表示されることを確認します。









iPadで繰り返さないようにするために、iPhoneと同じことを行います。サイズクラスグリッドでのみ、通常の[幅]を選択します。 iPadの縦向きと横向きに対応する通常の高さ。 この状況では、すべてのConstraintを中央に揃えて更新し、WidthとHeightを等しく設定しました。









通過しなかった2つのポイントが残っています。これは、サブビューとフォントのオン/オフです。 横長モードのiPhoneコンパクト幅を選択| コンパクトな高さ。 UILabelを選択し、属性インスペクターに移動します。フォントの反対側には、おなじみの「+」が表示されます。







Constraintとの類推により、「Compact Width | コンパクトな高さ（現在）」。 wC hCの値については、フォントHelvetica Neue Ultra Lightとサイズ23を設定します。起動時に、縦向きではフォントが標準であり、すでにHelvetica Neueのランドスケープにあることがわかります。









したがって、最後のポイントはサブビューのオンとオフを切り替えることです。 ここで何かを説明する必要はないと思うので、これらすべてを噛んだ後にすべてが明らかになります。 すべてがConstraintをオフにすることと似ていますが、唯一の違いは、ここで特定の向きでボタンをオフにすることです。









一般に、私の最初の記事は小さいものではなく、小さいものでもあり、興味深く有用なものであることを願っています。 執筆時点では、Xcode 6はまだベータ版であり、iPhone 6はリリースされていません。どのドキュメントが更新される可能性があります。また、ストーリーボードのViewControllersの外観も変更されます。ただし、iPhoneランドスケープは[サイズクラス]グリッドで選択されています。



ベース： developer.apple.com/library/prerelease/ios/recipes/xcode_help-IB_adaptive_sizes/EnablingAdaptiveSizeDesign.html #//apple_ref/doc/uid/TP40014436-CH1-SW1



ご清聴ありがとうございました！