유니티 UI 리스트 뷰 (List View)

1. 리스트 뷰

데이터 목록을 나열하여 보여주는 뷰이다. 대부분의 시스템에서 기본으로 제공하는 뷰이다. 유니티에서는 스크롤 뷰를 제공하며, 이를 수정하여 리스트 뷰를 만든다.  게임에서 필수적으로 존재하는 인벤토리도 리스트 뷰 형식이다.        

 

2. Scrollbar를 사용한 리스트 뷰 만들기

 Scrollbar를 사용하여 이미지 목록을 보여주도록 리스트 뷰를 구성한다.

2.1 UI 구성 

 

ListView Hierachy

Canvas → Panel(Scroll Example)을 만든다. Canvas와 Panel의 크기는 같다. 패널은 ListView를 여러 개 만들 경우 사용할 부모 패널이다. 

Canvas → Panel → Panel(List View)를 생성한다. List View의  Anchor Presets을 센터로 한다. Width와 Height를 1000으로 설정한다. 

Canvas → Panel → Panel(List View) → Panel(Mask Viewport)를 생성한다.

Canvas →... → Panel(Mask Viewport) → Panel(Content)를 생성한다.  

Content의 anchor Presets을 왼쪽 위로 설정하고, Width 950, Height 1000으로 설정한다.

Content에 Vertical Layout Group을 추가한다. Control Child Size의 Width를 체크한다.( 아래 이미지 참조.)

Vertical Layout Group

Content → Image UI를 추가한다. Image의 Height를 100으로 설정한다. 

Image를 복사하여, 13개 정도나 이상을 만든다.  

짝수번째의 이미지들을 선택(Ctrl + Click )하고, 색상을 변경한다.   

 

 

Canvas →... → Panel(Mask Viewport) → Scrollbar를 생성한다. 

Scrollbar의 Width를 50으로 설정하고, Scrollbar의 Anchor Prests을 stretch right으로 설정한다. (아래 이미지 참조)

 

Stretch right

 

위의 과정을 완료하면, UI의 상태는 아래 이미지와 비슷한 형태일 것이다. Content의 영역을 벗어나는 부분을 시각적으로 보이지 않도록 설정한다. Mask Viewport로 설정한 패널에 Add Component를 선택하고, Mask 컴포넌트를 추가한다.

Mask로 설정한 영역을 제외하고 보이지 않는 것을 확인할 수 있다.    

 

 

ScrollExample 클래스를 생성한다. 

2.2의 스크립트를 복사하거나, 작성해 ScrollExample 클래스를 완성한다.

 

생성한 클래스를 ListView에 추가한다.

Content 변수에 Content 패널을 등록하고, Scrollbar 변수에 Scrollbar를 등록한다.

 

Scroll Example

 

2.2 스크립트 작성

 

스크롤바를 사용하여, 콘텐츠를 제어한다. 스크롤바를 움직이면, 리스트 뷰가 동작한다. 

콘텐츠의 크기를 계산하여, 스크롤바를 설정한다. 콘텐츠의 크기를 계산하기 위한 하위 요소 검색에서, Content의 RectTransform 클래스도 검색된다. 인스턴스의 ID를 비교하여 배제한다.   

 

Debug 변수들은 수치를 쉽게 확인하기 위해 public으로 선언한다.  

OnScrollValueChanged() 함수를 만들고, 스크롤바의 onValueChanged의 리스너로 등록한다. 

스크롤바에 이벤트가 발생하면, OnScrollValueChanged 함수가 호출된다.

 

※ 리스트의 목록을 동적으로 배치하거나 수정하는 부분은 다루지 않는다. 추후 새로운 글을 통해 다루도록 한다.

 

using UnityEngine;
using UnityEngine.UI;
public class ScrollExample : MonoBehaviour
{
    public RectTransform content; // Contents
    public Scrollbar scrollbar; // controller

