버전: 6000+
ListView 컨트롤은 목록을 생성하는 가장 효율적인 방법입니다. 이 예시는 런타임 바인딩을 사용하여 ListView를 목록에 바인딩하는 방법을 보여 줍니다. 런타임 바인딩은 런타임과 에디터 UI를 모두 지원합니다. 이 예시에서는 데모 목적으로 에디터 창에 ListView를 표시합니다.
이 예시에서는 ListView와 목록을 생성합니다. ListView를 목록에 바인딩하려면 ListView의 바인딩 데이터 소스를 목록이 포함된 프로퍼티로 설정합니다.
이 예제에서 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.
Item 오브젝트 목록이 있는 예시 List 오브젝트를 만듭니다. 각 Item에는 name 및 enabled 프로퍼티가 포함되어 있습니다.
runtime-binding-listview라는 폴더를 만듭니다.runtime-binding-listview 폴더에 Scripts라는 이름의 폴더를 만들어 모든 C# 스크립트를 저장합니다.Scripts 폴더에 다음 내용을 포함하는 ExampleItemObject.cs라는 이름의 C# 스크립트를 생성합니다. using System;
using System.Collections.Generic;
using UnityEngine;
public class ExampleItemObject
{
public List<Item> items = new();
public void Reset()
{
items = new List<Item>{
new() { name = "Use Local Server", enabled = false },
new() { name = "Show Debug Menu", enabled = false },
new() { name = "Show FPS Counter", enabled = true },
};
}
public struct Item
{
public bool enabled;
public string name;
}
}
UI 빌더에서 목록 항목의 템플릿을 생성합니다. 각 항목에는 Toggle과 TextField가 포함됩니다. 이를 Item 오브젝트의 enabled 및 name 프로퍼티에 바인딩합니다.
runtime-binding-listview 폴더에 UXML이라는 이름의 폴더를 만듭니다.
UXML 폴더에 ListViewItem.uxml이라는 이름의 UXML 파일을 만듭니다.
ListViewItem.uxml 파일을 더블 클릭하여__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더에서 엽니다.
계층 구조 패널에서 VisualElement를 추가합니다.
VisualElement의 자식으로 Toggle을 추가합니다.
TextField를 VisualElement 자식으로 추가합니다.
Toggle 및 TextField에 대한 레이블 텍스트를 제거합니다.
VisualElement의 Flex direction을 Row로 설정합니다.
Toggle의 인스펙터 패널에서 다음을 수행합니다.
Value를 오른쪽 클릭하고 Add binding을 선택합니다.
Add Binding 창에서 Data Source Path를 enabled로 설정합니다.
TextField의 인스펙터 패널에서 다음을 수행합니다.
name로 설정합니다.UXML 파일을 저장합니다. 완료된 UXML 파일은 다음과 같습니다.
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:VisualElement name="VisualElement" style="flex-direction: row;">
<ui:Toggle>
<Bindings>
<ui:DataBinding property="value" data-source-path="enabled" />
</Bindings>
</ui:Toggle>
<ui:TextField placeholder-text="filler text">
<Bindings>
<ui:DataBinding property="value" data-source-path="name" />
</Bindings>
</ui:TextField>
</ui:VisualElement>
</ui:UXML>
UI 빌더에서 ListView UI를 만들고 항목 템플릿을 ListViewItem.uxml로 설정합니다.
UXML 폴더에 UIListView.uxml이라는 이름의 UXML 파일을 만듭니다.
UIListView.uxml 파일을 더블 클릭하여 UI 빌더에서 엽니다.
계층 구조 패널에서 ListView를 추가합니다.
ListView의 인스펙터 패널에서 다음을 수행합니다.
Virtualization Method를 Dynamic Height로 설정합니다.
Reorder Mode를 Animated로 설정합니다.
Item Template을 ListViewItem.uxml로 설정합니다.
Binding Source Selection Mode를 Auto Assign으로 설정합니다.
Reorderable 체크박스를 선택합니다.
Show Add Remove Footer 체크박스를 선택합니다.
Header Title을 Items로 설정합니다.
Show Foldout Header 체크박스를 선택합니다.
UXML 파일을 저장합니다. 완료된 UXML 파일은 다음과 같습니다.
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:ListView binding-source-selection-mode="AutoAssign" item-template="ListViewItem.uxml" />
</ui:UXML>
ListView가 포함된 커스텀 에디터 창을 만들고 List의 items 프로퍼티에 바인딩합니다. 이 예시는 C# 스크립트에서 바인딩 소스를 설정합니다. 다음과 같이 ListView 요소 내에서 UXML 파일의 바인딩 소스를 수동으로 설정할 수도 있습니다.
<ui:ListView>
<Bindings>
<ui:DataBinding property="itemsSource" data-source-path="items" />
</Bindings>
</ui:ListView>
Scripts 폴더에 Editor이라는 이름의 폴더를 만듭니다.Editor 폴더에 다음 내용을 포함하는 ListViewTestWindow.cs라는 이름의 C# 스크립트를 생성합니다. using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor;
using UnityEditor.UIElements;
using System.Collections.Generic;
using Unity.Properties;
internal class ListViewTestWindow : EditorWindow
{
// This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
// If you want to set them in the C# script, declare an itemLayout field of type VisualTreeAsset
// and then set the "Item Layout" to "ListViewItem.uxml" in the Inspector window.
//[SerializeField] private VisualTreeAsset itemLayout;
[SerializeField] private VisualTreeAsset editorLayout;
ExampleItemObject m_ExampleItemObject;
[MenuItem("Window/ListViewTestWindow")]
static void Init()
{
ListViewTestWindow window = EditorWindow.GetWindow<ListViewTestWindow>();
window.Show();
}
void CreateGUI()
{
m_ExampleItemObject = new();
editorLayout.CloneTree(rootVisualElement);
var listView = rootVisualElement.Q<ListView>();
// This example sets the itemTemplate and bindingSourceSelectionMode in the UXML file.
// You can also set them in the C# script like the following:
// listView.itemTemplate = itemLayout;
// listView.bindingSourceSelectionMode = BindingSourceSelectionMode.AutoAssign;
// Set the binding source to the ExampleItemObject instance.
listView.dataSource = m_ExampleItemObject;
// Set the itemsSource binding to the items property of the List object.
// You can also set the itemsSource binding manually in the UXML file and comment out this line.
// Refer to the next section for how to set binding in UXML.
listView.SetBinding("itemsSource", new DataBinding() {dataSourcePath = new PropertyPath("items")});
m_ExampleItemObject.Reset();
}
}
에디터 창에는 ExampleItemObject.cs에 정의된 항목에 바인딩된 ListView가 표시됩니다. ExampleItemObject.cs의 Item에 대한 enabled 또는 name 프로퍼티 값을 업데이트하면 변경 사항이 ListView에 자동으로 반영됩니다.