[Unity] Scrollrect 컴포넌트로 Scrollview 만들기

[기본개념]

Unity에서 제공하는 스크롤 사각 영역(Scroll Rect) Component로 콘텐츠를 스크롤하는 기능을 만들 수 있습니다.

Scroll Rect의 기본 속성은 다음과 같습니다.

- 프로퍼티

프로퍼티	기능 설명
Content	커다란 이미지와 같은, 스크롤될 UI 요소의 사각 트랜스폼에 대한 참조입니다.
Horizontal	수평 스크롤링을 활성화합니다.
Vertical	수직 스크롤링을 활성화합니다.
Movement Type	제한 없음, 탄성 있음 또는 위치 한정. 탄성 있음이나 위치 한정 옵션을 사용하면 콘텐츠가 스크롤 사각 영역 범위 내에 머물게 됩니다. 탄성 있음 모드를 사용하면 콘텐츠가 스크롤 사각 영역 가장자리에 닿으면 튕기게 됩니다.
Elasticity	탄성 있음 모드에서 사용할 탄성 정도입니다.
Inertia	관성이 설정되면 드래그 후 포인터를 떼더라도 콘텐츠가 계속 움직이게 됩니다. 이를 사용하지 않은 경우, 드래그해야만 콘텐츠가 움직이게 됩니다.
Deceleration Rate	관성이 설정되면 감속률은 콘텐츠가 얼마나 빠르게 정지하는지 결정합니다. 이 값이 0이면 바로 멈추게 됩니다. 값이 1인 경우 콘텐츠는 느려지지 않고 계속 움직이게 됩니다.
Scroll Sensitivity	스크롤 휠과 트랙 패드 스크롤 이벤트 민감도입니다.
Viewport	콘텐츠 사각 트랜스폼의 부모인 뷰포트 사각 변환에 대한 참조입니다.
Horizontal Scrollbar	수평 스크롤바 요소에 대한 선택 참조입니다.
Visibility	스크롤바를 사용하지 않는 경우 자동으로 숨길지, 선택적으로 뷰포트도 확장할지 결정합니다.
Spacing	스크롤바와 뷰포트 간 공간입니다.
Vertical Scrollbar	수직 스크롤바 요소에 대한 선택 참조입니다.
Visibility	스크롤바를 사용하지 않는 경우 자동으로 숨길지, 선택적으로 뷰포트도 확장할지 결정합니다.
Spacing	스크롤바와 뷰포트 간 공간입니다.

 

- 이벤트(Events)

프로퍼티	기능
On Value Changed	스크롤 사각 영역의 스크롤 포지션이 변경되면 호출되는 Unity 이벤트입니다. 이벤트는 현재 스크롤 포지션을 Vector2 타입 동적 인수로 보낼 수 있습니다.

 

Scroll rect 컴포넌트 속성에서 가장 헷갈리는 개념은 Viewport와 Content 인 것 같습니다.

* Viewport : 표시하고자 하는 콘텐츠가 보여질 곳

* Content : 표시하고자 하는 내용물

---

[사용 방법]

1. 루트 Object에 스크롤 Scroll Rect 컴포넌트 추가하기.

Viewport에는 Mask 컴포넌트가 포함됩니다. 컨텐츠를 보여줄 때, Mask 영역까지만 보이게 제한할 수 있습니다.

이때, 스크롤되는 모든 콘텐츠는 뷰포트의 자식인 단일 콘텐츠 Object의 Child 객체여야 합니다.

 

2. 스크롤이 보이게 할 건지, 배경색은 있게 할 건지 등등 Custom 하기

Horizontal Scrollbar, Vertical Scrollbar 를 다 없앤 상태.

 

Horizontal 속성만 체크해주면 가로만 스크롤이 가능하다.

Movement Type을 Elastic으로 주면 끝부분에서 뚝 끊기지 않고 튕기는 모션이 가능하다.

 

 

3. 이 때, 마지막까지 스크롤이 안되고 튕긴다면 Content 객체에 Content Size Fitter를 달아준다.

Content Size가 짝아서 그런 것.

 

Content Size Fitter의 Horizontal Fit 속성을 Preferred Size로 부여하면 Content 크기가 자식 객체의 가로 길이만큼 할당되기 때문에 끝까지 스크롤이 가능해진다.

 

+ 정렬을 위해 Horizontal Layout Group 을 달아주었따.

 

4. Content 내부의 객체 가로, 세로 이미지가 안보인다면 Layout Group 의 Child Size 요소를 변경해주면 된다.

Card List 가로 배경이 안나오고 배치가 이상했었는데 Vertical Layout Group 의 Control Child Size, Child Force Expand 를 적용해주니 잘 보였다.

 

💛 Unity Manual 참고

https://docs.unity3d.com/kr/2019.4/Manual/script-ScrollRect.html

스크롤 사각 영역 - Unity 매뉴얼