タブメニューの作成

Version:2023.2+

タブメニューは、ビデオゲームやアプリケーションの UI で、コンテンツの整理や表示に広く使用されています。Tab と TabView は、タブメニューの作成プロセスを簡素化する強力なコントロールです。

例の概要

この例では、サンプルシーンとカスタムエディターウィンドウでタブメニューを作成する方法を説明します。メニューには 3 つのタブがあります。各タブには、特定のコンテンツが表示されます。タブを選択すると、そのタブに関連するコンテンツが表示されます。この例では、エディターウィンドウでタブの順序を維持するために、ビューデータキーも使用します。

この例で完成したファイルは、この GitHub リポジトリにあります。

必要な要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下の点を理解しておいてください。

TabView を作成する

UI Document を作成し、TabView を追加します。

Unity で任意のテンプレートを使用してプロジェクトを作成します。
Assets フォルダーに、UI Document を作成し TabbedMenu.uxml と命名します。
TabbedMenu.uxml をダブルクリックして、UI Builder で開きます。
TabView を Library から Hierarchy パネルにドラッグします。
TabView の Inspector パネルで、以下の手順を実行します。
- View Data Key を TabbedMenu に設定します。
- Reorderable チェックボックスを選択します。

タブとタブコンテンツを追加する

TabView に 3 つのタブを追加します。タブごとに、タブコンテンツを表示するラベルを子要素として追加します。

TabView の下に 3 つのタブを追加します。
各タブの Inspector パネルで、Label を以下の値に設定します。
- 最初のタブは London
- 2 番目のタブは Paris
- 3 番目のタブは Ottawa
View Data Key を以下の値に設定します。
- 最初のタブは LondonTab
- 2 番目のタブは ParisTab
- 3 番目のタブは OttawaTab
Hierarchy パネルで、各タブの下に Label を追加します。
各 Label の Inspector パネルで、Text を以下の値に設定します。
- 最初の Label は London is the capital city of England
- 2 番目の Label は Paris is the capital of France
- 3 番目の Label は 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 パネルで、+ > Add Existing USS の順にクリックします。
作成した USS ファイルを選択します。
Tab の下にある各 Label に .tab-content を適用します。

完成した 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 ゲームオブジェクトを作成し、UI Document をソースアセットとして加えます。タブメニューをゲームにアタッチする MonoBehaviour スクリプトを作成します。

サンプルシーンで GameObject > UI Toolkit > UI Document の順にクリックします。

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 を選択します。
Inspector ウィンドウで、Source Asset リストから TabbedMenu.uxml を選択します。
Add Component リストから 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);
    }
}

エディターで、Window > Tabbed Menu の順にクリックします。
いろいろなタブを選択してさまざまなコンテンツを確認します。
タブをドラッグして並べ替えます。
エディターウィンドウを閉じ、もう一度開きます。タブの順序が保存されます。

追加リソース

スクロールビュー内でコンテンツを折り返す

ポップアップウィンドウの作成