Unity 매뉴얼: 스크롤 뷰 콘텐츠 래핑 예시

Unity는 UI 툴킷을 사용하여 다양한 사용자 인터페이스(UI)를 만들 수 있는 강력한 도구입니다. 여기에서는 스크롤 뷰 안에 콘텐츠를 스타일링하고 래핑하는 방법에 대해 설명합니다. 이 가이드는 Unity 에디터 및 C# 스크립팅에 익숙한 사용자를 위한 것입니다.

개요

이 예시에서는 두 개의 스크롤 뷰를 사용하여 커스터마이징된 에디터 창을 생성합니다. 한 스크롤 뷰에는 레이블이, 다른 스크롤 뷰에는 15개의 버튼이 포함됩니다. 레이블과 버튼의 스타일링을 적용하고 텍스트가 자동으로 래핑되도록 설정합니다.

예제 구성 요소

시작하기

1단계: 커스텀 에디터 창 생성

1. Unity 프로젝트를 생성합니다.
2. 프로젝트 창을 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.
3. C# 상자에 ScrollViewExample을 입력하고 Confirm을 선택합니다.
4. 아래의 3개의 파일이 생성됩니다:
5. ScrollViewExample.cs
6. ScrollViewExample.uxml
7. ScrollViewExample.uss

2단계: 스크롤 뷰 생성

• UXML 파일에서 스크롤 뷰의 기본 구조를 정의합니다.
• USS 파일에서 스크롤 뷰의 스타일을 지정합니다.
• C# 스크립트에서 스크롤 뷰 안에 15개의 버튼을 추가합니다.

2.1: ScrollViewExample.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="True">
    <Style src="ScrollViewExample.uss" />
    <ui:ScrollView>
        <ui:VisualElement>
            <ui:Label text="ScrollView Wrapping Example" />
        </ui:VisualElement>
    </ui:ScrollView>
    <ui:ScrollView name="scroll-view-wrap-example" />
</ui:UXML>

2.2: ScrollViewExample.uss

다음 내용을 입력하여 스타일을 지정합니다.

Label {
    font-size:20px;
    -unity-font-style: bold;
    color: rgb(68, 138, 255);
    white-space: normal; /* 레이블 텍스트 래핑 스타일 */
}

#scroll-view-wrap-example .unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap; /* 요소 래핑 스타일 */
}

Button {
    width:50px;
    height:50px;
}

2.3: ScrollViewExample.cs

다음 코드를 입력하여 스크롤 뷰와 버튼을 설정합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;

public class ScrollViewExample : EditorWindow
{
    [MenuItem("Example/ScrollView Wrapping Example")]
    public static void ShowExample()
    {
        var wnd = GetWindow<ScrollViewExample>();
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/ScrollViewExample.uxml");
        VisualElement ScrollViewExample = visualTree.Instantiate();
        root.Add(ScrollViewExample);

        VisualElement scrollview = root.Query<ScrollView>("scroll-view-wrap-example");

        for (int i = 0; i < 15; i++) 
        {
            Button button = new Button();
            button.text = "Button";
            scrollview.Add(button);
        }
    }
}

3단계: 스크롤 뷰 래핑 테스트

• 메뉴에서 Example > ScrollView Wrapping Example을 선택하여 결과를 확인합니다.

추가 리소스

• UQuery: UI 요소를 효과적으로 쿼리하는 방법
• ScrollView: 스크롤 뷰에 대한 더 많은 옵션
• 리스트 뷰 생성: 동적으로 데이터 기반 UI 생성하기
• 탭 메뉴 생성: 상호작용하는 탭 UI 만들기

결론

이 문서에서는 Unity의 UI 툴킷을 사용하여 스크롤 뷰 안에 콘텐츠를 래핑하는 간단한 방법을 배웠습니다. 이 기법은 다양한 사용자 인터페이스 디자인에 유용하게 사용될 수 있습니다.

저작권 © 2022 Unity Technologies. 출판 2022.3