Buat transisi di jendela editor kustom
Buat UI drag-and-drop di dalam jendela editor kustom

Buat menu tabbed untuk runtime

Menu tabbed umum dalam permainan video dan aplikasi UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary. Anda dapat menggunakan UI Toolkit untuk membuat menu tabbed untuk jendela editor kustom atau runtime. Contoh ini menunjukkan cara membuat menu tabbed dalam sampel sceneAdegan berisi lingkungan dan menu permainan Anda. Pikirkan setiap file Adegan unik sebagai tingkat yang unik. Di setiap Adegan, Anda menempatkan lingkungan, hambatan, dan dekorasi, pada dasarnya merancang dan membangun permainan Anda dalam potongan-potongan. More info
Lihat di Glossary.

Contoh gambaran

Contoh ini menambahkan menu di adegan sampel. Menu memiliki tiga tab. Setiap tab menyajikan konten tertentu. Ketika Anda mengklik tab, hanya konten yang terkait dengan tab itu ditampilkan.

A preview of tabbed menu
A preview of tabbed menu

Untuk membuat konten tabbed, Anda perlu menentukan elemen menu, gaya, dan logika.

Anda dapat menemukan file yang lengkap yang contoh ini menciptakan di Repositori GitHub ini.

Prerequisites

Panduan ini adalah untuk pengembang yang akrab dengan Unity, UI Toolkit, Flexbox, dan C# scripting.

Panduan ini merujuk konsep berikut:

Tentukan elemen menu tabbed

Buat dua bagian di menu Anda menggunakan UI Builder, satu untuk tab dan satu untuk konten tab. Dalam bagian ini, buat tiga elemen tab dan tiga elemen konten tab.

  1. Buat proyek di Editor Unity menggunakan template apa pun.

  2. Klik GameObject > UI Toolkit > UI Document untuk menambahkan Dokumen UI dalam adegan sampel.

  3. Buat folder di Assets yang disebut TabbedMenu untuk menyimpan semua file Anda.

  4. Dalam folder TabbedMenu, buat dokumen UI yang disebut TabbedMenu.uxml.

  5. Tambahkan UXML ke Dokumen UI Anda dengan memilih UIDocument di SampleScene dan seret TabbedMenu.uxml ke Source Asset di bagian UI Document di InspectorJendela Unity yang menampilkan informasi tentang Pengaturan GameObject yang dipilih saat ini, aset atau proyek, memungkinkan Anda untuk memeriksa dan mengedit nilai. More info
    Lihat di Glossary    .

  6. Buka TabbedMenu.uxml menggunakan UI Builder.

  7. Tambahkan dua VisualElements yang disebut tabs dan tabContent di bawah akar.

  8. Di bawah tabs, tambahkan tiga kontrol Label dan berikan teks Label berikut:

    • London
    • Paris
    • Ottawa

  9. Di bawah tabContent, tambahkan tiga kontrol Label dan berikan teks Label berikut:

    • London is the capital city of England
    • Paris is the capital of France
    • Ottawa is the capital of Canada

  10. Untuk mengasosiasikan konten tab dengan tab, contoh ini menggunakan prefiks yang sama tetapi suffix yang berbeda untuk nama Label. Setiap nama tab memiliki suffix Tab dan setiap konten tab memiliki suffix Content. Mengatur nama label tab dan nama label konten berikut:

    • LondonTab
    • ParisTab
    • OttawaTab
    • LondonContent
    • ParisContent
    • OttawaContent

Hierarchy UI Builder Anda harus terlihat seperti berikut:

UI Builder Hierarchy
Pembuat UI Hierarchy

Tentukan gaya menu tabbed

Tentukan tata letak untuk tab dan konten tab menggunakan USS. Anda dapat memberi gaya tab dan konten tab dengan cara yang Anda sukai. Contoh ini mengatur tab di baris dan di atas konten tab. Ini menambahkan warna latar belakang untuk tab yang dipilih dan menyembunyikan konten tab yang tidak dipilih.

  1. Dalam folder TabbedMenu, buat stylesheet yang disebut TabbedMenu.uss.

  2. Buka TabbedMenu.uss dan tambahkan aturan styling berikut:

    /* Style for tabs */
#tabs {
    flex-basis: 10%;
    flex-direction: row;
    background-color: rgb(229, 223, 223);
    font-size: 12px;
    -unity-font-style: bold;
    font-size: 14px;
}

/* Sets each label in tabs to have the same size. */
.tab {
    flex-grow: 1;
}

/* Adds background color for the selected tab */
.currentlySelectedTab {
    background-color: rgb(173, 166, 166);
}

/* Style for tabContent */
#tabContent {
    flex-basis: 90%;
    background-color: rgb(255, 255, 255);
    font-size: 20px;
}

/* Hides the unselected tab content */
.unselectedContent {
    display: none;
}

  3. Buka TabbedMenu.uxml di UI Builder.

  4. Klik Add Existing USS dan pilih TabbedMenu.uss.

  5. Terapkan gaya Anda ke kontrol UI:

    • Terapkan .tab ke setiap label di bawah tabs
    • .currentlySelectedTab LondonTab
    • Terapkan .unselectedContent ke ParisContent dan OttawaContent

TabbedMenu.uxml selesai harus terlihat seperti berikut:

