ScrollView는 스크롤할 수 있는 영역 안에 해당 콘텐츠를 표시합니다.콘텐츠를 ScrollView에 추가하면 콘텐츠가 ScrollView의 콘텐츠 컨테이너(#unity-content-container)에 추가됩니다.
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 옵션 중 하나를 선택합니다.
UI 빌더에서 스크롤바의 표시 여부를 설정하려면 인스펙터 창에서 다음 Horizontal Scroller Visibility 또는 Vertical Scroller Visibility의 옵션 중 하나를 선택합니다.
스크롤 속도를 제어하려면 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의 콘텐츠 컨테이너 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 안에 레이블 요소의 텍스트를 래핑하려면 다음을 수행하십시오.
white-space: normal; 스타일을 레이블 요소에 적용합니다.C# 클래스:ScrollView
네임스페이스:UnityEngine.UIElements
기본 클래스:VisualElement
이 요소에는 다음 구성원 속성이 있습니다.
| 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 |
세로 스크롤바 표시 여부를 지정합니다. |
이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.
| 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에 대해 지속성이 비활성화됩니다. 자세한 내용은 데이터 지속성 확인을 참조하십시오. |
다음 표는 모든 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 선택자를 확인할 수도 있습니다.