Version: 2023.1
言語: 日本語
ポップアップウィンドウの作成
2 つの属性を持つカスタムコントロールの作成

トグルを使って条件付き 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 を選択してください。

その他の参考資料

ポップアップウィンドウの作成
2 つの属性を持つカスタムコントロールの作成