ボタン

ボタン要素を使用して、クリック可能なボタンを UI に作成します。例えば、ユーザーがボタン要素をクリックまたはタップすると、新しいウィンドウが開く、フォームが送信される、サウンドエフェクトが再生される、などのアクションやイベントがトリガーされます。

ボタンの作成

UI Builder、UXML、または C# を使用してボタンを作成できます。以下の C# の例では、ラベル付きのボタンを作成します。

var button = new Button(() => { Debug.Log("Button clicked"); }) { text = "Click me" };

ボタンにアイコンを追加する

プロジェクトに存在するテクスチャ、レンダーテクスチャ、スプライト、ベクター画像アセットなどのアイコンを組み込むことで、ボタンの視覚的な機能を向上させることができます。画像アセットを参照する方法については、アセットを参照してください。

UI Builder でボタンのアイコンを追加するには、次の手順に従います。

• ボタンの Inspector タブで、アイコン画像のドロップダウンリストから該当するアイコンを選択します。
• または、Assets ウィンドウから、ボタンの Inspector タブにあるIcon Image フィールドへアイコンをドラッグします。

UXML でボタンのアイコンを追加するには、画像のソースを icon-image 属性に指定します。

<ui:Button name="Button" text="Button text" icon-image="/path/to/image-file.png" />

C# でボタンのアイコンを追加するには、画像ソースを iconImage プロパティに割り当てます。

Button myButton = new Button();
var buttonIconImage = Resources.Load<Texture2D>("image-file");

myButton.text = "Button text";
myButton.iconImage = buttonIconImage;

ボタンのアイコンの位置を変更する

ボタンにアイコンを追加すると、ボタンに以下の 2 つの読み取り専用のサブ要素が追加されます。

• アイコン画像を定義する Image 要素。
• ボタンのテキストを定義する TextElement。

サブ要素は編集できませんが、ボタン要素の USS flex-direction プロパティを使用してレイアウトを変更できます。デフォルトでは、このアイコンはボタンのテキストの左側に追加されます。

ボタンアイコンの位置を変更するには、以下のようにボタンの flex-direction を調整します。

• アイコンをボタンテキストの右側にシフトするには、row-reverse に設定します。
• アイコンをボタンテキストの上に移動させるには、column に設定します。
• ボタンテキストの下にアイコンを配置するには、column-reverse に設定します。

ボタンのサブ要素を使用する

ボタン要素では、text、iconImage、および background-image style プロパティを使用して、ユーザーに追加情報を提供します。他のビジュアル要素と同様に、ボタンの階層にラベルや画像などのサブ要素を追加して、それらの要素の外観や動作をより細かく制御したい場合は、ユーザーに追加情報を提供することもできます。

通常、サブ要素を使用するのは以下のような場合です。

• カスタマイズ: サブ要素を使用すると、個々の要素の外観と動作を個別にカスタマイズできます。例えば、ラベルにカスタムフォントや色を使用したり、画像に特定のアニメーションを追加したりできます。ボタンに画像要素を追加すると、シーンから要素を直接追加できます。さらに、画像要素はスケールモードと繰り返しモードもサポートしています。
• 動的コンテンツ: ラベルまたは画像のコンテンツが動的である場合、サブ要素を使用すると、ボタンの他のプロパティに影響を与えずに、各要素のコンテンツを個別に更新することができます。
• インタラクション: ボタン内の特定の要素に相互作用性を追加する場合、例えばユーザーがラベルだけをクリックして (ボタンの他の要素をクリックしても無視されて) アクションをトリガーできるようにする場合は、サブ要素を使用します。

プロパティは以下の目的で使用します。

• シンプルなデザイン: ボタンのデザインがシンプルで、カスタマイズや動的コンテンツが必要ない場合は、プロパティの使用をお勧めします。
• パフォーマンス: UI に多くのボタンがあり、それぞれがサブ要素を使用している場合は、パフォーマンスに悪影響を与える可能性があります。この場合、プロパティを使用してボタンの外観を設定する方が効率的です。
• 一貫性: UI 全体で一貫性を維持したい場合は、プロパティを使用することで、すべてのボタンの外観と動作に一貫性を持たせることができます。

例

以下の UXML 例では、ボタンを作成します。

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Button text="UXML Button" name="the-uxml-button" />
</UXML>

以下の C# の例では、ボタンのカスタマイズ可能な機能の一部を示しています。

/// <sample>
// Action to perform when button is pressed.
// Toggles the text on all buttons in 'container'.
Action action = () =>
{
    container.Query<Button>().ForEach((button) =>
    {
        button.text = button.text.EndsWith("Button") ? "Button (Clicked)" : "Button";
    });
};

// Get a reference to the Button from UXML and assign it its action.
var uxmlButton = container.Q<Button>("the-uxml-button");
uxmlButton.RegisterCallback<MouseUpEvent>((evt) => action());

// Create a new Button with an action and give it a style class.
var csharpButton = new Button(action) { text = "C# Button" };
csharpButton.AddToClassList("some-styled-button");
container.Add(csharpButton);
/// </sample>

この例を Unity でライブ体験するには、Window > UI Toolkit > Samples の順に移動します。

C# の基本クラスと名前空間

C# クラス: Button
名前空間: UnityEngine.UIElements
基本クラス: TextElement

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

この要素は VisualElement から以下の属性も継承します。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

Inspector または UI Toolkit Debugger の Matching Selectors セクション を使用して、階層のすべてのレベルで VisualElement のコンポーネントに影響する USS セレクターを確認することもできます。

追加リソース

• 画像
• TextElement
• ToggleButtonGroup