web-dev-qa-db-ja.com

Xcode 8の「Vary for Traits」とは何ですか?

AutoLayoutクラスとSizeクラスを使用していますが、iOS 10および新しいXcode 8.0のリリースでは、1つの新しいオプションVary for Traitsがあります。デバイスの幅と高さを変えるために、このサイズクラスを置き換えますか。

enter image description here

widthチェックボックスを選択すると、varying 14 compact width devicesが表示されます。

enter image description here

heightチェックボックスを選択すると、varying 18 compact height devicesが表示されます。

enter image description here

両方のチェックボックスを選択すると、varying 11 compact width regular height devicesが表示されます。

enter image description here

このオプションを利用するには? Xcode7.0のようなサイズクラスでAutoLayoutを使用できますか?深い知識がある人は説明してください。

74
technerd

これは、iPadおよびiPhoneに異なるレイアウトを追加するためにプロジェクトで「Vari Traits」をすばやく使用する方法に関する拡張機能です。

Sizeクラスの詳細については、こちらをお読みください。

https://developer.Apple.com/reference/uikit/uitraitcollection

enter image description here

以下の例をスキップする場合は、最後に要約を読んでください。


  • 目的:

iPhoneとiPadでは幅の異なるボタンが必要です。前者の幅は80で、後者の幅は300です。

  • メソッド1:

インストール済みの複数の制約を持つ特性については異なる

  • STEPS:

    1. 最初にボタンを水平および垂直に中央揃えするなどの一般的な制約を追加します。

enter image description here

  1. VaryForTraitsを選択し、サイズクラスガイドラインに従ってiPhone画面の場合、C * Rサイズクラスがモデルに適合します。これにより、ポップアップの幅と高さの目盛りをチェックします。画面上の任意の場所をクリックして、ポップアップを閉じます。

enter image description hereenter image description here

  1. 幅定数を追加し、C * Rサイズクラスに制約が追加されているかどうかを確認します。制約を追加した後、[Done Varying]ボタンを選択します。

enter image description hereenter image description here

  1. IPad画面の場合、iPadデバイスを再度選択してVaryForTraitsを選択します。今回はheight-widthをクリックすると、R * Rのバリエーションが表示されます。

enter image description hereenter image description here

  1. 再び幅の制約を追加します。最後に追加したiPhoneの幅の制約は、スクリーンショットのように強調表示を解除する必要があります。今回追加された値は、サイズクラスR * R用です。

enter image description hereenter image description here

  1. IPhoneレイアウトに戻すと、幅が80になり、iPadが300になります。

enter image description here

結論:

合計2つの制約が追加されており、両方の制約で、選択したサイズクラスに応じて値が異なることに注意してください。


  • メソッド2:

単一の制約、複数のサイズクラスがインストールされた特性で異なる

  • STEPS:
    1. 通常の幅の制約を追加します。次に、その制約を選択し、定数値の横にある+ボタンを選択します。

enter image description here

  1. 特性のバリエーションを追加し、iPhoneの場合はC * Rを選択し、定数値を100に設定します。

enter image description hereenter image description here

  1. ここでも、R * Rとして特性のバリエーションに従うiPadの場合、+ボタンをもう一度クリックして別のバリエーションを追加し、値を300に設定します。

enter image description hereenter image description here

  1. IPadを選択すると、幅は自動的に300になり、iPhoneに戻ると値として100になります。

enter image description here

結論:

これは、単一の制約のみが必要で定数値が異なる場合に2つの制約を追加するよりも、より良いオプションのようです。

いつ使うか、何を使うか:

両方のアプローチは、基本的に同じことを行い、値をSizeクラスに設定します。

ただし、#Method1は、デバイス専用の制約を追加する場合、またはサイズクラスを言う場合に使用されます。たとえば、iPhoneの場合、ボタンは上位50ポイントから、iPadの場合は水平および垂直の中央に配置する必要があります。そのような状況では、VaryForTraitsを使用してドアを開き、特定のサイズクラスの制約を追加する必要があります。

#Method2は、同じ制約タイプに対して異なる定数値が必要な場合に使用されます。

P.S:作業例を取得できないすべての人に

必ず、インストール済みとして必要な制約のみを追加するようにしてください。 [インストール済み]のチェックボックスは、サイズクラスに必要な制約に対してのみ表示されます。それが鍵です!

enter image description here

