Создание меню с вкладками

Версия: 2023.2+

Меню с вкладками широко используются в видеоиграх и приложениях UI для организации и представления контента. Tab и TabView являются мощными контроллерами, которые упрощают процесс создания меню с вкладками.

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

В этом примере показано, как создать меню с вкладками в примерной сцене и настраиваемом окне Редактора. Меню состоит из трех вкладок. Каждая вкладка представляет определенное содержимое. Когда вы выбираете вкладку, отображается содержимое, связанное с этой вкладкой. В примере также используются ключи данных вида, чтобы сохранить порядок вкладок для окна Редактора.

Меню вкладок с тремя вкладками: Лондон, Париж и Оттава. На каждой вкладке отображается метка с названием столицы и описанием.

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

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

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

Создать TabView

Создайте Документ UI и добавьте к нему TabView.

Создайте проект в Unity с любым шаблоном.
В папке Assets создайте Документ UI с именем TabbedMenu.uxml.
Дважды щелкните TabbedMenu.uxml, чтобы открыть его в UI Builder.
Перетащить TabView от Библиотека к Генеральной Ассамблее Hierarchy Группа.
В панели Inspector панели TabView выполните следующие действия:
- Установите ключ View Data Key на TabbedMenu.
- Установите флажок Reorderable.

Добавление вкладок и содержимого вкладок

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

Под TabView добавьте три Вкладки.
В панели Inspector каждой Вкладки установите Этикетка на следующие значения:
- London для первой вкладки
- Paris для второй вкладки
- Ottawa для третьей вкладки
Установите для Ключ Просмотра Данных следующие значения:
- LondonTab для первой вкладки
- ParisTab для второй вкладки
- OttawaTab для третьей вкладки
В панели Hierarchy под каждой вкладкой добавьте метку.
В панели Inspector каждой метки установите Текст на следующие значения:
- London is the capital city of England для первой метки
- Paris is the capital of France для второй метки
- Ottawa is the capital of Canada для третьей маркировки

Определение стилей меню с вкладками

Определить расположение вкладок и их содержимое с помощью USS. Вы можете стилизовать вкладки и их содержимое по своему усмотрению. Этот пример добавляет цвет фона для выбранной вкладки и скрывает подчеркивание заголовка вкладки.

В папке Assets создайте таблицу стилей с именем TabbedMenu.uss.

Откройте TabbedMenu.uss и добавьте следующие правила стилизации:

/* Style for tabs */
.unity-tab__header {
    background-color: rgb(229, 223, 223);
    -unity-font-style: bold;
    font-size: 14px;
}
    
/* Adds background color for the selected tab */
.unity-tab__header:checked  {
    background-color: rgb(173, 166, 166);
}
    
/* Style for tabContent */
.tab-content {
    background-color: rgb(255, 255, 255);
    font-size: 20px;
}
    
/* By default, each tab header has an underline. This hides the header underline  */
.unity-tab__header-underline {
    opacity: 0; /* or rgba(0, 0, 0, 0); */
}

Дважды щелкните TabbedMenu.uxml, чтобы открыть его в UI Builder.
В панели StyleSheets выберите + > Добавить существующие USS.
Выберите файл USS, который вы создали ранее.
Примените .tab-content к каждой метке в Tab.

Завершенный TabbedMenu.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">
  /* Your src might look different. If you save your UXML in UI Builder, USS file is referenced by the file location, fileID and guid. */
  <Style src="TabbedMenu.uss" />
  <ui:TabView reorderable="true" view-data-key="TabbedMenu">
     <ui:Tab label="London" view-data-key="LondonTab">
         <ui:Label text="London is the capital city of England" class="tab-content"/>
     </ui:Tab>
     <ui:Tab label="Paris" view-data-key="ParisTab">
         <ui:Label text="Paris is the capital of France"  class="tab-content"/>
     </ui:Tab>
     <ui:Tab label="Ottawa" view-data-key="OttawaTab">
         <ui:Label text="Ottawa is the capital of Canada" class="tab-content"/>
     </ui:Tab>
  </ui:TabView>
</ui:UXML>

Использование меню вкладок в игре

Создайте UIDocument GameObject в SampleScene и добавьте UI Документ в качестве исходного ассета. Создайте MonoBehaviour скрипт, который прикрепляет меню с вкладками к игре.

В SampleScene, выберите GameObject > UI Toolkit > UI Документ.

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

using UnityEngine;
using UnityEngine.UIElements;
    
//Inherits from class `MonoBehaviour`. This makes it attachable to a game object as a component.
public class TabbedMenu : MonoBehaviour
{
    private void OnEnable()
    {
        UIDocument menu = GetComponent<UIDocument>();
        VisualElement root = menu.rootVisualElement;
    }
}

Выберите UIDocument в SampleScene.
В окне Inspector выберите TabbedMenu.uxml из списка Source Asset.
Выберите TabbedMenu.cs из списка Добавить компонент.
Введите режим воспроизведения.
Выберите различные вкладки, чтобы увидеть различное содержимое.
Перетащите вкладки, чтобы изменить их порядок.

Использование меню вкладок в окне редактора

Создайте собственное окно редактора и добавьте в него меню вкладок. Вы можете перетаскивать вкладки, чтобы изменить их порядок. Порядок вкладок сохраняется при закрытии и повторном открытии окна редактора.

В папке Assets создайте папку Editor.

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

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
    
public class TabbedMenuEditorWindow : EditorWindow
{
    [MenuItem("Window/Tabbed Menu")]
    public static void ShowExample()
    {
        TabbedMenuEditorWindow wnd = GetWindow<TabbedMenuEditorWindow>();
        wnd.titleContent = new GUIContent("Tabbed Menu");
    }
    
    public void OnEnable()
    {
        VisualElement root = rootVisualElement;
        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/TabbedMenu.uxml");
        VisualElement tabbedMenuUXML = visualTree.Instantiate();
        root.Add(tabbedMenuUXML);
    }
}

В Редакторе выберите Окно > Меню вкладок.
Выберите различные вкладки, чтобы увидеть различное содержимое.
Перетащите вкладки, чтобы изменить их порядок.
Закройте окно редактора и откройте его снова. Порядок вкладок сохраняется.