[UGUI]_7. Scrollbar, ScrollView

기록은 기억을 지배한다.·2023년 12월 1일

목록 보기

7/9

Scrollbar

Scrollbar는 마우스 스크롤을 이용하여 핸들을 조작하는 UI입니다.

Slider와 다른점
스크롤바는 핸들을 조작해서 채워지는 FillRect가 없다.
스크롤바는 핸들의 크기를 변경할 수 있고 스크롤 뷰의 내용 전체에 대해
현재 표시되고 있는 부분의 비율을 핸들의 크기를 보고 알 수 있다.
스크롤 바가 표현할 수 있는 값의 범위는 0 ~ 1로 고정되어있다.

게임 오브젝트

인스펙터

ScrollView

한 화면에 담기 어려운 많은 내용을 특정 범위에 표현하기 위해 사용하는 UI입니다.
특정 범위 내에서 화면을 스크롤 하며 내용을 확인합니다.

게임 오브젝트

인스펙터

OnValueChanged를 이용한 Horizontal/Vertical Scrollbar 값 활용

스크롤뷰의 출력되는 내용은 Content의 자식으로 배치하여 출력합니다.
현재 예제에서는 1개의 TextUI만 사용하지만 여러개의 UI를 사용할 수도 있습니다.

TextUI의 Rect Transform 컴포넌트의 프리셋(ALT + SHIFT)을 이용해
화면을 꽉채워주겠습니다.
그리고 출력을 원하는 내용을 적어줍니다.

스크롤바는 Content의 크기를 늘려야 사용 가능합니다.
Content 오브젝트의 크기가 Viewport의 크기를 넘는만큼 스크롤바가 생깁니다.

Viewport의 Mask 변수를 체크 해제해 주면

아래 부분이 보이게 됩니다.
텍스트가 끝나는 부분을 보고 Content 영역을 적절히 설정해줍니다.

결과

스크립트를 이용해 OnValueChanged() 이벤트 등록

using UnityEngine.UI;
using UnityEngine.UIElements;

public class 스크롤뷰 : MonoBehaviour
{
    [SerializeField]
    TextMeshProUGUI text;

    [SerializeField]
    ScrollRect scrollrect;


    private void Awake()
    {
        scrollrect.onValueChanged.AddListener(OnScrollRectEvent);
    }

    public void OnScrollRectEvent(Vector2 position)
    {
        text.text = $"Scollbar Position : {position}";
    }
}