3. UI 중 Scroll View!
각각 버튼들을 누르면 UI들이 바뀌어야 한다.
그 중 가장 많이 사용되는 Scroll View에
대해 알아보자!
4. Scroll View(1)
inspector View부터 살펴보자!
content : Scroll 내부에 넣어둘 내용물을 의미
horizontal, vertical : 가로 스크롤, 세로 스크롤 사용 유무
movement type : 부드럽게 움직일 것인가, Handle로만 움직일 것인가 등을 설정
intertia : 관성, 즉 스크롤을 했을 때 그 방향으로 더 미끄러지면서 이동하는 것
Scroll Sensitivity : 마우스 스크롤 했을 때 얼마나 많이 움직일 것인지 설정
Viewport : 스크롤 내부 보이는 화면을 의미(기본)
horizontal, vertical Scrollbar : 가로, 세로로 화면을 움직이게 하는 bar로 현재 스크
롤 위치를 보여주는 등의 역할을 한다.
5. ScrollView(2)
우리는 세로 Scroll만 필요하기 때문에 Horizontal의 체크를 풀고,
Horizontal Scrollbar를 삭제해줍니다.
Content 내부에 Scroll 내부에 넣어줄 버튼, 이미지, 텍스트 등을 배치할 수
있습니다.
앞서 해본 Layout을 활용하면 더욱 쉽고 빠르게 배치할 수 있습니다.
Content 내부에 Vertical Layout Group 과
Content Size Fitter를 추가해 봅시다.
6. Vertical Layout Group(1)
Vertical Layout Group이 없을 경우에는 Content 내부에 일렬로 정렬을 할
수 있습니다.
없을 때와 있을 때 배치를 직접 해보면서 비교해보면 좋습니다.
다만, 버튼이 추가 되어도 Content의 크기는 계속 고정되어 있기 때문에 수
동으로 계속 Content의 크기를 바꿔줘야 하는 단점이 있습니다.
이를 극복하기 위하여 Content Size Fitter을 추가합니다.
7. Content Size Fitter
Content Size Fitter는 용어 그대로 내용물에 따라
Content 의 크기를 자동으로 조절해줍니다.
Horizontal Fit 과 Vertical Fit 2가지가 있습니다.
Vertical Fit 을 Preferred Size로 바꾸면 세로 길이를 수동으로 조절할 수 없
지만, 내용물에 따라 자동으로 크기가 조정됨을 알 수 있습니다.
다만 또 문제가 한 가지 생깁니다.
Content 내부에 추가되는 크기를 수동으로 조절할 수 없다는 점입니다.
우측 이미지처럼, 버튼을 추가해도 매우 작게 추가되고 바꿀 수 없습니다.
따라서 각 버튼에 Layout Element를 추가합니다.
8. Layout Element
Layout Element는 각 요소들을 하나씩 컨트롤 합니다.
Ignore Layout : 상위 Layout을 완전히 무시합니다.
다음과 같은 방법으로 크기가 할당됩니다.
Min 에 할당한 크기만큼 배치 됩니다. 그 후 Preferred 공간을 할당할 공간이
남아 있다면 Preferred 에 할당한 크기만큼 배치가 됩니다. 그 뒤에도 남은
공간이 있다면 Flexible에 할당한 크기 만큼 더 배치가 됩니다.
여기서 Flexible 은 (0.0001~ 1)의 크기를 가지며 그 이상의 값은 무의미합니
다.
우리는 Content Size Fitter를 이미 사용하였기 때문에 공간에 제약이 없습니
다. 따라서, Min이나 Preferred 둘 중 아무 곳에나 원하는 크기를 적으면 똑
같이 작동합니다.
