Unity:: ScrollRect의 개념 & 동적 정렬

개요

이번 글에서는 Unity Component 중 ScrollRect를 통해 UI 요소를 스크롤하고 UI 요소가 동적으로 생길 때 ScrollRect를 설정하는 방법에 대해 알아보고자 한다.

---

ScrollRect

콘텐츠를 스크롤할 수 있는 Component

---

구조

Hierarchy에서 GameObject > UI > Scroll View 메뉴를 선택했을 때 뜨는 기본값이다.
 

Scroll View 구성요소 조건

• Viewport (뷰포트) : 스크롤되는 화면을 보여주는 것
  
  • mask 컴포넌트가 있어야 함

추가설명 : mask 컴포넌트를 쓰는 이유

추가설명

• Content (콘텐츠) : 스크롤되는 대상
  • Viewport 의 단일 게임 오브젝트여야 함 (스크롤되고자 하는 대상은 1가지여야만 한다는 얘기)
• Scrollbar (스크롤바)
  • Horizontal / Vertical 두가지 종류가 있음
  • ScrollRect 설정을 통해 자동으로 안 보이게 할 수 있음

추가설명 : Scrollbar를 하나만 사용할 경우
보통 Horizontal Scrollbar와 Veritcal Scrollbar 중 하나만 사용할 것이다.
이때에는
 
1. 위 기본값에서 사용하지 않는 Scrollbar를 삭제한 후 

2. ScrollRect에서 Horizontal 체크박스를 해제하면 된다.
 
사용이 어려울 경우 GameObject > UI > Scroll View 메뉴의 기본값을 바탕으로 Content만 수정하면 스크롤하는 데에는 큰 문제가 없을 것이다.
 
ScrollRect 컴포넌트의 위치는 기본값 같이 Scroll View에 있을 수도 있고 Viewport에 위치할 수도 있다.
이때 자동으로 숨겨지는 스크롤바를 사용하려면 기본값같이 세팅해야 한다.

---

ScrollRect로 동적 정렬하기

우리는 Content 내용을 Script를 통해 생성할 때도 있을 것이다. 이때 설정을 따로 하지 않으면 스크롤되지 않는 현상이 발생한다.

이는 Content의 크기가 생성된 자식 오브젝트들보다 크기가 작아서 생기는 현상이다.
 
자동으로 크기를 조절하기 위하여
Content 오브젝트에 Content size fillter를 추가한 후 방향에 맞게 Preferred Size로 설정하면 자식이 추가될 때마다 크기가 자동으로 맞춰지게 된다.

이때 Content 오브젝트에 넣어야 함을 잊지말자!
또한 정렬하고 싶을 때도 Content 오브젝트에 Vertical / Horizontal / Grid Layout Group을 추가하면 된다.
(필자는 처음에 ScrollRect를 사용했을 때 어디에 Layout Group을 추가할지 몰라서 헤맸었다)

---

생각해볼 것

Content의 자식 오브젝트가 1000개라고 해보자. 
이때 보이는 오브젝트는 4개라면 나머지 996개는 보이지 않는 상태라서 리소스가 낭비되는 문제가 있다.
이를 해결하는 자료를 첨부하였다. 다음에 ScrollRect 심화편으로 이와 관련된 내용을 정리하고자 한다.

 

 

(참고 자료) 

https://github.com/boonyifei/ScrollList/blob/master/Assets/Scripts/ListManager.cs

 

---

관련 자세한 내용은 공식문서를 참고하며 도움이 될 것이다.

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