Начните с UI Builder

Хотите узнать, как создать UI с UI Builder? Используйте этот пример, чтобы начать.

Чтобы создать UI в UI Builder:

1. Создать новый Документ UI (UXML).
2. Добавление элементов для создания иерархии UI.
3. Настройка атрибутов и свойств стиля в Inspector.
4. Когда более чем одному элементу требуются одинаковые свойства стиля, создает таблицы стилей USS и селекторы.
5. Проверьте свой UI и если вы удовлетворены результатами, извлекает свойства встроенного стиля в классы USS.
6. Сохраните Документ UI (UXML).

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

Перед началом работы ознакомьтесь со следующими положениями:

• Введение в визуальные элементы и визуальное дерево
• Введение в UXML
• Введение в USS
• Обзор интерфейса UI Builder

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

В этом примере создается основное представление для примера Создание списка представлений в режиме выполнения UI. Создается корневой элемент в качестве фона с двумя контейнерами. Один контейнер содержит список имен персонажей, а другой содержит детали персонажа. В контейнере деталей персонажа вы добавляете кадры фона и переднего плана. Наконец, вы добавляете две метки для имени персонажа. В этом примере не будет создана запись списка имен персонажей UI.

Создать корневой элемент

Создайте новый проект, а затем создайте корневой визуальный элемент, который покрывает весь экран. Настройте корневой элемент на цвет фона и центрируйте все дочерние элементы в середине экрана.

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

2. Выберите Окно > UI Toolkit > UI Builder.

3. В окне UI Builder в верхнем левом углу окна Видовой проем выберите Файл > Новые для создания нового документа UXML.

   

4. Назовите его MainView.uxml и сохраните.

5. Перетащите VisualElement из Библиотеки в панель Hierarchy.

   

   Тип: Вы также можете дважды щелкнуть управление, чтобы добавить его в Hierarchy Группа.

6. Выберите элемент из панели Hierarchy.

7. В панели Inspector убедитесь, что Flex > Grow является 1. Это установит свойство flex-grow на 1, так что оно будет покрывать весь экран.

   

8. Чтобы центрировать все дочерние элементы, установите Align Items и Justify Content на Center.

   

9. Установить фон > цвет до #732526.

   Примечание: По умолчанию значение Альфы для цветов 0, что делает их полностью прозрачными. Чтобы сделать цвет непрозрачным, установите значение Альфы 255.

   

Создать родительский контейнер

Создайте новый VisualElement под корневым элементом. Этот элемент становится родительским контейнером для левой и правой секций UI.

1. Перетащите VisualElement из Библиотеки в корень VisualElement в панели Hierarchy.

   

2. Выберите элемент из панели Hierarchy.

3. В панели Inspector установите Flex > Направление на row.

4. Установить Flex > Увеличить до 0.

5. Установите Размер > Высота до 350 пикселей.

   

Создание контейнера списка имен символов

Добавьте ListView в качестве дочернего элемента контейнера для хранения имен символов.

1. Перетащить ListView от Библиотека к контейнеру VisualElement в 2000 году Hierarchy Группа.

2. Выберите элемент из панели Hierarchy.

3. В панели Inspector установите Имя на CharacterList.

   

4. Установите Размер > Ширина до 230 пикселей.

5. Установить Интервал > Поле > Правый до 6 пикселей.

   

6. Установить фон > цвет до #6E3925.

7. Установить Граница > Цвет до #311A11.

8. Установить Границу > Ширину до 4 пикселей.

9. Установить Границу > Радиус до 15 пикселей.

   

Создание контейнера с данными о персонаже

Добавить новый VisualElement под тем же родителем, что и #CharacterList чтобы разместить контейнер сведений о персонаже. Смысл в том, что при выборе персонажа из списка слева отображаются его портрет, имя и класс.

1. Перетащить VisualElement от Библиотека к элементу контейнера в Hierarchy панели. Это контейнер, чтобы держать все элементы справа.

2. Выберите элемент из панели Hierarchy.

3. В течение Inspector панель, комплект Выравнивание > Выравнивание элементов до flex-end.

4. Установить Выравнить > Развернуть содержимое к space-between.

   

5. Добавьте еще один VisualElement в качестве дочернего объекта правого контейнера.

6. Выберите элемент из панели Hierarchy.

