Unity 사용자 매뉴얼: UI 툴킷과 리스트 바인딩

이 문서는 Unity에서 UI 툴킷을 사용하여 리스트를 바인딩하는 방법에 대해 설명합니다. 리스트를 효율적으로 처리하기 위해 ListView 컨트롤을 이용하는 방법을 배울 것입니다.

개요

이 가이드는 GameSwitch 객체의 리스트를 생성하고 이 리스트를 UI에 바인딩하는 방법을 단계별로 안내합니다. 최종 결과물은 GitHub 저장소에서 확인할 수 있습니다.

전제 조건

• Unity 에디터 사용에 익숙한 개발자
• UI 툴킷 및 C# 스크립팅에 대한 이해

시작하기

1. 새 Unity 프로젝트 생성
2. 임의의 템플릿으로 프로젝트를 시작합니다.
3. 프로젝트 창에서 'bind-to-list'라는 폴더를 만듭니다.
4. C# 스크립트 생성
5. GameSwitch.cs라는 이름의 C# 스크립트를 생성하고 다음 내용을 추가합니다.

```csharp using System;

[Serializable] public struct GameSwitch { public string name; public bool enabled; } ```

1. UI 문서 생성
2. Game_switch.uxml이라는 이름의 UI 문서를 생성하고 다음 내용을 추가합니다.

xml <UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements"> <Box style="flex-direction: row;"> <Toggle binding-path="enabled" /> <TextField binding-path="name" readonly="true" style="flex-grow:1;"/> </Box> </UXML>

1. GameSwitchListAsset 스크립트 작성
2. GameSwitchListAsset.cs라는 이름의 C# 스크립트를 만들고 다음 내용을 추가합니다.

```csharp using System.Collections.Generic; using UnityEngine;

namespace UIToolkitExamples { [CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitchList")] public class GameSwitchListAsset : ScriptableObject { public List switches;

       public void Reset()
       {
           switches = new()
           {
               new() { name = "Use Local Server", enabled = false },
               new() { name = "Show Debug Menu", enabled = false },
               new() { name = "Show FPS Counter", enabled = true },
           };
       }

       public bool IsSwitchEnabled(string switchName) => switches.Find(s => s.name == switchName).enabled;
   }

} ```

커스텀 에디터 생성

1. 커스텀 에디터 스크립트 작성
2. Editor라는 이름의 폴더를 생성합니다.
3. GameSwitchListEditor.cs라는 이름의 C# 스크립트를 생성하고 다음 내용을 추가합니다.

```csharp using UnityEditor; using UnityEngine; using UnityEngine.UIElements;

namespace UIToolkitExamples { [CustomEditor(typeof(GameSwitchListAsset))] public class GameSwitchListEditor : Editor { [SerializeField] VisualTreeAsset m_ItemAsset;

       [SerializeField]
       VisualTreeAsset m_EditorAsset;

       public override VisualElement CreateInspectorGUI()
       {
           var root = m_EditorAsset.CloneTree();
           var listView = root.Q<ListView>();
           listView.makeItem = m_ItemAsset.CloneTree;
           return root;
       }
   }

} ```

1. UI 문서 추가
2. game_switch_list_editor.uxml라는 이름의 UI 문서를 생성하고 다음 내용을 추가합니다.

xml <UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements"> <ListView virtualization-method="DynamicHeight" reorder-mode="Animated" binding-path="switches" show-add-remove-footer="true" show-border="true" show-foldout-header="true" header-title="Switches"/> </UXML>

1. 바인딩 확인
2. 프로젝트 창에서 GameSwitchListEditor.cs를 선택하고 game_switch.uxml을 인스펙터의 Item Asset으로 드래그합니다.
3. game_switch_list_editor.uxml을 인스펙터의 Editor Asset으로 드래그합니다.

바인딩 테스트

1. 새 에셋 생성
2. 메뉴에서 Assets > Create > UIToolkitExamples > GameSwitchList를 선택합니다.
3. 생성된 New Game Switch List Asset을 프로젝트 창에서 선택합니다.
4. 리스트 조작
5. 인스펙터에서 토글 리스트를 조작하며 리스트 항목의 순서를 변경하고, 항목을 추가/제거할 수 있습니다.

추가 리소스

Unity는 강력한 비주얼 시스템과 스크립트를 통해 다양한 UI 요소를 쉽게 관리할 수 있는 환경을 제공하므로, 개발자들은 이러한 도구들을 활용하여 자신의 프로젝트에 적합한 솔루션을 만들 수 있습니다.