토글을 사용하여 조건부 UI 만들기

이 예제에서는 토글을 사용하여 조건부 UI를 만듭니다.

개요 예시

이 예시에서는 2개의 토글을 사용하여 커스텀 에디터 창을 생성합니다. 토글을 사용하여 다음을 수행할 수 있습니다.

• 레이블 표시 또는 숨기기
• 버튼 활성화 또는 비활성화

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

예시 생성

예제를 생성하려면 다음 단계를 따르십시오.

1. 임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.

2. 프로젝트 창에서 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을 선택합니다.

추가 리소스

• 토글