[Cocos Creator] ScrollView 개념 및 사용 예시

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 Cocos Creator에서의 ScrollView 사용법에 대해서 공부해보도록 하겠습니다.

ScrollView

 ScrollView는 스크롤 기능을 가지고 있는 Container 입니다. Container는 뭔가를 담을 수 있는 용기의 뜻을 가지고 있습니다. 즉 ScrollView를 사용하면 제한된 범위에 그 범위보다 큰 컨텐츠를 담고 그것을 스크롤을 통해서 볼 수 있도록 해줍니다. 일반적으로 ScrollView는 Mask 컴포넌트와 ScrollBar 컴포넌트가 함께 사용되어집니다. 

 

스크롤 뷰를 적용하지 않은 원본 이미지

스크롤 뷰를 적용한 이미지

스크롤 뷰 컴포넌트

ScrollView 사용법

Creator에서의 ScrollView 사용법은 매우 간단합니다. Node Library 탭에서 ScrollView를 화면으로 드래그 인 드롭 해주면 됩니다. 

ScrollView 컴포넌트 구성

기본적인 스크롤 뷰의 구성은 위와 같습니다. 스크롤 뷰 컴포넌트 아래 스크롤 바, 뷰 그리고 뷰 아래 컨텐츠의 Hierarchy를 가지고 있습니다.

먼저 스크롤 뷰를 클릭해보면 위와 같이 Node, Sprite, ScrollView 3가지 컴포넌트를 가지고 있습니다. 화면에 뿌려지는 최소 단위인 Node, ScrollView의 배경 이미지를 담당하는 Sprite, Node에 Scroll 기능을 부여하는 ScrollView 컴포넌트입니다.

View 컴포넌트는 ScrollView가 실제로 보여질 제한 영역을 구성하는 역할을 합니다. Content보다 작을 경우 Content의 부분 영역만 볼 수 있게 되는 것 입니다.

ScrollView Property

 ScrollView 컴포넌트의 Property에 대한 설명은 다음 표와 움짤을 참고하세요.

Property	설명
Content	Scroll 가능한 컨텐츠가 들어있는 노드를 넣습니다. 매우 큰 이미지가 포함된 노드일 수 있음.
Horizontal	가로 스크롤이 허용되는지 여부
Vertical	세로 스크롤이 허용되는지 여부
Inertia	스크롤할 때 가속도(관성)를 부여할 것인가?
Brake	스크롤 후 감속도입니다. 값 범위는 0-1이며 1로 설정하면 스크롤이 즉시 중지되고, 0이면 컨텐츠 테두리까지 스크롤 됩니다.
Elastic	반동 여부를 결정
Bounce Duration	반동 시간을 결정하며 범위는 0-10.
Horizontal ScrollBar	컨텐츠의 수평 위치를 나타내는 스크롤 바를 작성하기 위한 참조 노드
Vertical ScrollBar	컨텐츠의 수직 위치를 나타내는 스크롤 바를 작성하기 위한 참조 노드
ScrollView Events	기본 타입은 null 입니다. 각각의 이벤트는 node reference, component 이름 그리고 Callback 함수로 구성되어집니다.

inertia가 false ScrollView

elastic이 false라 컨텐츠의 테두리를 넘어서지 못하는 ScrollView

Horizontal이 false여서 세로로만 이동이 가능한 ScrollView

ScrollView Code로 Callback 추가

cc.Class({
    extends: cc.Component,


    properties: {
       scrollview: cc.ScrollView
    },

    onLoad: function () {
       this.scrollview.node.on('scroll-to-top', this.callback, this);
    },

    callback: function (event) {
       var scrollview = event.detail;
       //do whatever you want with scrollview
    }
});

node.on을 통해서 scroll event를 받아와 하고 싶은 동작을 합니다. scroll-to-top 외의 더 많은 동작을 listening 하고 싶다면 ScrollView API를 참고하세요.