Relative and absolute positioning C# example

This example demonstrates the difference between relative and absolute positioning.

개요 예시

The example uses the automatic layout system to add boxes to a window and calculate their positions. One box demonstrates a relative offset of 25 px, while another box demonstrates the absolute position of 25 px, 25 px.

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

선행 조건

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

• 시각적 트리
• 좌표 및 포지션 시스템

Create the example with a C# script

Create a custom Editor window and add all the boxes with a C# script: four boxes with gray backgrounds for comparison purposes; one box with black background with the absolute position; one box with purple background with the relative position.

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

2. 프로젝트(Project) 창을 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.

3. UI Toolkit Editor Window Creator 창의 C# 상자에 PositioningTestWindow를 입력합니다.

4. UXML 및 USS 체크박스를 지웁니다.

5. Confirm을 선택합니다.그러면 PositioningTestWindow.cs라는 C# 파일이 생성됩니다.

6. PositioningTestWindow.cs를 다음 콘텐츠로 바꿉니다.

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   
   public class PositioningTestWindow : EditorWindow
   {
       [MenuItem("Window/UI Toolkit/Positioning Test Window")]
       public static void ShowExample()
       {
           var wnd = GetWindow<PositioningTestWindow>();
           wnd.titleContent = new GUIContent("Positioning Test Window");
       }
   
       public void CreateGUI()
       {
           for (int i = 0; i < 4; i++)
           {
               var temp = new VisualElement();
               temp.style.width = 70;
               temp.style.height = 70;
               temp.style.marginBottom = 2;
               temp.style.backgroundColor = Color.gray;
               rootVisualElement.Add(temp);
           }
   
           // Relative positioning
           var relative = new Label("Relative\nPos\n25, 0");
           relative.style.width = 70;
           relative.style.height = 70;
           relative.style.left = 25;
           relative.style.marginBottom = 2;
           relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
           rootVisualElement.Add(relative);
   
           // Absolute positioning
           var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
           absolutePositionElement.style.position = Position.Absolute;
           absolutePositionElement.style.top = 25;
           absolutePositionElement.style.left = 25;
           absolutePositionElement.style.width = 70;
           absolutePositionElement.style.height = 70;
           absolutePositionElement.style.backgroundColor = Color.black;
           rootVisualElement.Add(absolutePositionElement);
       }
   }
   

7. 예시를 보려면 메뉴에서 Window > UI Toolkit > *Positioning Test Window를 선택합니다.

추가 리소스

• 패널
• 드로잉 순서