탭 메뉴 생성

Version: 2023.2+

탭 메뉴는 비디오 게임 및 애플리케이션 UI에서 콘텐츠를 정리하고 표시하는 데 널리 사용됩니다. Tab과 TabView는 탭 메뉴 생성을 간소화하는 강력한 컨트롤입니다.

개요 예시

이 예시는 커스텀 에디터 창과 샘플 씬에서 탭 메뉴를 만드는 방법을 보여줍니다. 메뉴에는 세 개의 탭이 있습니다. 각 탭에는 특정 콘텐츠가 표시됩니다. 탭을 선택하면 해당 탭과 연결된 콘텐츠가 표시됩니다. 또한 이 예시에서는 뷰 데이터 키를 사용하여 에디터 창의 탭 순서를 보존합니다.

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.

TabView 생성

UI 문서를 생성하고 TabView를 추가합니다.

템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.
Assets 폴더에 TabbedMenu.uxml이라는 이름의__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 문서를 만듭니다.
TabbedMenu.uxml을 더블 클릭하여 UI 빌더에서 엽니다.
TabView를 Library에서 계층 구조 패널로 드래그합니다.
TabView의 인스펙터 패널에서 다음을 수행합니다.
- View Data Key를 TabbedMenu로 설정합니다.
- Reorderable 체크박스를 선택합니다.

탭 및 탭 콘텐츠 추가

TabView에 탭 세 개를 추가합니다. 각 탭에 대해 탭 콘텐츠를 표시하는 자식 요소로 레이블을 추가합니다.

TabView 아래에 탭 3개를 추가합니다.
각 탭의 인스펙터 패널에서 Label을 다음 값으로 설정합니다.
- 첫 번째 탭: London
- 두 번째 탭: Paris
- 세 번째 탭: Ottawa
View Data Key를 다음 값으로 설정합니다.
- 첫 번째 탭: LondonTab
- 두 번째 탭: ParisTab
- 세 번째 탭: OttawaTab
계층 구조 패널의 각 탭 아래에 레이블을 추가합니다.
각 레이블의 인스펙터 패널에서 Text를 다음 값으로 설정합니다.
- 첫 번째 레이블: 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); */
}

UI 빌더에서 TabbedMenu.uxml을 더블 클릭하여 엽니다.
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>

게임에서 탭 메뉴 사용

SampleScene에서 UIDocument 게임 오브젝트를 생성하고 UI 문서를 소스 에셋으로 추가합니다. 탭 메뉴를 게임에 연결하는 MonoBehaviour 스크립트를 만듭니다.

SampleScene에서 GameObject > UI Toolkit > UI Document를 선택합니다.

Assets 폴더에서 다음 내용을 포함하는 TabbedMenu.cs라는 이름의 C# 스크립트를 생성합니다.

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;
    }
}

SampleScene에서 UIDocument를 선택합니다.
인스펙터 창의 Source Asset 목록에서 TabbedMenu.uxml을 선택합니다.
Add Component 목록에서 TabbedMenu.cs를 선택합니다.
플레이 모드를 실행합니다.
다른 탭을 선택하여 다른 콘텐츠를 확인합니다.
탭을 드래그하여 순서를 변경합니다.

에디터 창에서 탭 메뉴 사용

커스텀 에디터 창을 생성하고 탭 메뉴를 추가합니다. 탭을 드래그하여 순서를 변경할 수 있습니다. 탭 순서는 에디터 창을 닫고 다시 열면 저장됩니다.

Assets 폴더에 Editor라는 이름의 폴더를 만듭니다.

Editor 폴더에 다음 내용을 포함하는 TabbedMenuEditorWindow.cs라는 이름의 C# 스크립트를 생성합니다.

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를 선택합니다.
다른 탭을 선택하여 다른 콘텐츠를 확인합니다.
탭을 드래그하여 순서를 변경합니다.
에디터 창을 닫고 다시 엽니다. 탭 순서가 저장됩니다.

추가 리소스

스크롤 뷰 안에 콘텐츠 래핑

팝업 창 만들기