[Cocos Creator] ListView 개념 및 사용

---

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

서론

 이전 포스팅에서 다뤘던  ScrollView와 Layout을 이용해 간단한 ListView를 구현해보도록 하겠습니다. ListView는 Content에 ListItem을 넣어 스크롤링하며 볼 수 있는 기능을 제공하는 UI의 일종이라고 생각하시면 됩니다.

1. 구현하기

2. Layout 사용하기

구현하기

코드는 간단합니다. scrollView의 content에 자식으로 추가한 후 content의 크기를 추가된만큼 늘려주는 것이죠. view보다 content가 커지면 스크롤이 가능해지기 때문입니다.

cc.Class({
    extends: cc.Component,

    properties: {
        items     : [], // ListItem을 관리하는 배열

        scrollView: { // ScrollView 컴포넌트
            default: null,
            type: cc.ScrollView
        },

        listItem: { // ListItem 프리팹
            default: null,
            type: cc.Prefab
        }
    },

    onLoad: function() {
        this.content = this.scrollView.content;

        for (var i = 0; i < 20; i++) {
            this.addItem();
        }
    },

    addItem: function() {
        // ListItem을 instantiate 합니다.
        var item = cc.instantiate(this.listItem);
        
        // ListItem 위치를 지정합니다.
        item.x = 0;
        item.y = - item.height * this.items.length;

        // content에 생성한 ListItem을 추가합니다.
        this.content.addChild(item);

        // content 높이를 수정합니다.
        this.content.height = this.items.length * item.height;

        // items에 생성한 ListItem을 push합니다.
        this.items.push(item);
    },

    removeItem: function() {
        // items에서 pop한 후 content에서 제거합니다.
        this.content.removeChild(this.items.pop());
    }
});

위의 코드가 Creator에서 ListView를 구현하는 기본적인 코드입니다. 

이 코드를 ScrollView 컴포넌트가 붙어있는 곳에 추가해주고 ScrollView를 드래그 앤 드롭해주고 ListItem으로 쓸 Prefab을 연결해준 후 실행하면 다음과 같이 간단한 ListView 구현이 완료됩니다.

ScrollView 컴포넌트가 붙어 있는 곳에 ScrollViewCtrl이라는 스크립트를 만들어서 컴포넌트로 등록

간단한 ListView 동작

Layout 사용하기

자 이제 이전 포스트에서 다룬 Layout을 사용해보도록 하겠습니다. 

기존 Content에 위와 같이  타입을  VERTICAL로 (리스트 뷰의 방향에 맞춰 설정합니다. 가로 리스트 뷰라면 HORIZONTAL로 설정) 설정하고 Resize Mode를 Container로 설정합니다. (자식으로 List Item이 추가됨에 따라 Container 크기가 결정되도록 함)

위와 같이 Layout을 설정하면 아래 코드에서 빨갛게 표시한 부분은 이제 Layout Component가 관리해주므로 삭제해도 원래의 코드와 동일하게 동작합니다.

cc.Class({
    extends: cc.Component,

    properties: {
        items     : [], // ListItem을 관리하는 배열

        scrollView: { // ScrollView 컴포넌트
            default: null,
            type: cc.ScrollView
        },

        listItem: { // ListItem 프리팹
            default: null,
            type: cc.Prefab
        }
    },

    onLoad: function() {
        this.content = this.scrollView.content;

        for (var i = 0; i < 20; i++) {
            this.addItem();
        }
    },

    addItem: function() {
        // ListItem을 instantiate 합니다.
        var item = cc.instantiate(this.listItem);

        // ListItem 위치를 지정합니다.
        item.x = 0;
        item.y = - item.height * this.items.length;

        // content에 생성한 ListItem을 추가합니다.
        this.content.addChild(item);

        // content 높이를 수정합니다.
        this.content.height = this.items.length * item.height;

        // items에 생성한 ListItem을 push합니다.
        this.items.push(item);
    },

    removeItem: function() {
        // items에서 pop한 후 content에서 제거합니다.
        this.content.removeChild(this.items.pop());
    }
});