ScrollView

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

ScrollView 생성

UI 빌더, UXML, C#을 사용하여 ScrollView를 생성할 수 있습니다. 다음 C# 예시에서는 타이틀 레이블과 여러 토글 요소가 포함된 가로 및 세로 스크롤 기능을 모두 갖춘 ScrollView를 생성합니다.

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 빌더에서 스크롤바의 이동 방향을 설정하려면 인스펙터 창에서 다음 Mode 옵션 중 하나를 선택합니다.

• Vertical (default)
• Horizontal
• Vertical and Horizontal

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

• Auto (default)
• Always Visible
• Hidden

스크롤 속도 컨트롤

스크롤 속도를 제어하려면__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 빌더, 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-direction을 row로 설정하고 flex-wrap을 wrap으로 설정합니다.

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. VisualElement를 ScrollView 내에서 컨테이너로 생성합니다. ScrollView 내의 원본 컨테이너 요소에는 바운드가 설정되어 있지 않으므로(크기가 무한함) 텍스트가 올바르게 래핑되지 않습니다. 이 컨테이너 VisualElement는 텍스트를 래핑할 수 있는 크기가 한정되어 있습니다.
3. 레이블을 VisualElement 컨테이너에 추가합니다.

예제

• ScrollView 안에 콘텐츠 래핑: 이 예시는 스타일을 사용하여 스크롤 뷰 안에 콘텐츠를 래핑하는 방법을 보여 줍니다.

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

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

구성원 UXML 속성

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

|이름|타입|설명| |-|-|-|| |elastic-animation-interval-ms|long|탄성 스프링 애니메이션 간의 최소 시간 간격으로 밀리초 단위입니다. | |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 속성

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

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

USS 클래스

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

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

추가 리소스

• ListView
• 스크롤러