[UI] 스크롤뷰(Scroll View)에 관하여

UI를 구성할 때, 스크롤바를 이용해 영역이 넘어가는 내용을 다루는 스크롤뷰를 살펴보자

 

구성

Hierarchy 창에서 Scroll View 컴포넌트를 생성한다

Scroll View 오브젝트

Viewport	표시하고자 하는 컨텐츠가 보여질 영역
Content	표시하고자 하는 내용물들이 자식으로 들어가는 게임 오브젝트 스크롤링 되는 영역은 Content 영역의 크기에 따라 정해짐
Scrollbar Horizontal	수평 스크롤바
Sliding Area
Handle
Scrollbar Vertical	수직 스크롤바
Sliding Area
Handle

 

Scroll View - Scroll Rect

Horizontal Vertical	수평/수직 방향만 스크롤 허용
Movement Type	Content 영역이 Scroll View 영역을 벗어났을 때, 어떻게 동작할 지를 결정 (Unrestricted: 아무 동작 x / Elastic: 탄성있게 복귀 / Clamped: 영역 제한)
Inertia	스크롤의 관성
Horizontal Vertical Scrollbar	스크롤바 속성, 보이게/안보이게 설정 가능
OnValueCanged (Vector2)	스크롤뷰에서 스크롤링 되었을 때, 콜백을 받을 이벤트 등록 스크롤이 될 때마다, 현재 스크롤바의 위치를 매개변수로 받게 됨 (ex. 스크롤바의 끝에 도달 시 새 아이템 등록에 사용)

 

 

Content Size Fitter 대신 스크립팅해보자

Scroll View의 기능이 담긴 컴포넌트의 이름은 ScrollRect이다.

(스크립팅 시 해당 이름을 GetComponent 해오자)

만들어 둔 스크롤뷰에 컴포넌트들을 추가하기 위해, Canvas에 버튼 오브젝트를 추가하고 클릭 이벤트에 AddNewUIObject 함수를 등록해준다.

using UnityEngine.UI ;

public class ScrollViewController : MonoBehaviour
{
    private ScrollRect scrollRect;

    public float space = 50;

    public GameObject uiPrefab;

    public List<RectTransform> uiObjects = new List<RectTransform>();

    void Start()
    {
        scrollRect = GetComponent<ScrollRect>();
    }

    public void AddNewUIObject()
    {
        // ui 오브젝트 생성 및 위치 설정
        var newUI = Instantiate(uiPrefab, scrollRect.content).GetComponent<RectTransform>();
        uiObjects.Add(newUI);

        float y = 0f;
        for (int i = 0; i < uiObjects.Count; i++)
        {
            uiObjects[i].anchoredPosition = new Vector2(0f, -y);
            y += uiObjects[i].sizeDelta.y + space;
        }

        // 설정된 오브젝트 위치 기반 Content 크기 조정
        scrollRect.content.sizeDelta = new Vector2(scrollRect.content.sizeDelta.x, y);
    }
}

 

 

적당한 여백을 두고 스크롤뷰 내 내용들이 추가된다