[Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Scroll View)

---

---

✔ 유니티 - Scroll View 사용방법

UI 자동 정렬 - Vertical Layout Group

Content auto resize - Content Size Fitter

---

---

 

오늘은 Scroll View에 대해서 알아보겠습니다.

Scroll View도 흔히 볼 수 있죠. 문서를 만들면서 문서량이 많아지면 스크롤바가 자동으로 늘어나고 현재보는 시점에 맞춰 스크롤바가 알아서 움직이고 등등..

이런기능을 지원하는 것이 Scroll View입니다.

먼저 Scroll View를 만들겠습니다.

● Scroll View 생성

- Hierarchy -> 마우스 우클릭 -> UI -> Scroll View 선택

짜잔~ 이렇게 생성되었습니다.

이제 어떤 속성들이있는지 한번 봐야겠습니다.

Horizontal	스크롤 뷰의 수평 이동 기능 활성화?
Vertical	스크롤 뷰의 수직 이동 기능 활성화?
Movement Type	스크롤 이동 방법 정의 ▶ Unrestricted - 콘텐츠가 스크롤 밖으로 나가도 제한하지 않음 ▶ Elastic - 콘텐츠가 스크롤 밖으로 나가면 Elasticity 값 속도로 스크롤 뷰 안으로 돌아온다 ▶ Clamped - 콘텐츠가 스크롤 밖으로 나가지 못하게 완전히 제한
Inertia	관성 - 스크롤 움직이다가 멈췄을때 서서히 멈추게
Scroll Sensitivity	스크롤 감도. 높을수록 빠르게 스크롤
Horizontal Scrollbar	수평 스크롤바
Vertical Scrollbar	수직 스크롤바
Visibility	스크롤바 보이는 형식 지정 - 항상보이게, 자동 숨기게, 자동숨기고 숨긴만큼 크기 넓히기

위 내용을 바탕으로 나만의 스크롤뷰를 제작한다.

스크롤뷰에 대해서 알아봤으니 이제 활용을 해봐야겠죠?

 

● Scroll View 활용 - 아이템 목록(List)  만들기

▷ 아이템 객체 만들기

Scroll View 하위 자식 Contents -> 마우스 우클릭 -> UI -> Text

그럼 Scroll View안에 Text가 들어갔죠?

이제 Text를 여러개 만들어서 넣어봅니다. ( Text 선택하고 복제 -> Ctrl + D )

위치도 변경해보세요. 저는 한 7개 만들겠습니다.

근데 뭔가 이상하죠? 아무리 만들어도 스크롤바가 자동으로 늘어나지도 않고...

만들때마다 하나하나 위치를 편집할 수도 없고... 

 

▷ 자동으로 오브젝트 정렬하기

Contents 객체를 클릭 -> Inspector 창에서 Add Component 클릭 -> Vertical Layout Group 클릭

짜잔~ 자동으로 정렬된것을 볼 수 있어요.

목록이 촘촘하게 붙어있었으면 좋겠으니까 Child Force Expand에서 Height 체크를 꺼줍니다.

잘 되는지 확인하기 위해서 Text 복사를 또 10개정도 더 해봅니다.

알아서 정렬되서 잘 추가되죠?

근데 아직 뭔가 부족합니다. 

아무리 추가해도 스크롤바 사이즈가 자동으로 조절이안되네요..

 

▷ 컨텐츠 사이즈 자동 조절하기

Content 객체 클릭 -> Add Component -> Content Size Fitter 클릭 -> Vertical Fit을 Preferred Size로 변경

이제 다시한번 복사해봅시다!

자동으로 잘 늘어나죠? ㅎㅎㅎ

이제 텍스트도 변경해봅니다. 이 목록은 학생이름 목록 뷰네요.

# 주의 점

Scroll View의 기능은 아주 좋은데 대량목록에는 적합하지 않아요.  500개가 넘는 항목을 Scroll View에 담으면 성능이 매우 저하됩니다.  이를 해결하는 방법은 재사용 스크롤뷰로 한단계 업그레이드해야합니다.

 

이제 유니티의 UI 부분은 여기서 마무리하겠습니다.

DropDown이나 몇개가 더 있긴하지만 거의 같은 내용이 많아 생략하고 다음 단계로 넘어가겠습니다.

감사합니다!!!