UI 객체가 아무리 많아도 짤리지 않고 쉽게 볼 수 있도록 만들어주는 스크롤 바 컴포넌트에 대해 알아보자.

우선 스크롤 바 UI를 적용할 만한 예제를 만들어보자. 예를들어 상점에서 아이템이 많아서 스크롤을 해서 아이템 목록들을 내리며 확인하는 기능등을 만들 수 있다. 직접 만들어 보자. 우선 Panel를 다음과 같이 만들자.

다음으로 Panel 자식 오브젝트로 Panel을 하나 더 만들고 이름을 ScrollRect로 바꾸고 아래와 같이 설정하자.

이제 SCrollRect의 자식 오브젝트로 Panel을 하나 더 만들고 이름을 contents로 바꾸고 아래와 같이 설정하자.

그리고 색상에서 알파값을 0으로 만들어서 투명하게 만들자. 이제 아이템 항목으로 버튼UI를 사용할건데 버튼 UI를 계속 생성하면 그에따라 우리가 수동으로 자리를 잡아줘야한다. 하지만 너무 불편하다. 그래서 유용한 컴포넌트 하나를 소개하겠다. 우선 contents를 눌러서 Grid Layout Group을 추가해주면 안에 생기는 UI들이 자동으로 수평,수직으로 정렬 된다 ,다음과 같이 말이다.

이제 Grid Layout Group의 프로퍼티들을 살펴보자.

Padding

Padding은 여백을 준다.

Cell Size

Cell Size는 자식 오브젝트의 크기를 동일하게 해준다.

Spacing

Spacing 오브젝트간의 간격을 조절할 수 있다.

Start Coner

Start Coner는 새로 채워질 때 어디서 부터 채워질 지를 결정한다.

Start Axis

Start Axis 수직으로 먼저 채울건지 아니면 수평으로 먼저 채울건지를 결정한다.

Child Aligment

Child Aligment 정렬 기준을 정한다.

Constraint

Constraint는 제한 조건을 준다. 행의 갯수나 열의 갯수에 제한을 줄 수 있다. 기본값으로 되어있는 Flexible은 유연하게 우리가 잡아둔 영역에 알아서 채워지게 하는 것이다.

다음과 같이 Grid Layout Group을 설정하면 다음 화면이 된다.

하지만 결국 이것 또한 UI갯수가 많아지면 범위를 넘어서고 만다. 여기서 컴포넌트를 하나 더 소개하겠다. 바로 Mask이다. 이 컴포넌트는 우리가 설정한 범위를 벗어나면 그림을 안보이게 해준다. 이걸 ScrollRect에 추가해보면

그림이 짤리는 걸 볼 수 있다. 근데 여기서 Show Mask Graphic는 Mask범위를 보여줄 지 말 지를 정한다.

그 다음으로 항목이 많아졌기 때문에 드래그하거나 마우스 휠을 움직이거나 스크롤 바를 움직이면 짤린 부분이 드러나야 한다. 이런 기능들을 하게해주는 컴포넌트가 있는데 바로 Scroll Rect이다. 추가해보자

다음과 같이 되는데 이제 화면을 드래그하거나 스크롤 바를 이용해서 움직이면 UI들이 그에따라 움직인다.

프로퍼티들을 봐보자

우선, Content를 넣어야한다. 여기서 Content는 영역이다. 어디가 움질일 지 정하는 것이다. 이렇게 설정하고 실행시키면 드래그는 가능하게 된다. 하지만 문제점이 있다. 드래그는 가능하지만 마우스 버튼을 떼면 다시 원래대로 돌아가서 아래에 있는 버튼을 클릭하고 싶어도 클릭하지 못하는 것이다. 해결방법을 알려주겠다. 우선 프로퍼티 중 Horizontal의 체크를 해제해서 수평적인 움직임을 막아주자. 이제 마우스 버튼을 떼었을 때 다시 돌아가는 것을 막아주는 방법을 설명하겠다. 우리가 만들어둔 contents에 가서 새로운 컴포넌트를 추가해준다. 바로 Content Size Fitter이다.생긴건 아래와 같이 생겼다.

이제 여기서 Vertical Fit을 Min Size로 바꿔보자. 그럼 화면이 다음과 같이 변한다.

상단의 버튼UI가 좀 짤리는 문제가 생기는데 이를 해결하기 위해

Pivot값과 Pos Y의 값을 위와 같이 바꾸자. 이러고 실행을 시켜보면 아까처럼 다시 원래 상태로 돌아가는것이 아닌 우리가 드래그한 곳에서 멈추는 걸 확인할 수 있다.

이제 진짜 스크롤 바 UI를 만들어보자. Panel의 자식 오브젝트로 ScrollBar를 생성해주자.

그럼 다음과 같은 화면이 된다. 근데 우리는 수평이 아닌 수직으로의 움직임이 필요하기 때문에 다음과 같이 스크롤바의 설정을 바꿔준다.

이제 아래와 같이 앵커와 너비, 높이, 포지션을 수정하여 스크롤바 같이 만들어준다.

그리고 설정해야 하는 것이 하나가 더 있는데 바로 ScrollRect 컴포넌트에 방금 만든 스크롤바를 등록시켜줘야한다. 다음과 같이 해보자.

그럼 등록이 되었을 것이다. 그리고 이제 실행 시키고 스크롤바를 이용해서 움직여보면 우리가 생각한대로 움직이는게 보일 것이다. 물론 마우스 휠로도 움직이는게 가능하다. 하지만 마우스 휠로 움직이면 좀 답답함이 느껴질텐데 민감도가 낮아서 그런 것이다. 여기서 Scroll Rect 컴포넌트의 프로퍼티 중 Scroll Sensitivity의 값을 올려주면 민감도를 올릴 수 있다.

그리고 Movement Type이 Elastic으로 되어있고 아래에 Elasticity가 0.1로 되어있는데 이 값을 올리면 스크롤을 과하게 했을 때 다시 원래대로 돌아오는 시간이 늘어난다. 즉, 탄력성이 좋아져서 돌아오는데 시간이 걸린다.

그리고 Inertia는 관성의 영향을 받을 것이냐를 따진다. 이걸 체크 해제하면 좀 더 빠르게 원상복귀 되는 걸 확인할 수 있다.

그리고 Visibillity기본값으로 Permanent영구적으로 보여진다 되어 있는데 이걸 Auto Hide로 바꾸면 버튼UI의 갯수가 적을 때는 보이지 않다가 많아지면 스크롤바를 보여준다.

마지막으로 On Value Changed는 스크롤바가 움직일 때 마다 호출될 함수를 등록시키면 된다.