ScrollView 2

리스트를 수직으로 스크롤 하는 방법에 대해서 알아보자.
아래와 같이 이미지와 텍스트를 배치후 스크롤 한다.

실행화면
계층뷰

1. Canvas를 만든다
UI > Canvas로 제작한다.

2. ScrollView를 만든다.
  • UI > Panel을 만든다
  • Panel이름을 ScrollView로 수정한다
  • ScrollRect, Mask 컴포넌트를 추가한다
  • Width, Height를 256, 500으로 설정한다
  • 위,아래로 스크롤하기 때문에 Horizontal은 해제한한다.
  • ScrollRect > Content 항목을 Content 노드로 지정한다.
  • 테스트를 위해 Image - Color를 빨강색으로 설정한다.

3.Content를 만든다.
  • UI > Panel을 만든다
  • Panel이름을 Content로 바꾼다
  • Width, Height를 256으로 설정한다
  • 수직으로 스크롤 하기 위해 Pivot을 0.5, 1로 설정한다.
  • GridLayoutGroup컴포넌트를 추가한다.
  • Content Size Fitter를 추가한다.










  • GridLayGroup의 셀 사이즈를 256, 80으로 설정한다.
  • Spacing은 10, 10으로 설정한다.


  • 수직으로 스크롤 하기 때문에 ContentSizeFitter는 VerticalFit를 "PerferredSize"로 설정한다.

Content Size Fitter 항목에 다음과 같은 워닝이 뜬다.
워닝이 떠도 실행은 제대로 된다. 찜찜하긴 하지만 일단은 무시하고 간다.

"Parent has a type of layout group component. A child of layout group should not have a Content Size Fitter component. since it should be driven by the layout group."

상위노드에 ScrollRect 컴포넌트가 있어서 발생하는 워닝이다.

4. 리스트의 item을 추가한다.











  • UI > Image를 추가하고 이미지를 설정한다.
  • Image의 자식으로 UI > Text를 추가한다.


4. 리스트의 item을 복사한다.
Image 노드를 선택 후 Ctrl+D 단축키로 Item을 복사한다.


참조)
SetPropertyUtility.cs 소스
https://github.com/tenpn/unity3d-ui/blob/master/UnityEngine.UI/UI/Core/SetPropertyUtility.cs

ContentSizeFitter.cs 소스
https://gist.github.com/stramit/1ab43d48bfd5b0f37af4