UXML ファイルの再利用

テンプレートとして UXML ファイルを作成し、他の UXML ファイル内でそれを再利用できます。

UXML テンプレートのインポート

大規模なユーザーインターフェースを設計する場合は、UI の部分部分を定義するテンプレート UXML ファイルを作成し、<Template> および <Instance> 要素を使用して、それを別の UXML ファイルにインポートすることが可能です。

例えば、画像、名前、ラベルを持つポートレート UI 要素がある場合、以下の内容で、Assets/Portrait.uxml として UXML テンプレートファイルを作成できます。

<ui:UXML ...>
    <ui:VisualElement class="portrait">
        <ui:Image name="portaitImage" style="--unity-image: url(\"a.png\")"/>
        <ui:Label name="nameLabel" text="Name"/>
        <ui:Label name="levelLabel" text="42"/>
    </ui:VisualElement>
</ui:UXML>

その上で、この Portrait テンプレートを以下のように再利用できます。

<ui:UXML ...>
    <ui:Template src="/Assets/Portrait.uxml" name="Portrait"/>
    <ui:VisualElement name="players">
        <ui:Instance template="Portrait" name="player1"/>
        <ui:Instance template="Portrait" name="player2"/>
    </ui:VisualElement>
</ui:UXML>

UXML 属性のオーバーライド

UXML テンプレートのインスタンスを作成したら、その要素のデフォルト属性値をオーバーライドできます。属性をオーバーライドすれば、同じテンプレートを、(インスタンスごとに異なる値を使って) 何度もインスタンス化することができます。

属性のオーバーライド

UXML タグで属性をオーバライドできます。属性をオーバーライドするには、以下を指定します。

オーバーライドしたい属性を持つ要素の element-name 属性
オーバーライドする属性の名前
新しい属性値

例えば、ゲーム内の各プレイヤーに同じ一式の情報を表示したい場合は、UXML テンプレートを作成し、属性のオーバーライドを使用してプレイヤーごとのインスタンスを作成できます。

まず、以下の内容で、テンプレート (例えば MyTemplate.uxml など) を作成します。

<UXML xmlns="Unityui.UIElements">
    <Label name="player-name-label" text="default name" />
    <Label name="player-score-label" text="default score" />
</UXML>

次に、これを別の UXML ファイルからインスタンス化し、各プレイヤーの名前とスコアを表示するために、属性をオーバーライドします。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Template src="MyTemplate.uxml" name="MyTemplate" />
    <Instance name="player1" template="MyTemplate">
        <!-- Alice is the new value of the text attribute for the player-name-label -->
        <AttributeOverrides element-name="player-name-label" text="Alice" /> 
        <!-- 2 is the new value of the text attribute for the player-score-label -->
        <AttributeOverrides element-name="player-score-label" text="2" />
    </Instance>
    <Instance name="player2" template="MyTemplate">
        <!-- Bob is the new value of the text attribute for the player-name-label -->
        <AttributeOverrides element-name="player-name-label" text="Bob" />
        <!-- 1 is the new value of the text attribute for the player-score-label -->
        <AttributeOverrides element-name="player-score-label" text="1" />
    </Instance>
</UXML>

複数の属性のオーバーライド

各オーバーライドで複数の属性を指定できます。例えば、以下の構文は、player-name-label という名前のインスタンスの全ての要素を検出します。

text 属性のデフォルト値を、新しい値 Alice でオーバーライドします。
tooltip 属性のデフォルト値を、新しい値 Tooltip 1 でオーバーライドします。

<AttributeOverrides element-name="player-name-label" text="Alice" tooltip="Tooltip 1" />

属性のオーバーライドのネスト

属性のオーバーライドは、要素の階層のネスト状のテンプレートを通して伝播します。例えば、テンプレート A がテンプレート B をインスタンス化し、テンプレート B がテンプレート C をインスタンス化する場合、テンプレート A とテンプレート B の両方がテンプレート C の属性をオーバーライドできます。

ネスト状のテンプレートで属性をオーバーライドする場合、最も深いオーバーライドが優先されます。上記の例で、テンプレート A とテンプレート B の両方がテンプレート C の同じ属性をオーバーライドする場合、テンプレート B によるオーバーライドの方が、描画された UI に実際に何が表示されるかを決定します。

制限

属性のオーバーライドには以下の制限があります。

属性のオーバーライドは、指定された要素名に従って、一致する属性を見つけます。USS セレクターや UQUery を使用して要素を照合することはできません。
要素の binding-path 属性をオーバーライドすることはできますが、データバインディングは属性のオーバーライドには機能しません。
You can’t override an element’s name or style attributes.

その他の参考資料

テンプレート

UXML にスタイルを加える

UXML から他のファイルを参照する