탭 메뉴 생성

Version: 2023.2+

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

개요 예시

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

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

선행 조건

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

• TabView
• Tab
• USS
• UI 빌더
• UXML

TabView 생성

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

1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

2. Assets 폴더에서 TabbedMenu.uxml이라는 UI 문서를 생성합니다.

3. TabbedMenu.uxml을 더블 클릭하여 UI 빌더에서 엽니다.

4. 계층 구조 패널의 Library에서 TabView를 드래그합니다.

5. TabView의 인스펙터 패널에서 다음을 수행합니다.

   • View Data Key를 TabbedMenu로 설정합니다.
   • Reorderable 체크박스를 선택합니다.

탭 및 탭 콘텐츠 추가

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

1. TabView 아래에 3개의 탭을 추가합니다.

2. 각 탭의 인스펙터 패널에서 Label을 다음 값으로 설정합니다.

   • 첫 번째 탭에 London
   • 두 번째 탭에 Paris
   • 세 번째 탭에 Ottawa

3. View Data Key를 다음 값으로 설정합니다.

   • 첫 번째 탭에 LondonTab
   • 두 번째 탭에 ParisTab
   • 세 번째 탭에 OttawaTab

4. 계층 구조 패널에서 각 탭에 레이블을 추가합니다.

5. 각 레이블의 인스펙터 패널에서 Text를 다음 값으로 설정합니다.

   • 첫 번째 레이블에 London is the capital city of England
   • 두 번째 레이블에 Paris is the capital of France
   • 세 번째 레이블에 Ottawa is the capital of Canada

탭 메뉴 스타일 정의

USS를 사용하여 탭과 탭 콘텐츠의 레이아웃을 정의합니다. 원하는 대로 탭과 탭 콘텐츠의 스타일을 지정할 수 있습니다. 이 예시에서는 선택한 탭에 대한 배경 컬러를 추가하고 탭 헤더 밑줄을 숨깁니다.

1. Assets 폴더에서 TabbedMenu.uss라는 스타일시트를 생성합니다.

2. TabbedMenu.uss를 열고 다음 스타일 규칙을 추가합니다.

   [!code-css[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-tabbed-menu/TabbedMenu.uss)]]

3. TabbedMenu.uxml을 더블 클릭하여 UI 빌더에서 엽니다.

4. StyleSheets 패널에서 + > Add Existing USS를 선택합니다.

5. 이전에 생성한 USS 파일을 선택합니다.

6. 탭 아래 각 레이블에 .tab-content를 적용합니다.

완료된 TabbedMenu.uxml은 다음과 같이 표시됩니다.

[!code-xml[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-tabbed-menu/TabbedMenu.uxml)]]

게임에서 탭 메뉴 사용

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

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

2. Assets 폴더에서 다음 콘텐츠가 포함된 TabbedMenu.cs라는 C# 스크립트를 생성합니다.

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-tabbed-menu/TabbedMenu.cs)]]

3. SampleScene에서 UIDocument를 선택합니다.

4. 인스펙터 창의 Source Asset 목록에서 TabbedMenu.uxml을 선택합니다.

5. Add Component 목록에서 TabbedMenu.cs를 선택합니다.

6. 플레이 모드를 시작합니다.

7. 여러 콘텐츠를 볼 수 있도록 여러 탭을 선택합니다.

8. 탭을 드래그하여 순서를 변경합니다.

에디터 창에서 탭 메뉴 사용

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

1. Assets 폴더에서 Editor라는 폴더를 생성합니다.

2. Editor 폴더에서 다음 콘텐츠가 포함된 TabbedMenuEditorWindow.cs라는 C# 스크립트를 생성합니다.

   [!code-cs[(Modules/UIElements/Tests/UIElementsExamples/Assets/ui-toolkit-manual-code-examples/create-tabbed-menu/Editor/TabbedMenuEditorWindow.cs)]]

3. 에디터에서 Window > Tabbed Menu를 선택합니다.

4. 여러 콘텐츠를 볼 수 있도록 여러 탭을 선택합니다.

5. 탭을 드래그하여 순서를 변경합니다.

6. 에디터 창을 닫고 다시 엽니다. 탭 순서가 저장되었습니다.

추가 리소스

• 런타임 UI 시작하기
• 에디터 UI 지원
• 데이터 지속성 보기