<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-style.uss" />
   <ui:VisualElement name="tabs">
      <ui:Label name="LondonTab" text="London" class="tab currentlySelectedTab" />
      <ui:Label name="ParisTab" text="Paris" class="tab" />
      <ui:Label name="OttawaTab" text="Ottawa" class="tab" />
   </ui:VisualElement>
   <ui:VisualElement name="tabContent">
      <ui:Label text="London is the capital city of England" name="LondonContent" />
      <ui:Label text="Paris is the capital of France" name="ParisContent" class="unselectedContent" />
      <ui:Label text="Ottawa is the capital of Canada" name="OttawaContent" class="unselectedContent" />
   </ui:VisualElement>
</ui:UXML>

Tentukan logika menu tabbed

Buat C# scriptsSepotong kode yang memungkinkan Anda untuk membuat Komponen Anda sendiri, memicu peristiwa permainan, memodifikasi sifat komponen dari waktu ke waktu dan menanggapi input pengguna dengan cara apa pun yang Anda sukai. More info
Lihat di Glossary yang mengubah konten tab yang ditampilkan. Ketika pengguna mengklik tab, tampilan konten tab dan konten saat ini menyembunyikan.

  1. Dalam folder TabbedMenu, buat dua file skrip C# berikut:

    • TabbedMenu.cs: Pasang logika menu tabbed ke permainan.
    • TabbedMenuController.cs: Tentukan logika pemilihan tab.

  2. Tambahkan TabbedMenu.cs sebagai komponen ke Dokumen UI dengan memilih UIDocument di SampleScene dan dragging TabbedMenu.cs ke tombol Add Component di Inspector.

  3. Buka TabbedMenu.cs dan ganti dengan kode berikut:

    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 TabbedMenuController controller;

    private void OnEnable()
    {
        UIDocument menu = GetComponent<UIDocument>();
        VisualElement root = menu.rootVisualElement;

        controller = new(root);

        controller.RegisterTabCallbacks();
    }
}

  4. Buka TabbedMenuController.cs dan ganti dengan kode berikut:

    using UnityEngine.UIElements;

public class TabbedMenuController
{
    /* Define member variables*/
    private const string tabClassName = "tab";
    private const string currentlySelectedTabClassName = "currentlySelectedTab";
    private const string unselectedContentClassName = "unselectedContent";
    // Tab and tab content have the same prefix but different suffix
    // Define the suffix of the tab name
    private const string tabNameSuffix = "Tab";
    // Define the suffix of the tab content name
    private const string contentNameSuffix = "Content";

    private readonly VisualElement root;

    public TabbedMenuController(VisualElement root)
    {
        this.root = root;
    }

    public void RegisterTabCallbacks()
    {
        UQueryBuilder<Label> tabs = GetAllTabs();
        tabs.ForEach((Label tab) => {
            tab.RegisterCallback<ClickEvent>(TabOnClick);
        });
    }

    /* Method for the tab on-click event: 

       - If it is not selected, find other tabs that are selected, unselect them 
       - Then select the tab that was clicked on
    */
    private void TabOnClick(ClickEvent evt)
    {
        Label clickedTab = evt.currentTarget as Label;
        if (!TabIsCurrentlySelected(clickedTab))
        {
            GetAllTabs().Where(
                (tab) => tab != clickedTab && TabIsCurrentlySelected(tab)
            ).ForEach(UnselectTab);
            SelectTab(clickedTab);
        }
    }
    //Method that returns a Boolean indicating whether a tab is currently selected
    private static bool TabIsCurrentlySelected(Label tab)
    {
        return tab.ClassListContains(currentlySelectedTabClassName);
    }

    private UQueryBuilder<Label> GetAllTabs()
    {
        return root.Query<Label>(className: tabClassName);
    }

    /* Method for the selected tab: 
       -  Takes a tab as a parameter and adds the currentlySelectedTab class
       -  Then finds the tab content and removes the unselectedContent class */
    private void SelectTab(Label tab)
    {
        tab.AddToClassList(currentlySelectedTabClassName);
        VisualElement content = FindContent(tab);
        content.RemoveFromClassList(unselectedContentClassName);
    }

    /* Method for the unselected tab: 
       -  Takes a tab as a parameter and removes the currentlySelectedTab class
       -  Then finds the tab content and adds the unselectedContent class */
    private void UnselectTab(Label tab)
    {
        tab.RemoveFromClassList(currentlySelectedTabClassName);
        VisualElement content = FindContent(tab);
        content.AddToClassList(unselectedContentClassName);
    }

    // Method to generate the associated tab content name by for the given tab name
    private static string GenerateContentName(Label tab) =>
        tab.name.Replace(tabNameSuffix, contentNameSuffix);

    // Method that takes a tab as a parameter and returns the associated content element
    private VisualElement FindContent(Label tab)
    {
        return root.Q(GenerateContentName(tab));
    }
}

Kembali ke Unity dan masukkan mode Play. Anda harus melihat perubahan konten ketika Anda mengklik tab baru.

Contoh menu Tabbed ditambahkan dalam Unity Panties20212

Buat transisi di jendela editor kustom
Buat UI drag-and-drop di dalam jendela editor kustom
© 2022 Unity Technologies. Tanggal Publikasi: 2022-04-04.