バリアントは、パネルの特定のビジュアル状態を定義します。これにより、1 つのパネルに、開いた状態や閉じた状態など、複数の異なるビジュアル表現を持たせることができます。XML を使用してバリエーションを構成します。<Panel> 要素内でサブタグを使用します。
各 <Variant> タグには、一意に識別するための必須の id 属性があります。タグは、親バリエーションを参照してプロパティを継承することもできます。この継承メカニズムにより、複数のバリアントにわたる共通のプロパティを効率的に定義できます。
XML 属性
状態と遷移を定義するには、<TaskPanel> タグまたは <DecorPanel> タグでこれらの属性を使用します。
| 属性 | ステータス | 説明 |
|---|---|---|
id |
必須 | バリエーションの一意の識別子。この ID は、トランジションでバリエーションを参照したり、パネルの defaultVariant として使用したりするために使用されます。 |
parent |
任意 | 現在のバリアントがプロパティを継承する別のバリアントの ID を指定します。プロパティが現在のバリエーションで明示的に定義されていない場合、親バリエーションで定義されている値にフォールバックします。 |
XML 子要素
これらの省略可の要素を使用して、このバリアントの状態にあるパネルの視覚的特性を指定します。
| 子要素 | 説明 |
|---|---|
<Visibility> |
パネルが表示されるか非表示になるかを指定し、isVisible 属性（ブール値）を含みます。 |
<Alpha> |
パネルの透明度レベルを指定します。alpha 属性（浮動小数点、0.0 ～ 1.0）を含みます。 |
<Layer> |
他のパネルに対するパネルの Z オーダーを設定します。layer 属性（整数）を含みます。値が大きいほど上に描画されます。 |
<Focus> |
遷移中にパネルがフォーカスを取得できるかどうかを指定します。onTransition 属性（ブール値）が含まれます。 |
<Bounds> |
画面上のパネルの矩形領域（位置とサイズ）を定義します。この領域は、left、top、bottom、width、height などの属性によって制御されます。
割合を使用する場合は、オフセット属性を使用して、割合ベースの境界（ たとえば、画面の高さの 100% を占めるパネルを指定し、下部の固定高さのナビゲーション バーを除外するには、高さを 100% に設定し、 |
<SafeBounds> |
パネルの境界内の安全な領域を指定します。この領域は、ディスプレイ カットアウトやインセットと重ならないため、この領域内に描画されるアプリの互換性を強調できます。属性は <Bounds> と同様です。 |
<Corner> |
パネルの角の半径を定義し、角を丸くします。半径属性（整数）が含まれます。鋭角はデフォルトであり、定義する必要はありません。 |
<Insets> |
パネルのインセット（パディング）を指定します。left、top、right、bottom 属性が含まれます。これらのインセットは、パネル内で起動されたアプリに報告されます。
|
<Background> |
アプリを切り替える際の透かし効果を防ぐため、オプションの背景装飾パネルを導入しました。この装飾レイヤの色やアルファなどのプロパティを定義します。装飾レイヤのプロパティ（境界やレイヤなど）は、まだ設定されていない場合、バリアントのプロパティがデフォルトになります。 |
サンプルコード
<Variant id="@id/opened">
<Visibility isVisible="true"/>
<Bounds left="0dp"
top="0dp"
right="100%"
bottom="100%"
bottomOffset="100dp"/>
<Alpha value="1.0"/>
<Layer value="10"/>
<Focus onTransition="true"/>
<Corner radius="24dp"/>
<Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
<Background color="@color/app_background" alpha="0.9"/>
</Variant>
視覚的プロパティを補間する
KeyFrameVariant を使用して、ビジュアル プロパティを補間します。variant のこの特殊な拡張機能は、連続した分数値（0 ～ 1）に基づいており、パネルの状態がドラッグ量に応じて動的に変化する際のドラッグ操作など、連続した入力によってスムーズで動的なトランジションを実現します。
XML 属性
KeyFrameVariant には属性がありません。<KeyFrameVariant> タグには、KeyFrameVariant の定義に必要な情報が含まれています。
XML 子要素
KeyFrameVariant には 1 つ以上の <KeyFrame> 子タグが含まれます。各 <KeyFrame> には framePosition 属性（0 ～ 100）があり、バリエーション属性（別のバリエーションの ID）を参照します。これらの keyframes は、連続的なトランジションの特定の時点におけるパネルの状態を定義します。
サンプルコード
<KeyFrameVariant id="@id/panel_resizing">
<KeyFrame framePosition="0" variant="@id/minimized"/>
<KeyFrame framePosition="75" variant="@id/opened"/>
<KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>