Scroll View에 대한 사용법 정리

Photon을 사용하여 매치메이킹을 구현하면서

Room List를 보여줄 방법으로 Scroll View를 사용하기로 하였습니다.

Scroll View, 별거 없을거라 생각하고 기회되면 한 번 쓰지... 하는 생각으로 미뤄두다가

처음 사용하게 되었는데 꽤 쓸만한거 같습니다.

깊게 고민하고 사용하지 않아서 그럴지도 모르지만

간단하게나마 사용법에 대해 정리하려고 합니다.

 

---

Canvas 생성은 생략하고,

Scroll View를 만들게 되면 이런 식으로 생성됩니다.

 

최상위 객체인 Scroll View에는 Scroll Rect 컴포넌트가 있습니다.

 

이름만 보아도 기능에 대해 충분히 유추 가능한 것 같습니다.

 

먼저 두 bool 값에 대해 보면 체크한 축으로 스크롤이 가능합니다.

체크를 해제하면 해당 축으로는 스크롤을 할 수 없습니다.

 

Movement Type은 직접 사용해봐야 이해가 쉬운데,

스크롤링이 되는 방식에 대한 설정입니다. 

 

Unrestricted는 무한정 스크롤을 할 수 있습니다.

끝도 없이 스크롤을 옮길 수 있습니다.

 

Elastic은 '탄성'이라는 뜻인데,

말그대로 원래대로 되돌아오게 만듭니다.

UI 요소가 화면 밖으로 나갈 정도로 스크롤 하면

다시 화면 안에 잡힐만큼 스크롤이 되돌아옵니다.

 

Clamped는 스크롤을 제한합니다.

UI 요소의 크기에 맞춰서 말입니다.

요소가 화면 밖으로 나갈 정도로 스크롤 할 수는 없습니다.

 

Inertia는 관성이라는 뜻인데,

스크롤을 멈추더라도 바로 멈추지는 않고

핸들이 미끄러지듯 서서히 멈추게 하는 부분입니다.

 

 위 사진은 세로, 가로의 핸들에 대한 설정인데

Auto Hide는 Scroll 조작이 없더라도 요소를 전부 볼 수 있는 경우

핸들을 숨기겠다는 설정입니다.

그러다 요소가 많아져서 스크롤을 해야할 경우

핸들을 활성화합니다.

 

---

사실 간단하게 기능만 훑고 가려다가

약간 손을 써야하는 부분이 생겨서 이 글을 작성하게 되었습니다.

 

여기까지의 기능들이란게

Viewport 영역 안에서

Content 영역을 스크롤하여 보기 위함인데,

Content 하위에 요소가 아무리 많아도

Content의 Rect 크기가 Viewport 영역보다 작으면

스크롤이 되지 않습니다.

 

이것은 Viewport 영역입니다.

 

 

이것은 Content 영역입니다.

 

Content 영역의 높이가 Viewport 영역보다 작으니

세로 축에 대해 스크롤을 할 수 없습니다.

 

 

그 하위 객체로 버튼을 아무리 추가해도

Content 영역의 크기가 저래선 스크롤을 할 수 없습니다.

 

때문에 딱 두 가지만 추가하면 되는데,

 

Content 객체에 Layout Group 컴포넌트를 추가하여

스크롤하고자하는 축에 대해 하위 UI 요소를 정렬하고,

Content Size Fitter 컴포넌트를 마저 추가하여 Content의 Rect Size를 조절합니다.

 

 Fit 옵션에서 Unconstrained는 제한이 없다는 의미로 세로 Size를 조절해주지 않습니다.

 

Min Size로 설정하면 하위 요소들의 세로 범위에 맞춰 Size를 조절해줍니다.

 

 

Preferred Size는...

Min Size랑 차이를 모르겠습니다.

 

대충 이정도만 파악해도 사용에 무리 없을 것 같습니다.