    // Values are declared as public for debugging.
    [Header("Debug")]
    public float scrollSize;
    public float scrollOffset;
    public Vector2 initialPos; 

    // Start is called before the first frame update
    void Start()
    {
		 // 뷰의 초기설정값 
        initialPos = content.anchoredPosition;
		// 모든 하위요소에서 RectTransform을 찾는다. 
        RectTransform[] childs = content.GetComponentsInChildren<RectTransform>();

        float total = 0;
        // 모든 하위요소의 높이 계산 
        foreach (RectTransform rect in childs)
        {
            /*  
            // 이름 비교
            if (!rect.gameObject.name.Equals("ViewPort")) {
                   total += rect.rect.height;
            }
            */
            // Content의 RectTransform은 배제
            if (content.GetInstanceID() != rect.GetInstanceID())
            {
                total += rect.rect.height;
            }    
        }
        
        scrollOffset = total - content.rect.height;
        scrollSize = total / (childs.Length - 1);

        // set scrollbar 
        scrollbar.size = scrollSize / scrollOffset;
        scrollbar.numberOfSteps = Mathf.RoundToInt( scrollOffset / scrollSize);
        // add listener 
        scrollbar.onValueChanged.AddListener(OnScrollValueChanged);
    }

    /*
     * called when scrollbar's value changed
     */
    void OnScrollValueChanged(float _value)
    {
        float value = Mathf.Clamp(_value, 0.0f, 1.0f);

        // total 300 
        content.anchoredPosition = new Vector2(initialPos.x, initialPos.y + (value * scrollOffset));
    }
}

 

 

3. Scroll View를 사용한 리스트 뷰 만들기

2장에서는 Scrollbar를 사용해 ListView를 작성하였다. 리스트뷰의 콘텐츠를 마우스로 드래그하는 경우에는 동작하지 않는다. 이러한 기능을 구현해 놓은 것이 Scroll View이다.  

 

https://notyu.tistory.com/51

유니티 UI 속성 (Scroll bar, Scroll View)

3.1 Scroll View 

ScrollView를 생성한다.    

GameObject → UI → Scroll View

 

스크롤 뷰를 생성한 것을 확인하면, 2장에서 만든 계층 구조와 동일한 것을 확인할 수 있다. Viewport에는 마스크 컴포넌트가 부착되어 있다. 가로 세로 두 개의 스크롤이 있다. 이 역시 바로 사용은 불가능하다. Content의 하위 요소로 여러 개의 이미지들을 생성하고 실행해보면, 동작하지 않는 것을 볼 수 있다. 약간의 수정이 필요하다.  

3.2 Scroll Veiw 설정

Scroll View 패널을 Width 1000, Height 1000으로 설정한다. 

Scroll View 패널에서 Scroll Rect의 Movement Type을 Clamped로 설정한다. 

 

Scroll Rect

 

Content 패널에 Vertical Layout Group을 생성하고, Control Child Size의 Width를 선택한다(2장 Verticl Layout Group 참조). 그리고 Content의 하위 요소로 이미지들을 생성한다. 2장과 마찬가지로 대략 13~14개 정도의 이미지를 생성한다. 색상도 눈으로 구별할 수 있도록 설정한다.

 

설정을 완료하면 실행한다.

마우스로 드래그를 해본다. 동작하지 않으면 정상이다.

 

리스트뷰를 동작하도록 하기 위해서는, 콘텐츠의 영역이 콘텐츠의 하위 요소들의 크기와 같아야 한다. 기본 설정에서는 이러한 부분이 배제되어 있다. 이에 Content 패널에 Content Size Fitter를 추가한다. (아래 이미지 참조.)

Content Size Fitter는 동적으로 컴포넌트의 크기를 변경하도록 해주는 컴포넌트이다.

 

아래의 이미지는 Content 패널의 Vertical Layout Group과 Content Size Fitter의 설정 값이다. 

 

 

Content & Size Fitter

 

실행하여, 동작하는 것을 확인한다.