Scroll View와 Content Size Fitter

어제 프로젝트 중, Scroll View와 Content Size Fitter를 공부하게 되어서 정리를 조금 해보려고한다.

Scroll View

사용 목적

Gemini

• 나는 스테이지가 많아질 것을 고려해 컨텐츠 표시 영역 제한 기능을 활용했고,
• 스크롤 기능으로 모든 스테이지를 조회 할 수 있게 하였다.

Viewport

Viewport

• Viewport는 스크롤 가능한 콘텐츠의 가시 영역을 정의한다.
• 사진에선 파란 점으로 표시되어 있는 범위이다.

Content

• Content는 실제로 스크롤되어야 하는 모든 UI 요소들을 담고 있는 컨테이너이다.

Scroll Rect

Scroll Rect

• Scroll View에 있는 Scroll Rect 컴포넌트를 통해 Scroll View 기능을 설정할 수 있다.

프로퍼티	기능
Horizontal	가로 방향의 스크롤 허용 여부
Vertical	세로 방향의 스크롤 허용 여부
Movement Type	스크롤 뷰의 영역을 벗어났을 때, 동작 방식 설정
ㄴUnrestricted	아무런 동작을 하지 않음.
ㄴElastic	부드럽게 반동을 일으키며 돌아옴. 수치 조정 가능
ㄴlamped	범위를 벗어나지 못하게 함.
Inertia	스크롤의 관성 설정 여부
ㄴceleration Rate	감소률
Scroll Sensitivity	스크롤의 민감도
On Value Changed	스크롤이 작동하였을 때, 동작하는 Callback 함수

Content Size Fitter

사용 목적

Gemini

• 스테이지 개수 만큼 Content 사이즈를 쉽게 조절하기 위해서 사용하였다.

컴포넌트 설명

Content

• Layout Group 컴포넌트를 추가하여 자식 오브젝트를 정렬 하였다.

프로퍼티	기능
Horizontal Fit	가로 크기 설정
Vertical Fit	세로 크기 설정
ㄴUnconstrained	고정된 크기 사용
ㄴMin Size	레이아웃 요소의 최소크기 기준으로 UI 크기를 조정
ㄴPreferred Size	콘텐츠 크기에 따라 UI 크기를 조정