랩 패널(Wrap Panel)은 가로(혹은 세로)로 아이템이 쌓이다가 한 줄이 꽉 차면 다음 줄로 넘어가는 패널을 말합니다.
랩 패널에 스크롤 뷰를 연결하여 아이템이 늘어나면 스크롤도 동작하도록 구현하도록 하겠습니다.
1. UI에 스크롤 뷰 추가
1) 게임 오브젝트(GameObject) > UI > 스크롤 뷰(Scroll View)
를 선택하여 UI 화면에 스크롤 뷰를 추가합니다.
추가한 스크롤 뷰의 이름을 'WrapScroll'로 해줍니다.
2) 스크롤 활성/비활성 시키기
스크롤 뷰를 추가하면 가로/세로 스크롤이 모두 자동(Auto)으로 되어 있습니다.
이 프로젝트에서는 세로 스크롤만 사용하므로 가로는 끄고, 세로는 항상 표시되도록 수정해야 합니다.
'WrapScroll'를 선택합니다.
인스팩터에서 'Scroll Rect' 항목을 봅니다.
가로(Horizontal)을 끕니다.
세로 스크롤바(Vertical Scrollbar)의 가시성(Visibility)을 '영구적(Permanent)'으로 설정합니다.
이제 가로 스크롤은 보이지 않고 세로 스크롤은 내용이 부족해도 표시됩니다.
2. 랩 패널(Wrap Panel) 만들기
랩 패널만 구현하려면 '그리드 레이아웃 그룹(Grid Layout Group)'을 사용하면 됩니다.
'그리드 레이아웃 그룹'만 사용해도 랩 패널을 구현할 수 있습니다.
하지만 이대로는 스크롤이 되지 않습니다.
스크롤이 되도록 구현하겠습니다.
2-1. 그리드 레이아웃 그룹(Grid Layout Group) 추가
스크롤 뷰의 콘탠츠(Content)에 컴포넌트 추가를 눌러 '그리드 레이아웃 그룹(Grid Layout Group)'을 추가합니다.
셀 크기를 사용할 크기로 지정해 줍니다.
2-2. 컨텐츠 사이즈 피터(Content Size Fitter)추가
'컨텐츠 사이즈 피터(Content Size Fitter)'를 추가 합니다.
가로 맞춤은 'Unconstrained', 세로 맞춤은 '최소 크기(Min Size)'로 설정합니다.
3. 테스트
설정을 잘했다면 에디터에서 'Content'에 아이템을 추가하면 아래와 같이 랩 패널 동작이 잘됩니다.
마무리
이 방식으로 구현한 랩 패널의 아이템은 한 가지 크기의 아이템만 넣을 수 있습니다.
별다른 조치를 하지 않으면 '그리드 레이아웃 그룹'에 설정된 크기로만 아이템이 들어갑니다.
더 작은 아이템은 비어있는 오브젝트로 감싸서 넣는 등의 작업을 하면 될 듯하네요.
