ScrollView를 사용하여 리스트 구현하기

Amaranth2022년 12월 27일

1. ScrollView UI 생성 및 설정

Hirearchy 창에서 마우스 우클릭>UI>Scroll View를 클릭하여 컴포넌트를 생성한다.

수직방향으로만 스크롤할 것이므로 수평 scroll bar는 삭제하고, Scroll View의 Scroll Rect 컴포넌트에서 Horizontal을 체크 해제한다.

2. Content에 컴포넌트 추가 및 설정

ScrollView>Viewport>Content에 Vertical Layout Group 컴포넌트와 Content Size Fitter 컴포넌트를 추가한다.

Vertical Layout Group : Content의 자식인 item들의 위치를 자동으로 조정해준다.
- Padding : item 내부에 적용되는 간격
- Spacing : Item들 사이의 간격
- Control Child Size : 레이아웃 그룹(=Content 객체)이 item들의 너비/ 높이를 제어할지 여부. →나는 Scroll View의 너비와 item의 너비를 동일하게 설정하기 위해 체크하였다.
Content Size Fitter
- Vertical Fit : 높이를 제어한다.
  - Unconstrained : item에 기반하여 높이를 조정하지 않는다.
  - Preferred Size : item의 기본 높이에 기반하여 높이를 조정한다. → Vertical Fit을 Preferred Size로 설정(item들이 생성될 때마다 Content 객체의 크기가 자동으로 맞춰진다.)

3. 내부 item들을 생성하기 위한 스크립트 작성

*Content의 자식 요소로 Instantiate를 수행한다.

private void Init(){
	int yValue=0;
	for(int i=0;i<10;i++){
		item.Item(GetStudyData().result[0].level,
		GetStudyData().result[0].unit,
		GetStudyData().result[0].text_title);
		var index=Instantiate(item, new Vector3(0,yValue,0),Quaternion.identity);
		index.transform.SetParent(GameObject.Find("Content").transform);
		yValue-=200;
}

추가)

이렇게 만들었을 때, 게임을 시작했을 때 스크롤바의 시작위치가 처음이 아니라 중앙으로 설정되는 문제가 있었다.

<해결 방법>

Content의 Rect Transform 컴포넌트의 pivot pos Y를 1로 바꿔준다.(가로 스크롤을 사용하는 경우 pivot pos X를 바꿔주면 된다.

unity