Относительное и абсолютное позиционирование

Этот пример демонстрирует разницу между относительным и абсолютным позиционированием. Этот пример также демонстрирует, как использовать C# и UXML/USS для добавления и стилизации UI контроллеров.

Примерный обзор

В примере используется автоматическая система расположения для добавления блоков в Редактор и время выполнения UI. Один блок демонстрирует относительное смещение 25 px, в то время как другой блок демонстрирует абсолютное положение 25 px, 25 px.

Пример структурирует Редактор UI со скриптом C# и время выполнения UI с UXML и CSS.

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

• Визуальное дерево
• Системы координат и позиционирования
• UXML
• USS

Создать пример для редактора UI

Создайте собственное окно редактора и добавьте в него все прямоугольники с помощью скрипта C#: четыре прямоугольника с серым фоном для сравнения, один с чёрным фоном, размещённый через абсолютное позиционирование, и один с фиолетовым фоном, размещённый через относительное позиционирование.

1. Создайте проект Unity с любым шаблоном.

2. Щелкните правой кнопкой мыши в окне Project, затем выберите Создать > UI Toolkit > Окно редактора.

3. В поле C# окна UI Toolkit Редактора Создатель Окна введите PositioningTestWindow.

4. Снимите флажки UXML и USS.

5. Выберите Подтвердите. Это создаст файл C# с именем PositioningTestWindow.cs.

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 < 2; i++)
           {
               var temp = new VisualElement();
               temp.style.width = 70;
               temp.style.height = 70;
               temp.style.marginBottom = 2;
               temp.style.backgroundColor = Color.gray;
               this.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);
           this.rootVisualElement.Add(relative);
   
           for (int i = 0; i < 2; i++)
           {
               var temp = new VisualElement();
               temp.style.width = 70;
               temp.style.height = 70;
               temp.style.marginBottom = 2;
               temp.style.backgroundColor = Color.gray;
               this.rootVisualElement.Add(temp);
           }
   
           // 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;
           this.rootVisualElement.Add(absolutePositionElement);
       }
   }
   

7. Чтобы посмотреть пример, в меню выберите Окно > UI Toolkit > Окно теста позиционирования.

Создать пример для времени выполнения UI

1. Создайте файл USS с именем PositioningTest.uss со следующим содержимым:

   .box {
       height: 70px;
       width: 70px;
       margin-bottom: 2px;
       background-color: gray;
   }
   #relative{
       width: 70px;
       height: 70px;
       background-color: purple;
       left: 25px;
       margin-bottom: 2px;
       position:relative;
   }
   #absolutePositionElement{
       left: 25px;
       top: 25px;
       width: 70px;
       height: 70px;
       background-color: black;
       position: absolute;
   }
   

2. Создайте документ UXML с именем PositioningTest.uxml со следующим содержанием:

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
   xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements"
   editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd"
   editor-extension-mode="False">
       <Style src="PositioningTest.uss"/>
       <ui:VisualElement class="box"/>
       <ui:VisualElement  class="box"/>
       <ui:Label text="Relative\nPos\n25, 0" name="relative" />
       <ui:VisualElement  class="box"/>
       <ui:VisualElement  class="box"/>
       <ui:Label text="Absolute\nPos\n25, 25" name="absolutePositionElement" />
   </ui:UXML>
   

3. Создайте скрипт C# с именем PositioningTestRuntime.cs со следующим содержанием:

   using UnityEngine;
   using UnityEngine.UIElements;
   
   public class PostionTestRuntime : MonoBehaviour
   {
       void OnEnable()
       {
           GetComponent<UIDocument>();
       }
      }
   

4. Щелкните правой кнопкой мыши окно Hierarchy и выберите UI Toolkit > UI Документ.

5. В окне Inspector UI Документавыберите UI Документ > Исходный ресурс > PositioningTest.

6. В окне Inspector документа UIвыберите Добавить компонент > Позиционирование теста Runtime.

7. Введите режим воспроизведения и настройте разрешение по мере необходимости, чтобы увидеть результат.

Дополнительные ресурсы

• Группы
• Порядок игры
• Двигатель макета