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 툴킷 빌트인 컨트롤 레퍼런스를 참조하십시오.

컨트롤 상태 관리

컨트롤에는 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 구조화