[UI] 스크롤 뷰

1. 하이라키에서 스크롤뷰를 선택합니다. 

 

 

2. 스크롤뷰는 Scroll View  (1) Viewport - Content (2) Scrollbar Horizontal (3) Scrollbar Vertical

 

 

 

3. Scroll View의 크기를 SidePanel 패널의 크기만큼 늘려줬습니다.

 

 

4. Scroll Rect를 설정해줘야 하는데 

 

(1) Horizontal은 수평 스크롤를 하기 위한 기능이고 Vertical은 수직 스크롤을 하기 위한 기능이며 저는 수직 스크롤만 필요하기에 Horizontal을 꺼줬습니다. 

(2) Movement Type  :  Unrestricted은 스크롤 영역에 상관 없습니다. ,  Elastic 스크롤 영역을 벗어나면 제자리로 돌아옵니다. , Clamped 스크롤 영역을 벗어나지 않습니다. 

Elasticity : 만약 스크롤 영역이 벗어나고 얼마나 빨리 돌아오게 할지에 대한 기능입니다. 수치값이 커지면 느리게 돌아옵니다.

(3) Inertia : 스크롤중 멈췄을 때 관성의 법칙이 작용되는지 여부 (자연스럽게 보이게 하는 기능) 

끄면 스크롤중 멈췄을 때 바로 멈춥니다. 

 

(4) Visibility

Permanent : 스크롤 방향 설정을 따라갑니다.

Auto Hide : 스크롤 영역이 스크롤바 길이보다 작으면 비활성화가 되고 커지면 활성화됩니다.

Auto Hide And Expand Viewport : 스크롤바를 뷰포트에 맞춰서 확장 됩니다.

 

 

 

5.Content안에 이제 원하는 오브젝트를 추가해줍니다.

단순히 추가를 하면 같은 위치에 추가되어 겹처서 보이지 않습니다. 

 

 

6. Vertical Layout을 추가해줍니다.

 

7. 원하는 설정에 맞춰서 Padding 설정값을 바꿔줍니다. (

저 같은 경우 세로로 길어져야하기 때문에 Child Alignment를 Upper Center(상측 가운데 기준)로 하고 Control Child Size를 Width를 Content Size에 맞추기 위해 켰습니다.

 

1개만 있을 때

 

8. 갯수를 늘려 보면

 

이런식으로 늘어납니다. 

 

하지만 실행을 해보면 사이드 스크롤바가 내려가지지 않는데 그 이유는 Content의 크기도 오브젝트가 늘어난 만큼 늘어나야 하는데 그렇지 않아서 생기는 문제입니다.

Content 오브젝트에 Content Size Fitter 컴포넌트를 추가하고 Vertical Fit을 Preferred Size를 해줍니다. 

Unconstrained
기본값 (제어 x)

Minimum Size
자식 요소가 필요로 하는 최소 크기만큼 맞춰줍니다.

Preferred Size
자식 콘텐츠의 권장 크기에 맞춰 자동 조정 합니다.

 

이제 다시 실행해보면 스크롤바를 아래까지 내릴 수 있게 됩니다.