Unity 사용자 매뉴얼 - 복합 리스트 뷰 생성

개요

이 가이드는 Unity의 UI 툴킷을 사용하여 복합 리스트 뷰를 생성하는 방법에 대해 설명합니다. 여기서는 캐릭터 리스트를 예로 들어, 각 캐릭터에 슬라이더와 컬러 팔레트를 추가하여 슬라이더의 값을 변경할 때 색상이 바뀌도록 만들어보겠습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷 및 C# 스크립팅에 익숙한 개발자를 위해 작성되었습니다. 아래의 내용을 숙지한 후 진행하십시오.

  • UXML 요소
  • ListView 개념

예시 코드

이 섹션에서는 ListViewExample이라는 C# 스크립트를 생성하는 방법을 보여줍니다.

  1. Unity 프로젝트의 Project 창에서 Editor라는 폴더를 만듭니다.
  2. 그 폴더 안에 ListViewExample.cs라는 파일을 생성합니다.

다음 코드를 입력하십시오:

using System;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ListViewExample : EditorWindow
{
    private Gradient hpGradient;
    private ListView listView;
    private List<CharacterInfo> items;

    [MenuItem("Window/ListView Custom Item")]
    public static void OpenWindow()
    {
        GetWindow<ListViewExample>().Show();
    }

    private void OnEnable()
    {
        SetGradient();
        const int itemCount = 50;
        items = new List<CharacterInfo>(itemCount);
        for (int i = 1; i <= itemCount; i++)
        {
            CharacterInfo character = new CharacterInfo { name = $"Character {i}", maxHp = 100 };
            character.currentHp = character.maxHp;
            items.Add(character);
        }

        Func<VisualElement> makeItem = () =>
        {
            var characterInfoVisualElement = new CharacterInfoVisualElement();
            return characterInfoVisualElement;
        };

        Action<VisualElement, int> bindItem = (e, i) => BindItem(e as CharacterInfoVisualElement, i);
        int itemHeight = 55;

        listView = new ListView(items, itemHeight, makeItem, bindItem);
        listView.showBorder = true;
        rootVisualElement.Add(listView);
    }

    private void SetGradient() { /* Gradient 설정 코드 */ }

    private void BindItem(CharacterInfoVisualElement elem, int i) { /* 데이터 바인딩 코드 */ }

    // 기타 메서드...
}

[Serializable]
public class CharacterInfo
{
    public string name;
    public int maxHp;
    public int currentHp;
}

public class CharacterInfoVisualElement : VisualElement
{
    public CharacterInfoVisualElement() { /* UI 요소 생성 코드 */ }
}

사용 방법

위 코드를 작성한 후, Unity 에디터에서 메뉴를 열고 Window > ListView Custom Item를 선택하여 생성된 리스트 뷰를 확인할 수 있습니다.

추가 리소스

  • 리스트 및 트리 뷰 생성
  • ListView 런타임 UI 생성
  • 더 많은 예제와 튜토리얼은 Unity 공식 웹사이트를 참조하십시오.

결론

이 가이드를 통해 Unity의 UI 툴킷을 이용하여 복합 리스트 뷰를 생성하는 방법을 배웠습니다. 이제 여러분은 다양한 캐릭터 정보를 표시하고, 사용자 인터랙션을 통해 동적으로 데이터를 수정할 수 있습니다. 이를 바탕으로 더 복잡한 UI를 구성해보세요!