여러 창 사이에 드래그 앤 드롭 목록과 트리 뷰 생성
버전: 2023.2+
드래그 앤 드롭은 UI 디자인의 일반적인 기능입니다. UI 툴킷을 사용하면 커스텀 에디터 창이나 Unity에서 빌드한 애플리케이션 내에서 드래그 앤 드롭 UI를 만들 수 있습니다. 이 예시에서는 커스텀 에디터 창에서 ListView와 TreeView를 사용하여 드래그 앤 드롭 UI를 만드는 방법을 보여 줍니다.
개요 예시
이 예시에서는 커스텀 에디터 창 안에 로비와 두 개의 팀이 포함된 분할 창을 만듭니다. 로비는 ListView로 생성됩니다. 데모를 위해 한 팀은 MultiColumnListView로 만들고 다른 팀은 TreeView로 만듭니다. 이 예시에서는 토글을 사용하여 드래그 앤 드롭 작업을 활성화 및 비활성화합니다. 활성화하면 아래와 같이 플레이어를 드래그하여 순서를 변경하고 로비 목록에서 팀 목록으로 옮길 수 있습니다.
이 예시에서 생성하는 완성된 파일은 GitHub 저장소에서 찾을 수 있습니다.
선행 조건
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.
플레이어 데이터 생성
먼저 로비에 있는 플레이어 목록을 관리할 에셋을 생성합니다. 플레이어 데이터를 나타내는 PlayerData의 구조체를 정의할 스크립트를 만듭니다. 이 구조체에는 문자열 이름, 정수, Texture2D 오브젝트 아이콘이라는 세 가지 필드가 있습니다. 필드를 [SerializeField] 속성으로 표시하여 값을 직렬화하고 Unity의 데이터 포맷으로 저장할 수 있도록 합니다. 드래그 앤 드롭 UI의 플레이어 데이터를 관리할 Collection Database 에셋을 생성합니다. Collection Database 에셋에는 Unity 에디터에서 설정할 수 있는 PlayerData 오브젝트의 직렬화된 목록이 포함되어 있습니다.
템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
프로젝트 창의 Assets 폴더에서 스크립트 파일을 저장할
Scripts라는 폴더를 생성합니다.Scripts 폴더에서
Data라는 폴더를 생성합니다.-
Data 폴더에서 다음 콘텐츠가 포함된
PlayerData.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Data/PlayerData.cs)]
-
Data 폴더에서 다음 콘텐츠가 포함된
CollectionDatabase.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Data/CollectionDatabase.cs)]
Assets 폴더에서
Resources라는 폴더를 생성합니다.Resources 폴더에서 오른쪽 클릭하고 Create > Collection Database를 선택합니다. 이렇게 하면 새로운 Collection Database 에셋이 생성됩니다.
Collection Database 에셋의 인스펙터 창에서 Lobby 목록에 플레이어를 몇 명 추가합니다. 플레이어는 원하는 만큼 추가할 수 있습니다.
커스텀 컨트롤을 생성하여 데이터 표시
PlayerDataElement 및 PlayerItemView라는 커스텀 컨트롤을 생성하여 플레이어 데이터를 표시할 수 있습니다. PlayerItemView 컨트롤은 PlayerData 오브젝트에 데이터 컨텍스트로 바인딩됩니다.
Scripts 폴더에서
UI라는 폴더를 생성합니다.-
UI 폴더에서 다음 콘텐츠가 포함된
PlayerDataElement.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/UI/PlayerDataElement.cs)]
-
UI 폴더에서 다음 콘텐츠가 포함된
PlayerItemView.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/UI/PlayerItemView.cs)]
UI 스타일 및 레이아웃 정의
USS 파일을 생성하여 UI의 스타일을 정의할 수 있습니다. 두 개의 UXML 문서를 생성하여 플레이어 아이템 뷰와 메인 뷰에 대한 UI 레이아웃을 정의할 수 있습니다. 메인 뷰에서 목록 항목을 드래그하여 순서를 변경하려면 reorderable 속성을 ListView, MultiColumnListView, TreeView에 대해 true로 설정합니다.
Assets 폴더에서 UXML 및 USS 파일을 저장할
UI라는 폴더를 생성합니다.-
UI 폴더에서 다음 콘텐츠가 포함된
main.uss라는 USS 파일을 생성합니다.[!code-css[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/main.uss)]
-
UI 폴더에서 다음 콘텐츠가 포함된
PlayerItemView.uxml이라는 UXML 파일을 생성합니다.[!code-css[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/PlayerItemView.uxml)]
-
UI 폴더에서 다음 콘텐츠가 포함된
ListDragAndDropTestWindow.uxml이라는 UXML 파일을 생성합니다.[!code-xml[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/UI/ListDragAndDropTestWindow.uxml)]
드래그 앤 드롭 작업 구현
로비 및 팀 목록을 설정하는 스크립트를 생성하고 앞서 생성한 플레이어 데이터에 바인딩합니다. 이 스크립트는 로비와 팀 목록 간의 드래그 앤 드롭 작업도 구현합니다.
Scripts 폴더에서
Controllers라는 폴더를 생성합니다.-
Controllers 폴더에서 다음 콘텐츠가 포함된
LobbyController.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Scripts/Controller/LobbyController.cs)]
커스텀 에디터 창 생성
드래그 앤 드롭 UI를 표시할 커스텀 에디터 창을 생성합니다.
Assets 폴더에서
Editor라는 폴더를 생성합니다.-
Editor 폴더에서 다음 콘텐츠가 포함된
ListDragAndDropTestWindow.cs라는 C# 스크립트를 생성합니다.[!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-drag-and-drop-list-treeview/Editor/ListDragAndDropTestWindow.cs)]
UI 테스트
테스트를 수행하려면 Lobby Owner 체크박스가 선택되어 있을 때 Lobby 목록에서 플레이어의 순서를 변경하고 Lobby 목록에서 팀 목록으로 플레이어를 옮깁니다. Red 팀 목록에서 플레이어 계층 구조를 변경할 수도 있습니다. LobbyController.cs 스크립트에 설정된 조건에 따라 각 팀에 최대 3명의 플레이어를 추가할 수 있습니다.
- 메인 메뉴에서 Collection Tests > List DragAndDrop Window를 선택합니다.
- List DragAndDrop Test 창에서 Lobby Owner 체크박스를 선택합니다.
- Lobby 목록에서 플레이어를 드래그하여 순서를 변경합니다.
- 플레이어를 Lobby 목록에서 팀 목록으로 드래그합니다.
- Red 팀 목록의 플레이어를 드래그하여 계층 구조를 변경합니다.