정적 스크롤뷰

원래는 만드는 방법을 대충 아니 쓸 생각이 없었는데 이번에 한가지 오류가 나게 되면서 한번 짚고 넘어가기로 하자 

 

문제의 오류는 일정 구간 이상 올리거나 내리면 스크롤이 되지 않아야하는데 제한없이 그대로 쭉 가버린다는것이다.

분명이 배운대로 했는데 어디가 문제인건지 알 수 없어 처음부터 다시 만들어보기로 했다

 

캔버스를 하나 만들어주고, 그 밑에 소스자료로 쓰일 이미지를 guied라는 이름으로 만들어준다

소스 이미지는 왼쪽으로 정렬해준다

그리고 Canvas Scaler에 있는 설정창에서 

 

UI Scale Mode => Scale With Screen Size => 화면이 커질수록 UI요소도 커지도록 하기

Reference Resolution => 1920, 1080          => 해상도 직접 입력

Screen Match Mode => Expand                  => 캔버스 크기가 레퍼런스보다 더 작아지지 않도록 수직&수평으로 확장

으로 변경해준다

 

UIscroll 이라는 이름으로 이미지를 만든뒤 알파를 내려 스크롤이 돌아갈 위치에 놓아준다

UIscroll 밑에 content라는 이름으로 빈 공간을 만들어주고 오른쪽위끝에 정렬시켜준다

content에 Content Size Fitter 컴포넌트를 추가해준뒤 Horizontal Fit을 Preferred Size를 선택한다

 

 

Horizontal Fit => Preferred Size

레이아웃 요소의 기본 너비에 기반하여 너비를 조정한다(Vertical이라면 높이를 조정)

이제 스크롤뷰에 쓰일 이미지를 만들어준다. 왼쪽에 보이듯이 드래그하여 사이즈를 조절하기전,

그보다 먼저 오른쪽 위 정렬을 우선으로 해준다

 

 

그리고 content에 Horizontal Layout Group 컴포넌트를 추가해준다

 

Horizontal Layout Group : 이미지나 물체들을 적절한 간격으로 일정하게 떼어내줄 수 있는 역할을 하는 컴포넌트

그리고 content밑에 붙은 이미지들을 복사하여 붙여넣는 순간,

같은 위치에 겹쳐지는것이 아닌 오른쪽방향으로 정확히 붙어 연결된다

 

Horizontal Layout Group 컴포넌트의 Spacing을 늘려주면 이미지 간의 간격이 넓어지는것을 볼 수 있다

 

 

Scroll Rect : 콘텐츠를 스크롤 할 수 있게 하는 기능을 지닌 컴포넌트

 

마지막으로 UIscroll에 Scroll Rect 컴포넌트를 추가해준뒤

Content에 그대로 UIscroll을 집어넣고 Vertical 항목을 체크해제 해준다. 

여기서 Horizontal 과 Vertical 중 어떤걸 체크하냐에 따라 가로로 스크롤 될지, 세로로 스크롤될지 결정된다