[Unity] UI 스크롤(Scroll) 다루기 - 스크롤 뷰(Scroll View)를 이용하여 UI 리스트 뷰(List View) 만들기

프로그래밍/Unity, MAUI, Mono

당근천국 2024. 11. 4. 15:30

프로그램에서 UI 하면 많이 쓰이는 방식 중 하나가 스크롤이 달린 리스트입니다.

스크롤 뷰(Scroll View)를 이용하면 간단하게 만들 수 있습니다.

연관글 영역

1) 게임 오브젝트(GameObject) > UI > 스크롤 뷰(Scroll View)

를 선택하여 UI 화면에 스크롤 뷰를 추가합니다.

추가한 스크롤 뷰의 이름을 'List View'로 해줍니다.

2) 스크롤 활성/비활성 시키기

스크롤 뷰를 추가하면 가로/세로 스크롤이 모두 자동(Auto)로 되어 있습니다.

이 프로젝트에서는 세로 스크롤만 사용하므로 가로는 끄고, 세로는 항상 표시되도록 수정해야 합니다.

'List View'를 선택합니다.

인스팩터에서 'Scroll Rect' 항목을 봅니다.

가로(Horizontal)을 끕니다.

세로 스크롤 바(Vertical Scrollbar)의 가시성(Visibility)를 '영구적(Permanent)'으로 설정합니다.

이제 가로 스크롤은 보이지 않고 세로 스크롤은 내용이 부족해도 표시됩니다.

스크롤 뷰의 '콘텐츠(Content)' 에는 새로운 줄(row)이 생성도 자동으로 쌓이지 않습니다.

자동으로 쌓이게 하기 위해 '콘텐츠(Content)'에 '버티칼 레이아웃 그룹(Vertical Layout Group)' 컴포넌트를 추가해야 합니다.

(가로로 쌓고 싶다면 호리젠탈 레이아웃 그룹(Horizontal Layout Group)을 추가하면 됩니다.)

추가한 버티칼 레이아웃 그룹의 'Child Force Expand' 속성을 모두 꺼줍니다.

(사용하려는 상황에 맞게 옵션을 수정하면 됩니다.)

이제 콘탠츠 영역에 아이템을 잔뜩 추가하고 테스트해 보면 스크롤이 되지 않습니다.

이것은 콘탠츠 영역이 내용물에 맞춰 커지지 않기 때문입니다.

1) 'Content'에 자동으로 크기를 지정하기 위해 '콘텐츠 사이즈 필터( Content Size Fitter, Add Component > Layout > Content Size Fitter )' 컴포넌트를 추가해 줍니다.

2) 추가한 콘텐츠 사이즈 필터에 '세로 맞춤(Vertical Fit)' 속성을 '최소 크기(Min Size)'로 설정합니다.

이제 정상적으로 스크롤이 됩니다.

테스트 프로젝트 : github - dang-gun/UnitySamples/UI_Scroll

스크롤 뷰를 이용하면 간단하게 리스트 뷰를 만들 수 있습니다.

직접 구현하고 싶다면 이전 포스팅을 참고하면 됩니다.