2017. 2. 2. 16:00

유니티(Unity) UI에서 스크롤을 쓰는 방법은 크게 스크롤 뷰(Scroll View)를 쓰는 방법과 패널에 스크롤 바(Scroll bar)를 연결하는 방법이 있습니다.

빠르고 편하게 쓸 생각이면 스크롤 뷰를 쓰는 것이 좋고 직접 커스텀하게 만들 생각이면 스크롤 바를 연결하는 것이 좋습니다.

 

 

1. 스크롤 뷰(Scroll View)를 사용하는 방법

GameObject > UI > Scroll View

 

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

 

콘텐츠(Content)안에 스크롤할 내용을 넣고 적당히 콘텐츠의 크기를 수정해 줍니다.

 

 

 

생성된 스크롤 뷰에 있는 콘텐츠안에

 

GameObject > UI > Image

를 추가하고 원하는 이미지를 넣어 주고 콘텐츠 크기보다 크게 지정해 줍니다.

 

 

 

스크롤 뷰 보다 이미지를 크게 지정하고 콘텐츠의 크기는 내용물과 같거나 커야 스크롤이 됩니다.

씬(Scene)창에서 콘텐츠의 크기와 내용물의 크기를 확인할 수 있습니다.

 

이제 테스트를 해봅시다.

 

 

잘 동작합니다.

 

 

2. 스크롤 바(Scroll Bar)로 만들기

스크롤 바로 스크롤을 구현하면 직접 스크롤뷰를 구현한다고 보시면 됩니다.

 

2-1. 레이아웃 잡기

빈 오브젝트(Create Object)를 생성하고 이름을 'Scroll Bar'로 넣고 크기와 위치를 지정합니다.

빈 오브젝트 안에 UI 패널(GameObject > UI > Panel)을 넣고 이름을 'PanelContent'로 넣습니다.

'PanelContent'의 'Rect Transform'속성에 앵커 프리셋(Anchor Presets)을 선택하여 'middle center'로 선택해 줍니다.

그리고 스크롤 될 크기만큼 크기를 지정해 줍니다.

 

 

 

'PanelContent'에 이미지(GameObject > UI > Image)를 하나 넣고 크기를 조절해 줍니다.

 

여기까지 따라오셨으면 아래처럼 보일 겁니다.

 

 

 

 

 

2-2. 마스크(Mask) 설정하기

아까 만든 'Scroll Bar'를 클릭하시고 '컴포넌트 추가(Add Component)'를 눌러 마스크(UI > Mask)를 추가해 줍니다.

마스크만 추가하면 변화가 없는데 마스크 영역이 비어있기 때문입니다.

이미지 컴포넌트(Add Component >UI > Image)를 추가하면 마스크 영역이 적용되는 것을 알 수 있습니다.

 

 

이제 테스트를 해봅시다.

 

 

 

스크롤은 되지 않는 군요 ㅎㅎㅎㅎㅎ

 

 

2-3. 스크롤 랙트(Scroll Rect) 설정하기

'Scroll Bar'에 스크롤 랙트(Add Component >UI > Scroll Rect)를 추가해 줍니다.

추가된 스크롤 랙트에 'Content'속성에 위에서 우리가 만든 'PanelContent'를 지정해 줍니다.

 

 

 

콘텐츠 크기가 제대로 지정돼 있다면 별문제 없이 동작을 할 것입니다.

테스트해봅시다.

 

 

 

잘 됩니다 ㅋ

 

2-3. 스크롤 바(Scroll Bar) 연결하기

이제 스크롤 바를 연결해 봅시다.

 

위에서 만든 'Scroll Bar'에 스크롤 바(Add Component > UI > Scroll Bar)를 2개 추가합니다.

그리고 각각 이름을 'Scrollbar Horizontal', 'Scrollbar Vertical' 넣습니다.

그리고 생성한 스크롤 바를 'Scroll Bar'에 'Scroll Rect'에 연결합니다.

'Scrollbar Vertical'는 'Direction'속성을 'Top To Bottom'로 바꿔 줍니다.

 

 

 

 

이제 테스트를 해봅시다.

 

 

원하는 대로 잘 작동합니다.

 

 

마무리

 

아래는 테스트 프로젝트입니다.

 

UIScroll_Test.zip

깃허브 주소 : https://github.com/dang-gun/Unity_UI_Scroll

 

자신만의 스크롤 바 동작을 만들려면 두번 째 다룬 직접 스크롤 뷰를 만드는 방법을 숙지해두는 것이 좋습니다.

간단하게 사용하려면 그냥 스크롤 뷰를 사용하시면 됩니다 ㅎㅎㅎㅎ