UI 툴킷에서 가장 기본적인 빌딩 블록은 시각적 요소입니다.시각적 요소는 부모-자식 관계를 가진 계층 구조 트리에 정렬됩니다.이를 시각적 트리라고 합니다.
아래의 다이어그램은 시각적 트리의 단순화된 예와 UI 툴킷에서 렌더링된 결과를 보여줍니다
다이어그램의 루트는 에디터 UI의 EditorWindow.rootVisualElement
와 런타임 UI의 UIDocument.rootVisualElement
를 나타냅니다.
VisualElement
클래스는 시각적 트리의 모든 노드에 대한 기반입니다.VisualElement
기본 클래스에는 스타일, 레이아웃 데이터, 이벤트 핸들러와 같은 프로퍼티가 포함되어 있습니다.시각적 요소는 자식 및 자손 시각적 요소를 가질 수 있습니다.예를 들어 위의 다이어그램에서 첫 번째 Box
시각적 요소에는 세 개의 자식 시각적 요소(Label
, Checkbox
, Slider
)가 있습니다.
인라인 스타일과 스타일시트를 통해 시각적 요소의 모양을 커스터마이즈할 수 있습니다.또한 이벤트 콜백을 사용하여 시각적 요소의 동작을 수정할 수 있습니다.
VisualElement
는 컨트롤과 같은 추가 동작 및 기능을 정의하는 서브 클래스로 파생됩니다.UI 툴킷에는 특수한 동작이 있는 다양한 빌트인 컨트롤이 포함되어 있습니다.컨트롤은 그래픽 사용자 인터페이스의 요소입니다.예를 들어 다음 항목은 빌트인 컨트롤로 사용할 수 있습니다.
컨트롤에는 컨트롤의 시각적 객체와 컨트롤을 작동하고 상호 작용하기 위한 스크립트화된 로직이 포함됩니다.컨트롤은 하나의 시각적 요소 또는 여러 시각적 요소의 조합으로 구성될 수 있습니다.예를 들어, 토글 컨트롤은 다음 세 가지 요소를 포함합니다.
토글 컨트롤의 구현은 컨트롤의 동작을 정의합니다.이는 토글 상태가 true인지 false인지에 대한 내부 값을 가집니다.이 로직은 값이 변경되면 체크 표시 이미지를 표시하거나 숨깁니다.
또한 시각적 요소를 서로 결합하고 동작을 수정하여 커스텀 컨트롤을 생성할 수도 있습니다.
UI에서 컨트롤을 사용하려면 이를 시각적 트리에 추가합니다.
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.