유니티 UI 속성 (Scroll bar, Scroll View)

유니티 UI 속성 ( Scroll bar, Scroll View) 그리고 Scroll Rect 컴포넌트

 

1. Scroll bar 

 

한 번에 보여주기 어려운 콘텐츠를 나누어 보여주기 위한 UI 요소이다. 컴퓨터를 사용한 작업을 하다 보면 스크롤바를 한 번쯤 보았을 것이다. 크기가 큰 그림이나, 리스트 형식으로 정보를 보여줄 때 나누어서 보여주기에 유용하다. 스크롤바는 켄텐츠를 보여주기 위한 UI 요소가 아니다. 콘텐츠를 컨트롤하기 위한 컨트롤러이다. 

 

1.1 속성

공통 속성

Interactable : 사용자로부터의 입력을 받을 것인지 설정한다. 선택이 해제되면, 사용자의 입력을 받지 않는다. 

Transition : None, Color Tint, Sprite Swap, Animation의 네 가지의 옵션이 있다. 색상, 스프라이트, 애니메이션 중 선택한 옵션을 사용해, 선택과 같은 이벤트의 발생을 시각적으로 표시해준다. 

Color Multiplier : 이벤트 색상의 값에 Color Multiplier 값을 곱한다. 1.0~5.0 사이의 값을 갖는다. 

Fade Duration : 이벤트의 전환이 발생하였을 때, 이벤트 전환 시간 설정이다.  

Scrollbar 속성

Handle Rect : 스크롤바의 핸들러이다. 스크롤바의 설정 값에 따라서 크기, 모양, 위치 등이 변한다. 

Direction : 스크롤바의 방향을 설정한다. Left To Right, Right To Left, Top To Bottom, Bottom To Top의 네 가지의 선택 옵션이 있다. 콘텐츠에 맞는 설정을 하면 된다. 

Value : 스크롤바의 핸들러의 위치를 설정한다. 0.0f ~ 1.0f 사이의 값을 갖는다. 

Size : 스크롤바 핸들러의 크기이다.  클릭(터치) 이벤트가 발생할 경우, 핸들러를 Size 만큼 이동시킨다. 

Number Of Steps : 스크롤바가 허용하는 스크롤 포지션으로, Value의 값이 0.0부터 1.0까지 몇 번이 걸리는지를 표시한다.   

 

OnValueChanged : 스크롤바의 값이 변경되었을 때 발생하는 이벤트이다. 이벤트를 수신하는 리스너를 등록한다.

1.2 리스트 뷰 예제

리스트 뷰를 만들어 Scrollbar를 등록하고 컨트롤하는 간단한 예제이다. 

Scrollbar의 속성을 리스트 뷰에 맞도록 값을 초기화한다. 

 

notyu.tistory.com/53

유니티 UI 리스트 뷰 (List View)

 

2. 스크롤 뷰 Scroll View

 

스크롤 뷰는 스크롤바를 사용하여 한번에 보여주기 어려운 콘텐츠를 보여주는 UI 요소이다. 스크롤 뷰는 콘텐츠를 보여주기 위한 뷰와 컨트롤러를 포함한다. 스크롤뷰는 Scroll Rect를 사용하여, UI를 관리한다.  크기가 큰 콘텐츠를 보여주도록 구성되어 있다. 

스크롤 뷰를 사용하면, 1.2의 리스트 뷰를 쉽게 구현할 수 있다. 

2.1 Scroll Rect 

공간을 많이 차지하는 콘텐츠를 작은 사각 영역에 표시하는 데 사용할 수 있다. 스크롤 렉트는 콘텐츠를 스크롤하는 기능을 제공한다.  큰 컨텐츠를 수직으로 제어하거나, 수평으로 제어할 수 있는 기능을 제공한다.  

 

Content : 컨텐츠 뷰로 데이터를 포함한다.

Horizontal : 수평 스크롤을 사용할 것인지를 설정한다. 

Vertical : 수직 스크롤을 사용할 것인지를 설정한다.

Movement Type : Unrestricted, Elastic, Clamped 모드가 있다. 

 

• Elastic : 스크롤하면, 컨텐츠 뷰는 일시적으로 이동하고, 원래의 위치로 돌아온다.  Elasticity는 Elastic 모드에서 사용 가능하며, 원래 위치로 되돌아오는데 걸리는 시간이다.
• Unrestricted : 콘텐츠 뷰의 위치가 제약을 받지 않는다. 
• Clamped : 콘텐츠 뷰 크기만큼 이동한다.  

 

Inertia : 컨텐츠 뷰가 관성력에 의해 움직인다. 사용자로부터 드래그 이벤트가 발생하고, 클릭이 해제된 입력 값에 영향을 받는다. 

Deceleration Rate  : 컨텐츠 뷰의 관성력을 초당 절감시키는 비율을 설정한다. 1로 설정할 경우 멈추지 않는다. 0으로 설정할 경우에는 즉시 관성력이 사라진다. 

Scroll Sensitivity : 스크롤 민감도 설정이다. 

 

ViewPort : Mask를 가지고 있는 뷰로, 콘텐츠를 보여주는 뷰다.   

 

Horizontal Scrollbar :  수평 스크롤바 설정이다.

Vertical Scrollbar : 수직 스크롤바 설정이다.

 

Visibility :  스크롤바를 표시하는 방식을 설정한다. 

• Permanent는 스크롤바를 항상 보여준다.
•  Auto Hide : 콘텐츠의 크기가 ViewPort보다 작으면, 스크롤바를 숨긴다. 
• Auto Hide and Expand Viewport :  콘텐츠의 크기가 ViewPort보다 작으면, 스크롤바를 숨기고, Viewport를 스크롤바 영역으로 확장해 콘텐츠를 보여준다.