Unity UI Toolkit ListView 기본 사용법

UI Toolkit으로 스크롤되는 런타임 UI를 만들기 위해서 ListView 컨테이너를 써 봤다. 찾아본 자료들은 조금 복잡한 예시가 많아서 최대한 기초적인 사용법만을 정리해봤다. 좀 더 구체적인 예시는 Unity Documentation에서 볼 수 있다.

아래와 같은 리스트를 ListView로 만들어 볼 것이다.

먼저 UI Document를 생성해서 다음과 같이 구성했다. 배경색을 주기 위해서 Background를 만들고, 그 안에 PlayerListView를 만들었다. 이 예시에서 따로 설정해야 하는 요소는 없다.

UXML은 아래와 같다.

리스트에 나열할 데이터를 결정한다. 플레이어의 이름과 레벨을 저장한다고 가정하고, 아래와 같이 클래스를 만들었다. 꼭 ScriptableObject일 필요는 없다.

UI Document 컴포넌트를 찾아서 그 안의 ListView를 건드려야 한다. 같은 게임 오브젝트에 이 ListMenuController.cs 스크립트를 추가한다.

이렇게 ListView를 찾은 뒤, 추가할 데이터를 IList 컬렉션에 담아 itemsSource에 할당한다. 데이터는 생성하거나 네트워크에서 받아오는 등의 경우가 있겠지만, 이 예시에서는 수동으로 5개를 생성했다.

단, itemsSource를 변경했을 때 데이터를 바인딩하는 과정이 어느 시점에 이루어지는 지 모르겠다. 만약 제대로 적용되지 않는다면 콜백을 모두 지정한 뒤에 itemsSource를 변경하자.

다음으로 필요한 콜백을 지정해줘야 한다. 다음의 콜백들을 지정하는 것이 좋다.

일단 이 예시에서는 makeItem과 bindItem만 지정하는 것으로 한다.

makeItem은 각 데이터에 대한 템플릿을 생성하는 콜백이다. Func<VisualElement> 형태로, VisualElement를 생성해서 반환해야 한다.

위와 같이 하나의 VisualElement 안에 이름과 레벨을 표시할 Label을 추가하여 반환했다. 목록의 각 데이터에 대해서 생성될 것이다.

bindItem은 각 데이터에 대해 생성된 VisualElement와 그 인덱스를 통해서 실제 값을 지정하는 콜백이다. Action<VisualElement, int> 형태이다.

위와 같이 인덱스로 데이터에 접근하여 각 레이블의 텍스트 값을 바꿔주었다.

다음으로는 꼭 지정해야 하는 것은 아니지만, 편하게 보기 위해서 fixedItemHeight를 지정했다. 이 값은 UI Builder에서 ListView의 Attributes 안에서도 설정할 수 있다.

이대로 UI를 띄워보면 아래처럼 리스트를 만들 수 있다. (300x300 해상도이다)