Version: 2023.2
언어: 한국어
커스텀 컨트롤에 대한 커스텀 스타일 생성
종횡비 커스텀 컨트롤 생성

여러 창 사이에 드래그 앤 드롭 목록과 트리 뷰 생성

버전: 2023.2+

드래그 앤 드롭은 UI 디자인의 일반적인 기능입니다. UI 툴킷을 사용하면 커스텀 에디터 창이나 Unity에서 빌드한 애플리케이션 내에서 드래그 앤 드롭 UI를 만들 수 있습니다. 이 예시에서는 커스텀 에디터 창에서 ListView와 TreeView를 사용하여 드래그 앤 드롭 UI를 만드는 방법을 보여 줍니다.

개요 예시

이 예시에서는 커스텀 에디터 창 안에 로비와 두 개의 팀이 포함된 분할 창을 만듭니다. 로비는 ListView로 생성됩니다. 데모를 위해 한 팀은 MultiColumnListView로 만들고 다른 팀은 TreeView로 만듭니다. 이 예시에서는 토글을 사용하여 드래그 앤 드롭 작업을 활성화 및 비활성화합니다. 활성화하면 아래와 같이 플레이어를 드래그하여 순서를 변경하고 로비 목록에서 팀 목록으로 옮길 수 있습니다.

드래그 앤 드롭 UI 프리뷰
드래그 앤 드롭 UI 프리뷰

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

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

플레이어 데이터 생성

먼저 로비에 있는 플레이어 목록을 관리할 에셋을 생성합니다. 플레이어 데이터를 나타내는 PlayerData의 구조체를 정의할 스크립트를 만듭니다. 이 구조체에는 문자열 이름, 정수, Texture2D 오브젝트 아이콘이라는 세 가지 필드가 있습니다. 필드를 [SerializeField] 속성으로 표시하여 값을 직렬화하고 Unity의 데이터 포맷으로 저장할 수 있도록 합니다. 드래그 앤 드롭 UI의 플레이어 데이터를 관리할 Collection Database 에셋을 생성합니다. Collection Database 에셋에는 Unity 에디터에서 설정할 수 있는 PlayerData 오브젝트의 직렬화된 목록이 포함되어 있습니다.

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

  2. 프로젝트 창의 Assets 폴더에서 스크립트 파일을 저장할 Scripts라는 폴더를 생성합니다.

  3. Scripts 폴더에서 Data라는 폴더를 생성합니다.

  4. 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)]

  5. 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)]

  6. Assets 폴더에서 Resources라는 폴더를 생성합니다.

  7. Resources 폴더에서 오른쪽 클릭하고 Create > Collection Database를 선택합니다. 이렇게 하면 새로운 Collection Database 에셋이 생성됩니다.

  8. Collection Database 에셋의 인스펙터 창에서 Lobby 목록에 플레이어를 몇 명 추가합니다. 플레이어는 원하는 만큼 추가할 수 있습니다.

커스텀 컨트롤을 생성하여 데이터 표시

PlayerDataElement 및 PlayerItemView라는 커스텀 컨트롤을 생성하여 플레이어 데이터를 표시할 수 있습니다. PlayerItemView 컨트롤은 PlayerData 오브젝트에 데이터 컨텍스트로 바인딩됩니다.

  1. Scripts 폴더에서 UI라는 폴더를 생성합니다.

  2. 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)]

  3. 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로 설정합니다.

  1. Assets 폴더에서 UXML 및 USS 파일을 저장할 UI라는 폴더를 생성합니다.

  2. 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)]

  3. 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)]

  4. 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)]

드래그 앤 드롭 작업 구현

로비 및 팀 목록을 설정하는 스크립트를 생성하고 앞서 생성한 플레이어 데이터에 바인딩합니다. 이 스크립트는 로비와 팀 목록 간의 드래그 앤 드롭 작업도 구현합니다.

  1. Scripts 폴더에서 Controllers라는 폴더를 생성합니다.

  2. 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를 표시할 커스텀 에디터 창을 생성합니다.

  1. Assets 폴더에서 Editor라는 폴더를 생성합니다.

  2. 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명의 플레이어를 추가할 수 있습니다.

  1. 메인 메뉴에서 Collection Tests > List DragAndDrop Window를 선택합니다.
  2. List DragAndDrop Test 창에서 Lobby Owner 체크박스를 선택합니다.
  3. Lobby 목록에서 플레이어를 드래그하여 순서를 변경합니다.
  4. 플레이어를 Lobby 목록에서 팀 목록으로 드래그합니다.
  5. Red 팀 목록의 플레이어를 드래그하여 계층 구조를 변경합니다.

추가 리소스

커스텀 컨트롤에 대한 커스텀 스타일 생성
종횡비 커스텀 컨트롤 생성