トグルを使って条件付き UI を作成する

この例では、トグルを使って条件付き UI を作成します。

例の概要

この例では 2 つのトグルを持つカスタムエディターウィンドウを作成しています。トグルを使って以下のことがで可能です。

• ラベルの表示/非表示
• ボタンの有効化/無効化

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

例の作成

サンプルを作成するには以下を行います。

1. 任意のテンプレートで Unity プロジェクトを作成します。

2. Project ウィンドウに、Editor という名前のフォルダーを作成します。

3. Editor フォルダーに、以下のコンテンツを含む ToggleExample という C# ファイルを作成します。

   using UnityEngine;
   using UnityEditor;
   using UnityEngine.UIElements;
   namespace Samples.Editor.Controls
   {
       public class ToggleExample : EditorWindow
       {
           private Toggle showToggle;
           private Toggle activateToggle;
           private Label labelToShow;
           private Button buttonToActivate;
           [MenuItem("Window/ToggleExample")]
           public static void OpenWindow()
           {
               var window = GetWindow<ToggleExample>("Controls: Toggle Sample");
               window.minSize = new Vector2(200, 170);
               EditorGUIUtility.PingObject(MonoScript.FromScriptableObject(window));
           }
           public void CreateGUI()
           {
               showToggle = new Toggle("Show label")
               {
                   value = true
               };
               activateToggle = new Toggle("Active button")
               {
                   value = true
               };
               labelToShow = new Label("This label is shown when the above toggle is set to On");
               buttonToActivate = new Button(() => Debug.Log("Button pressed!"))
               {
                   text = "Active if above toggle is On"
               };
               rootVisualElement.Add(showToggle);
               rootVisualElement.Add(labelToShow);
               rootVisualElement.Add(activateToggle);
               rootVisualElement.Add(buttonToActivate);
               showToggle.RegisterValueChangedCallback(evt => labelToShow.visible = evt.newValue);
               activateToggle.RegisterValueChangedCallback(evt => buttonToActivate.SetEnabled(evt.newValue));
           }
       }
   }
   

4. 例を試すには、メニューから Window > ToggleExample を選択してください。

その他の参考資料

• UXML 要素 Toggle