7. Установить Flex > Увеличить до 0.

8. Установите Размер > Ширина до 276 пикселей.

9. В разделе Выравнивание установите Align Items и Justify Content на center.

10. Установить Интервал > Заполнение до 8 пикселей.

    

11. Установить фон > цвет до #AA5939.

Создание USS-класса для стиля рамки

Контейнер сведений о персонаже будет использовать те же стили рамки, что и контейнер списка имён. Создайте USS-класс, который примените к обоим контейнерам.

1. В панели StyleSheet выберите + > Создать новый USS.
2. Назовите его MainView.uss и выберите Сохранить.
3. Нажмите в Добавить новый селектор… поле и введите .border. A .border селектор появляется в StyleSheet Группа.
4. В панели StyleSheet выберите .border.
5. В течение Inspector панель, комплект Граница > Цвет до #311A11.
6. Установить Границу > Ширину до 4 пикселей.
7. Установить Границу > Радиус до 15 пикселей.
8. Перетащите .border из панели StyleSheet в контейнер информации о персонаже VisualElement.
9. Перетащите .border из панели StyleSheet в #CharacterList.
10. Выберите #CharacterList.
11. В панели Inspector щелкните правой кнопкой мыши Граница и выберите Отменить, чтобы удалить встроенный стиль, который вы установили ранее.

Ваш макет UI теперь выглядит следующим образом:

Создание фона портрета персонажа

Добавьте отдельные элементы управления UI в контейнер деталей персонажа. Первым шагом является добавление фона портрета персонажа.

1. Перетащите VisualElement из Библиотеки в контейнер деталей персонажа.

2. Выберите элемент из панели Hierarchy.

3. В разделе Размер установите Ширина и Высота на 120 пикселей.

4. Установить Интервал > Заполнение до 4 пикселей.

5. Установить фон > цвет до #FF8554.

6. Установить Граница > Цвет до #311A11.

7. Установить Границу > Ширину до 2 пикселей.

8. Установить Границу > Радиус до 13 пикселей.

   

Создать портрет персонажа на переднем плане

Далее в контейнере деталей персонажа добавьте передний план для реального изображения.

1. Перетащите VisualElement из Библиотеки в контейнер деталей персонажа.

2. Выберите элемент из панели Hierarchy.

3. Установить Имя на CharacterPortrait.

4. Набор Флекс > Рост до 1, так что изображение может использовать все имеющееся пространство.

5. Установите Background > Scale Mode на scale-to-fit, чтобы можно было масштабировать изображение для соответствия размеру элемента, сохраняя правильное соотношение сторон.

   

Создание меток

Добавьте два элемента управления Label в контейнер сведений о персонаже, чтобы отображать имя и класс выбранного персонажа.

1. Перетаскивание Этикетка от Библиотека к контейнеру с данными о персонаже в Hierarchy Группа.

2. Установите Name на CharacterName.

3. Перетаскивание Этикетка от Библиотека к контейнеру с данными о персонаже в Hierarchy Группа.

4. Установите Name на CharacterClass.

   

5. Выберите элемент #CharacterName.

6. Установить Текст > Шрифт Стиль до B.

7. Установить Текст > Размер до 18 пикселей.

   

8. В окне Видовой проем выберите Файл > Сохранить для сохранения изменений в MainView.uxml.

Извлечение встроенных стилей

В UI Builder вы можете создавать элементы и использовать встроенные стили только для экспериментов, пока количество элементов еще невелико. По мере создания более сложного UI, будет легче управлять стилями с помощью таблиц стилей. Вы можете извлекать встроенные стили в таблицу стилей в UI Builder.

1. Выберите корневой визуальный элемент.

2. В течение Inspector панели, в Список классов стилей поле, введите .background в качестве имени класса.

3. Выбрать Извлечение встроенных стилей в новый класс. Это создает .background селектор класса со встроенными стилями, которые вы задали корневому элементу, и обновляет UI-документ (UXML) так, чтобы корневой визуальный элемент использовал этот селектор вместо встроенных стилей.

   

4. В окне Видовой проем выберите Файл > Сохранить.

Если вы хотите продолжить работу над примером Создание списка представлений в режиме выполнения UI, вы можете повторить шаги для извлечения стилей для всех других элементов и следовать инструкциям для создания примера.

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

• Стиль элементы с UI Builder