Xcode 8の「VaryforTraits」とは何ですか?


86

AutoLayoutクラスとSizeクラスを使用していますが、iOS10と新しいXcode8.0のリリースにより、1つの新しいオプションがありますVary for Traits。これは、デバイスの幅と高さが異なる場合のサイズクラスの置き換えですか。

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

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


WWDC2016セッションのビデオをご覧ください。それは「Xcodeの新機能」としてどこかで取り上げられたと思います。
マーティンR

回答:


133

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

サイズクラスの詳細については、これをお読みください。

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

ここに画像の説明を入力してください

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


  • 目的:

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

  • 方法1:

インストールされている複数の制約がある特性によって異なります。

  • 手順:

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

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください ここに画像の説明を入力してください

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

ここに画像の説明を入力してください ここに画像の説明を入力してください

  1. iPad画面の場合は、もう一度任意のiPadデバイスを選択し、VaryForTraitsを選択します。今回は、height-widthをクリックすると、R * Rの変動が表示されます。

ここに画像の説明を入力してください ここに画像の説明を入力してください

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

ここに画像の説明を入力してください ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

結論:

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


  • 方法2:

単一の制約、複数のサイズ-クラスがインストールされている特性によって異なります

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

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください ここに画像の説明を入力してください

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

ここに画像の説明を入力してください ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

結論:

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

いつ使用するか、何を使用するか:

どちらのアプローチも基本的に同じことを行い、値をサイズクラスに設定します。

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

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

PS:例を機能させることができないすべての人に

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

ここに画像の説明を入力してください

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

概要:

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

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

  • ビューのインストール

  • 制約のインストール

  • 制約定数

  • フォント

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

  • レイアウトマージン

  • 画像ファイル

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


51
これは私にとってはうまくいきません..それはすべての画面サイズの制約を更新し、実際には何も起こりません...
ダン

5
それが機能しない場合は、これを読んでみてください:help.apple.com/xcode/mac/8.0 / / devba3dd0b51。フォントやその他のプロパティをカスタマイズする場合は、属性ペインのプロパティの左側にある[+]をクリックします。また、iPhone4sとiPhone7 Plusはどちらもコンパクトな幅であるため、幅に応じて特性を変えることはできません。iPhoneとiPadでそれらを変えることができます。
Denis Kutlubaev 2017年

2
私のために働いたのthnx :)
Sanman

1
古い制約を削除して新しい制約を追加した後、値を置き換える代わりに、それは私のために機能しました。
Teodor Ciuraru 2017年

2
これが機能していないと言う人々のために。すべての制約を変更しようとしていると思いますが、制約の定数値しか変更できず、制約の複数のプロパティやその他のプロパティを実際に変更することはできません。私もこの部分で混乱しました。
3366784 2017年

21

Vary for traitsは、Xcodeの過去のバージョンに存在していたサイズクラスオプションの進化です。それは、特性に基づいてはるかに気の利いた正確なバリエーションを可能にします。もちろん、iPad / iPhoneのみのバリエーションに限らず、向きやデバイスごとにバリエーションを指定することもできます。

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

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

fig1

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

fig2

それでは、「特性に応じて変化」を有効にして、高さに基づいて変化を選択しましょう。下部の画面が青色に変わり、選択に応じて、影響を受けるすべてのデバイスが表示されます。ここまでは順調ですね。

fig3

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

fig4

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

fig5

押して変化させます。これで、ボタンは横向きと縦向きの両方で画面上で明確に識別されます。

fig6

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

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


3
(wC、hR)クラスの制約を追加してから、[さまざまな変更]をクリックしました。(wR、hR)を開くと、古い制約も表示されます。このクラス(wR、hR)の新しい制約を作成する方法。@valvolinを教えてください
Ramcharan Reddy

9

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

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

ここに画像の説明を入力してください

ここに画像の説明を入力してください

wwdc2016を参照する必要があります-ビデオ詳細をしてください!

参照:この投稿


OK、WWDCビデオをチェックさせてください。
technerd 2016年

あなたはまさにそのサイズクラスの進化に他なりません
Durai Amuthan.H 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.