쉽게 만드는 UI 스크롤뷰

개인적으로 uGUI 의 사용을 늘리고 있다.
NGUI 는 널리 쓰이는 서드파티 에셋이지만, 안드/아이폰 이외의 작업에는 아무래도 호환성 문제가 생기고,
유니티 최신 엔진 업데이트시에 가끔 문제를 일으켰던 기억이 있기 때문이다.
예전에 안드로이드TV를 지원하게 만들다가, NGUI 는 KEY NAVIGATION 지원이 거의 전무하다 시피했던 기억이 난다.

개인 프로젝트는 최대한 uGUI 를 이용해서 만들고 있다.
SizeFitter 라든가 Layout 세팅 관련 컴포넌트 스크립트가 예상보다 많이 준비되어 있어서 간단히 만들 수 있다.

오늘 초보자인 어떤 분이 GUI 를 만들다가 힘들어서 질문을 해왔다.
조금 생각해보니 처음 만드는 사람이라면 확실히 어려울 수 있을거 같다는 생각이 들어서
따라하기 스타일로 아래에 Scroll View 만들기를 정리해보려고 한다.

--------------------------------------------------

아래와 같은 하단 좌우 스크롤뷰 UI를 만들어보자.

1. Unity 에서 Hierarchy 메뉴에 우클릭 > UI > Canvas 를 하나 만들어서 적당히 세팅해준다. (위치와 크기의 세팅 등)

2. Canvas에서 우클릭해서 UI > Scroll View 를 클릭해서 추가해준다.

3. 생성된 Scroll View 의 사이즈와 위치를 정리해준 후, Inspector 에 아래 내용대로 체크/언체크 해준다.

좌우로만 움직일 스크롤 뷰라서 Horizontal 만 체크한다.

4. 컨텐츠 오브젝트의 제어 콤포넌트 추가. (여기가 어렵다.)

Hierarchy 에 Content 를 선택해 보면 Rect Transform 이외에 아무런 컴포넌트가 없다.

여기에 필요한건 Child 오브젝트를 추가할 경우 "해당 오브젝트 들의 레이아웃 설정"과 "사이즈를 맞춰주는 기능"이 필요하다.

예전에는 직접 코드를 짰는데, 찾아보니 uGUI 에 이미 준비되어 있다.

5. Content 오브젝트에 컴포넌트를 추가한다. (제일 중요한 부분)

A. Horizontal Layout Group 이라는 컴포넌트

B. Content Size Fitter 라는 컴포넌트

COntent Size Fitter 에 Horizontal Fit 는 Preferred Size 로 맞춰준다.

5. Content 이하에 Button 오브젝트 등 필요한 오브젝트를 추가하여 늘어 놓는다.

6. Unity 의 플레이 버튼을 클릭하면 게임 씬에서 아래와 같이 조작이 가능하다.

좌우로 스크롤 해보면 원하는대로 스크롤이 가능!

<끝>