Version: 2023.2
언어: 한국어
UXML 요소 RepeatButton
UXML 요소 Scroller

UXML 요소 ScrollView

ScrollView는 스크롤할 수 있는 영역 안에 해당 콘텐츠를 표시합니다.콘텐츠를 ScrollView에 추가하면 콘텐츠가 ScrollView의 콘텐츠 컨테이너(#unity-content-container)에 추가됩니다.

ScrollView 생성

UI Builder, UXML, C#으로 ScrollView를 생성할 수 있습니다. 다음 C# 예시에서는 수평 및 수직 스크롤 기능이 있는 ScrollView를 생성하며, 여기에는 제목 Label과 여러 Toggle 요소가 포함됩니다.

var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;

scrollView.Add(new Label("List of checkboxes:"));

for (int i = 0; i < 100; ++i)
{
    var toggle = new UnityEngine.UIElements.Toggle()
    { text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
    scrollView.Add(toggle);
}

스크롤 바 표시 관리

스크롤 바의 이동 방향, 가로 또는 세로 스크롤 바의 표시 여부를 지정하고 스크롤 바의 속도를 컨트롤할 수 있습니다.

UI 빌더에서 스크롤바의 이동 방향을 설정하려면 인스펙터(Inspector) 창에서 다음 Mode 옵션 중 하나를 선택합니다.

  • Vertical (default)
  • Horizontal
  • Vertical and Horizontal

UI 빌더에서 스크롤바의 표시 여부를 설정하려면 인스펙터 창에서 다음 Horizontal Scroller Visibility 또는 Vertical Scroller Visibility의 옵션 중 하나를 선택합니다.

  • Auto (default)
  • Always Visible
  • Hidden

스크롤 속도 컨트롤

스크롤 속도를 제어하려면 UI Builder, UXML, C# 코드에서 다음 프로퍼티의 값을 조정합니다. 값이 높을수록 스크롤 속도가 빨라집니다.

  • horizontal-page-size는 키보드 또는 화면 스크롤바 버튼(화살표 및 핸들)을 사용할 때 수평 스크롤 속도를 제어합니다. 속도는 페이지 크기에 지정된 값을 곱하여 계산됩니다. 예를 들어 2 값은 각 스크롤 이동이 페이지 너비의 두 배에 해당하는 거리를 처리할 수 있다는 의미입니다.
  • vertical-page-size는 키보드 또는 화면 스크롤바 버튼(화살표 및 핸들)을 사용할 때 수직 스크롤 속도를 제어합니다. 속도는 페이지 크기에 지정된 값을 곱하여 계산됩니다. 예를 들어 2 값은 각 스크롤 이동이 페이지 길이의 두 배에 해당하는 거리를 처리할 수 있다는 의미입니다.
  • mouse-wheel-scroll-size는 마우스 휠을 사용할 때 스크롤 속도를 제어합니다. 속도는 지정한 값을 기본 줄 높이인 18px에 해당하는 18로 나누어 계산됩니다. 예를 들어 값을 36으로 설정하면 스크롤을 움직일 때마다 두 줄의 콘텐츠에 해당하는 거리를 이동합니다.

참고: 또한 USS 빌트인 변수 –unity-metrics-single_line-height를 오버라이드하여 마우스 휠을 사용할 때의 스크롤 속도를 제어할 수 있습니다. mouse-wheel-scroll-size 속성은 –unity-metrics-single_line-height USS 변수에 우선합니다.

ScrollView 안에 요소 래핑

요소가 일렬로 표시되도록 ScrollView 안에 시각적 요소를 래핑할 수 있습니다.행이 가득 차면 요소가 다음 행에 이어서 표시됩니다.

시각적 요소를 ScrollView에 래핑하려면 ScrollView의 콘텐츠 컨테이너 flex-directionrow로, flex-wrapwrap으로 설정합니다.

USS:

.unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap;
}

C#:

scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;

ScrollView 안에 요소의 텍스트 래핑

예를 들어 ScrollView 안에 레이블 요소의 텍스트를 래핑하려면 다음을 수행하십시오.

  1. 다음 방법으로 레이블 요소의 스타일을 지정합니다.
    • UI 빌더의 레이블 인스펙터 창에서 Text > Wrap > normal을 선택합니다.
    • USS, UXML, C#에서 white-space: normal; 스타일을 레이블 요소에 적용합니다.
  2. ScrollView 안에 VisualElement를 컨테이너로 생성합니다.ScrollView 안의 원래 컨테이너 요소에는 바운드가 설정되어 있지 않으므로(크기가 무한대) 텍스트가 제대로 래핑되지 않습니다.이 VisualElement 컨테이너는 텍스트를 래핑할 수 있는 한정된 크기를 제공합니다.
  3. 레이블을 VisualElement 컨테이너에 추가합니다.

예제

C# 클래스 및 네임스페이스

C# 클래스:ScrollView
네임스페이스:UnityEngine.UIElements
기본 클래스:VisualElement

구성원 UXML 속성

이 요소에는 다음 구성원 속성이 있습니다.

Name 타입 설명
elasticity float 사용자가 스크롤 뷰의 경계를 지나 스크롤을 시도할 때 사용할 탄력도입니다.

탄력성은 touchScrollBehavior가 Elastic으로 설정된 경우에만 사용됩니다.
horizontal-page-size float 이 프로퍼티는 페이지 크기에 따라 키보드 또는 화면 스크롤바 버튼(화살표 및 핸들)을 사용할 때 수평 스크롤 속도를 제어합니다.

스크롤할 때 페이지 크기는 각 스크롤 단계의 오프셋에 적용되므로 최종 오프셋은 페이지 크기에 단계 수를 곱한 값이 됩니다. SA: BaseSlider_1::ref::pageSize.
horizontal-scroller-visibility UIElements.ScrollerVisibility 가로 스크롤바 표시 여부를 지정합니다.
mode UIElements.ScrollViewMode ScrollView에서 사용자가 콘텐츠를 스크롤할 수 있는 방법을 제어합니다. ScrollViewMode 기본값은 ScrollViewMode.Vertical입니다. 이 프로퍼티에 쓰면 ScrollViewMode의 지정된 값에 따라 ScrollView의 클래스 목록이 수정됩니다. 값이 변경되면 이전 값과 일치하는 클래스 목록이 제거되고 새 값과 일치하는 클래스 목록이 추가됩니다.
mouse-wheel-scroll-size float 이 프로퍼티는 페이지 크기에 따라 마우스 스크롤 휠을 사용할 때만 스크롤 속도를 컨트롤합니다.이는 –unity-metrics-single_line-height USS 변수보다 우선합니다.
nested-interaction-kind UIElements.ScrollView+NestedInteractionKind 중첩된 ScrollView의 한계에 도달할 때 사용할 동작입니다.
scroll-deceleration-rate float 사용자가 터치 인터랙션을 사용하여 스크롤한 후 스크롤 이동이 느려지는 속도를 컨트롤합니다.

감속도는 초당 속도 감속입니다.값이 0.5인 경우 초당 속도를 절반으로 줄입니다.값이 0인 경우 스크롤을 즉시 중지합니다.
vertical-page-size float 이 프로퍼티는 페이지 크기에 따라 키보드 또는 화면 스크롤바 버튼(화살표 및 핸들)을 사용할 때 수직 스크롤 속도를 제어합니다.

속도는 페이지 크기에 지정된 값을 곱하여 계산됩니다. 예를 들어 값이 2이면 스크롤을 움직일 때마다 페이지 너비의 두 배에 해당하는 거리를 이동한다는 의미입니다.
vertical-scroller-visibility UIElements.ScrollerVisibility 세로 스크롤바 표시 여부를 지정합니다.

상속 UXML 속성

이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.

Name 타입 설명
focusable boolean 요소에 포커스를 맞출 수 있으면 true입니다.
tabindex int 포커스 링에서 포커스를 맞출 수 있는 항목을 정렬하는 데 사용되는 정수입니다.0보다 크거나 같아야 합니다.

또한 이 요소는 다음 속성을 VisualElement에서 상속합니다.

Name 타입 설명
content-container string 자식 요소가 추가되며, 일반적으로 요소 자체와 동일합니다.
data-source Object 상속된 모든 데이터 소스를 오버라이드하는 이 VisualElement에 데이터 소스를 할당합니다. 이 데이터 소스는 모든 자식에게 상속됩니다.
data-source-path string 데이터 소스에서 값까지의 경로입니다.
name string 이 VisualElement의 이름입니다.

이 프로퍼티를 사용하면 특정 요소를 타게팅하는 USS 선택자를 작성할 수 있습니다.요소에 고유한 이름을 부여하는 것이 표준 관행입니다.
picking-mode UIElements.PickingMode mouseEvents 또는 IPanel.Pick 쿼리 중에 이 요소를 선택할 수 있는지를 결정합니다.
style string 이 요소의 스타일 오브젝트에 대한 레퍼런스입니다.

USS 파일에서 계산된 데이터 또는 C#에서 이 오브젝트에 작성된 인라인 스타일을 포함합니다.
tooltip string 사용자가 마우스를 요소 위에 잠시 놓은 후 정보 박스 안에 표시할 텍스트입니다.이는 에디터 UI에서만 지원됩니다.
usage-hints UIElements.UsageHints VisualElement에 대한 고수준의 의도된 사용 패턴을 지정하는 힌트 값 조합입니다.이 프로퍼티는 VisualElement가 아직 Panel에 포함되어 있지 않을 때만 설정할 수 있습니다.Panel에 포함되면 이 프로퍼티는 사실상 읽기 전용이 되며, 변경을 시도하면 예외가 발생합니다.적절한 UsageHints를 지정하면 시스템에서 예상하는 사용 패턴에 따라 특정 작업을 처리하거나 가속하는 방법에 대해 더 나은 결정을 내릴 수 있습니다.이러한 힌트는 동작이나 시각적 결과에는 영향을 주지 않으며 패널과 그 안의 요소의 전반적인 성능에만 영향을 줍니다.항상 적절한 UsageHints를 지정하는 것이 좋지만, 일부 UsageHints는 특정 조건(예: 타겟 플랫폼의 하드웨어 제한으로 인해)에서 내부적으로 무시될 수 있다는 점에 유의하십시오.
view-data-key string 트리 확장 상태, 스크롤 위치, 줌 레벨 등의 데이터 지속성을 확인하는 데 사용됩니다.

이 키는 뷰 데이터 스토어에서 뷰 데이터를 저장 및 로드하는 데 사용됩니다. 이 키를 설정하지 않은 경우 관련 VisualElement에 대해 지속성이 비활성화됩니다. 자세한 내용은 데이터 지속성 확인을 참조하십시오.

USS 클래스

다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.

C# 프로퍼티 USS 선택자 설명
ussClassName .unity-scroll-view 이 타입 요소의 USS 클래스명입니다.
viewportUssClassName .unity-scroll-view__content-viewport 이 타입의 요소에 있는 뷰포트 요소의 USS 클래스명입니다.
horizontalVariantViewportUssClassName .unity-scroll-view__content-viewport--horizontal 뷰포트가 가로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Horizontal
verticalVariantViewportUssClassName .unity-scroll-view__content-viewport--vertical 뷰포트가 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Vertical
verticalHorizontalVariantViewportUssClassName .unity-scroll-view__content-viewport--vertical-horizontal 뷰포트가 가로 및 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.VerticalAndHorizontal
contentAndVerticalScrollUssClassName .unity-scroll-view__content-and-vertical-scroll-container 이 타입의 요소에 있는 콘텐츠 요소의 USS 클래스명입니다.
contentUssClassName .unity-scroll-view__content-container 이 타입의 요소에 있는 콘텐츠 요소의 USS 클래스명입니다.
horizontalVariantContentUssClassName .unity-scroll-view__content-container--horizontal ContentContainer가 가로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Horizontal
verticalVariantContentUssClassName .unity-scroll-view__content-container--vertical ContentContainer가 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Vertical
verticalHorizontalVariantContentUssClassName .unity-scroll-view__content-container--vertical-horizontal ContentContainer가 가로 및 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.VerticalAndHorizontal
hScrollerUssClassName .unity-scroll-view__horizontal-scroller 이 타입의 요소에 있는 가로 스크롤러의 USS 클래스명입니다.
vScrollerUssClassName .unity-scroll-view__vertical-scroller 이 타입의 요소에 있는 세로 스크롤러의 USS 클래스명입니다.
horizontalVariantUssClassName .unity-scroll-view--horizontal ScrollView가 가로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Horizontal
verticalVariantUssClassName .unity-scroll-view--vertical ScrollView가 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.Vertical
verticalHorizontalVariantUssClassName .unity-scroll-view--vertical-horizontal ScrollView가 가로 및 세로 모드일 때 추가되는 USS 클래스명입니다.ScrollViewMode.VerticalAndHorizontal
scrollVariantUssClassName .unity-scroll-view--scroll
disabledUssClassName .unity-disabled 비활성화된 로컬 요소의 USS 클래스명입니다.

또한 인스펙터 또는 UI 툴킷 디버거의 매칭 선택자 섹션을 사용하여 해당 계층 구조의 모든 레벨에서 VisualElement 컴포넌트에 영향을 주는 USS 선택자를 확인할 수도 있습니다.

추가 리소스

UXML 요소 RepeatButton
UXML 요소 Scroller