ビューのuiButtonにトップの制約とリードを追加するだけです。上の制約を選択し、プラス記号を使用して基本的なインストール済みオプションをオフにします。次に、プラス記号をクリックして、C Rにバリエーションを追加し、そのオプションを確認します。次に、さまざまな向きの組み合わせでデバイスをiPhoneからiPadに変更します。この制約は、Cにのみ適用されますRサイズクラスは、iPhoneを縦向きにしています。基本インストール済み(プラス記号の付いたもの)のチェックボックスがチェックされている場合、すべてのサイズクラスに制約が適用されることを意味します。

SUMMARY:

Trait Variationは、デバイス構成に基づくユーザーインターフェイスの表示の変更です。ユーザーインターフェイスのTraitバリエーションは、制約だけに限定されず、より多くに適用できます。デバイスが暗いスタイルに設定されているときに背景やその他の要素の色を変更するなど。バリエーションは、制約の削除などのユーザーインターフェイスの要素、またはラベルのフォントなどのビュークラスまたは制約のプロパティに適用できます。あなたは変えることができます:

  • ビューのサイズまたは位置

  • ビューのインストール

  • 制約のインストール

  • 制約定数

  • フォント

  • フォント、色合い、または背景の色

  • レイアウトマージン

  • 画像ファイル

変更できるプロパティの特定のセットは、要素のクラスによって異なります。例では、次の使用方法を示しました-制約のインストール&-制約定数。その他は非常にシンプルで、簡単に推測できます。

127
Jen Jose

特性の変化は、Xcodeの過去のバージョンに存在していたサイズクラスオプションの進化です。特性に基づいて、はるかに洗練された正確なバリエーションが可能になります。もちろん、iPad/iPhoneのみのバリエーションに限定されるものではありませんが、向きと異なるデバイスに基づいてバリエーションを指定することもできます。

このスレッドの他の回答にはいくつかの欠如と不正確さがあります。おそらく最も効率的な回答の方法は例を作ることです。わかりやすくするために、この例ではボタンと2つのレイアウトのみに制限します。ただし、以下で説明するように、必要に応じて次の例を拡張できます。私たちの目標は、すべてのデバイスで横向きと縦向きの2つの異なるレイアウト間でボタンの位置を調整することです。

注:「特性の変更」オプションが有効になっていない場合、すべてのレイアウトとUIインターフェイスの調整は、すべての特性(つまり、すべてのサイズクラス)を参照します。

fig1

ストーリーボードにボタンを配置することから始めましょう。 「特性に合わせて変更」が有効になっていないため、ボタンはすべての異なるレイアウトに表示されます。代わりに、特性に対して可変を有効にした場合、ボタンは選択された特定の特性のみに参照されます。

fig2

それでは、「特性に合わせて変更」を有効にして、身長に基づいてバリエーションを選択しましょう。下の画面が青色に変わり、選択に応じて影響を受けるすべてのデバイスが表示されます。ここまでは順調ですね。

fig3

ボタンを再度選択し、通常どおりに制約を追加します。この例では、幅と高さだけでなく、上部と左側の先行スペースを追加します。その後、「Done Varying」をクリックします。画面の下部が再び灰色に変わります。何が起きているかは、(w:C h:R)クラスに対してのみ上記の制約を追加するようにInterface Builderに指示したことです。

fig4

次に、画面の下部で横向きモードを選択します。一部の特性に対してのみ追加した制約がないため、ボタンは赤で表示されます。再度特性を選択し、高さのバリエーションを再度選択します。次の制約を追加します。

fig5

さまざまなボタンを押します。これで、横向きと縦向きの両方のボタンが画面上で明確に識別されます。

fig6

ビルドして実行します。画面の向きに応じてボタンが変わることがわかります。

このパターンに従って、より高度なレイアウトを作成できます。たとえば、最初に特性の可変を選択し、特定の特性のUIKitオブジェクトのみをドロップできます。このオブジェクトは指定されたバリアントにのみ存在し、他のバリアントではグレー表示され、特性に基づいて完全に異なるユーザーインターフェイスを作成できます。

20
valvoline

それはsize classesに他なりませんが、表現は異なります。 xcode 7まではサイズクラスを使用し、height-widthの方法でregular,compact and anyを検討します。vary for traitsの概念は同じですが、xcodeはexact deviceを具体的に説明します。古いバージョンでは、for every iphone in portraintなどの種類の情報がありますが、ここでは正確なデバイスを知ることができます!

以下のスクリーンショットを確認してください、

enter image description here

enter image description here

詳細については wwdc2016-video を参照してください!

参照: This So Post

8
Lion