C# 스크립트로 UI 구조화

기술 사용자는 C# 스크립트에서 직접 UI의 레이아웃을 정의할 수 있습니다.

USS 파일에서 컨트롤의 모양을 정의하거나 C# 스크립트에서 컨트롤의 스타일 프로퍼티를 수정할 수 있습니다.

컨트롤은 인터랙티브형이며 사용자가 변경할 수 있는 값을 나타냅니다.예를 들어, FloatField는 플로트 값을 나타냅니다.C# 스크립트를 작성하여 컨트롤 값을 변경하거나, 콜백을 등록하거나 데이터 바인딩을 적용할 수 있습니다.

C# 스크립트를 사용하여 UI에 컨트롤 추가

UI에서 컨트롤을 사용하려면 시각적 트리에 컨트롤을 추가합니다.

다음 예제는 기존 시각적 트리에 버튼 컨트롤을 추가하는 예제입니다.

var newButton = new Button("Click me!");
rootVisualElement.Add(newButton);

UI 계층 구조에 컨트롤을 추가할 때 레이아웃 엔진이 크기와 포지션을 자동으로 처리합니다.또한 시각적 요소의 크기와 포지션을 오버라이드할 수도 있습니다.

컨트롤 값 변경

컨트롤의 값에 액세스하거나 변경하려면 컨트롤의 value 프로퍼티를 사용합니다.

다음 예제에서는 토글 컨트롤과 버튼 컨트롤을 생성합니다.버튼을 클릭하면 토글의 값이 플립됩니다.

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
rootVisualElement.Add(m_MyToggle);

// Create button to flip the toggle's value
Button button01 = new Button() { text = "Toggle" };
button01.clicked += () =>
{
    m_MyToggle.value = !m_MyToggle.value;
};
rootVisualElement.Add(button01);

특정 컨트롤의 프로퍼티에 대한 자세한 내용은 UI 툴킷 빌트인 컨트롤 레퍼런스를 참조하십시오.

콜백 등록

value 프로퍼티를 가진 컨트롤은 값이 변경되면 이벤트를 전송합니다.이 이벤트를 수신하도록 콜백을 등록할 수 있습니다.

다음 예제는 토글 컨트롤을 만들고 콜백을 등록하는 예제입니다.

// Create a toggle and register callback
m_MyToggle = new Toggle("Test Toggle") { name = "My Toggle" };
m_MyToggle.RegisterValueChangedCallback((evt) => { Debug.Log("Change Event received"); });
rootVisualElement.Add(m_MyToggle);

콜백과 이벤트에 대해 자세히 알아보려면 이벤트 처리를 참조하십시오.

데이터 바인딩 적용

컨트롤을 오브젝트 또는 직렬화된 프로퍼티에 바인딩할 수 있습니다.예를 들어 FloatField 컨트롤을 ’MonoBehaviour’에 속하는 public 플로트 변수에 바인딩할 수 있습니다.컨트롤이 프로퍼티에 바인딩되면 자동으로 프로퍼티 값을 표시합니다.컨트롤을 수정하면 프로퍼티 값이 업데이트됩니다.

마찬가지로 코드를 통해 프로퍼티 값이 변경되면 UI에 업데이트된 값이 표시됩니다.이 양방향 연결은 커스텀 인스펙터 창을 만들 때 유용합니다.

데이터 바인딩에 대한 자세한 내용은 SerializedObject 데이터 바인딩을 참조하십시오.

모든 컨트롤을 바인딩할 수 있는 것은 아닙니다.빌트인 컨트롤 리스트와 바인딩 지원 여부는 UI 툴킷 빌트인 컨트롤 레퍼런스를 참조하십시오.

컨트롤의 읽기 전용 자식 프로퍼티에 액세스

일부 컨트롤에는 읽기 전용 자식 요소가 있습니다. 예를 들면 ListView 컨트롤에는 ScrollView 자식이 있습니다. UQuery를 사용하면 자식의 프로퍼티에 액세스하고 값을 오버라이드할 수 있습니다.

다음 예시에서는 ScrollView 자식의 mouseWheelScrollSize 프로퍼티를 오버라이드하여 ListView 컨트롤의 스크롤 속도를 변경합니다.

var scrollView = listView.Q<ScrollView>();
scrollView.mouseWheelScrollSize = 55;

컨트롤 상태 관리

컨트롤에는 C# 스크립트에서 관리할 수 있는 다양한 상태가 있습니다.예를 들어 컨트롤을 활성화 또는 비활성화할 수 있습니다.

다음 예제에서는 토글 컨트롤과 버튼 컨트롤을 생성합니다.버튼을 클릭하면 토글이 비활성화됩니다.

// Create a toggle.
Toggle myToggle = new Toggle("A Toggle");

// Create a button to disable the toggle.
Button button01 = new Button();
button01.text = "Button01";
button01.RegisterCallback<ClickEvent>(evt =>
{
    myToggle.SetEnabled(false);
});

유사 클래스를 사용하여 USS에서 상태가 변경될 때 시각적 피드백 변경을 구현할 수도 있습니다.예를 들어 토글을 비활성화하려면 disabled 유사 상태가 있는 선택자를 사용하십시오.

.unity-button:disabled
{
    background-color:#000000;
}

추가 리소스

• UXML로 UI 구조화
• 요소를 사용한 작업