CocoStudio의 UIEditor로 만든 ListView 사용 (v2.2.6 버전)

이번은 UI Editor로 만든 UI의 ListView 구현 샘플 Cocos2d-x v2.2.6판입니다.

kyokomi 님의 기사를 참고했습니다. 감사합니다.

cocos2d-x - CocosStudio의 UIEditor로 만든 ListView 사용 - Qiita
ぃ tp // 코 m / 쿄코 / ms / 46 예 2f7c92cf1d3342b8

이것이 가능하면, 귀찮은 스크롤 제어의 UI도 신속하게 만들 수 있을 것입니다!

우선 UiEditor 쪽에 ListView 컨테이너를 설치합니다.
아래에서는 노란색 띠 안에 설치되어 있습니다.
특별한 설정은 없지만 배율을 높이는 대신 크기를 변경하여 위치를 조정하지 않으면
구현시에 표시가 이상해집니다.



그런 다음 ListView에서 표시할 파트를 만듭니다.
캠퍼스 목록을 마우스 오른쪽 버튼으로 클릭하여 추가합니다.
이때 전에 만든 캠퍼스와 크기가 같아져 버립니다만,
왼쪽 상단의 캠퍼스 크기 설정으로 조정합니다.



가능하면 둘 다 함께 내보내고 프로젝트의 Resource 폴더에 밀어 넣습니다.

코드는 다음과 같습니다.
ListView에 넣는 복수의 텍스트와 이미지를 변경하는 조작을 하고 있는 곳이 키모입니다.

우선은 UI 전체를 표시.

    // UI設置
    gui::TouchGroup* ul = gui::TouchGroup::create();
    ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("CollectionView/CollectionView_1.json"));
    this->addChild(ul);

다른 파트는 전회 설명했으므로, 어쩌면 ListView의 설정에 갑니다.

v2.2.6에서는 CocoStudio로 만든 부품은 "위젯"이라는 이름으로 처리됩니다.

배치한 ListView는 이름 지정으로 캡처됩니다.

    // ListView設定
    UIListView *pList = (UIListView*)ul->getWidgetByName("ListView_1");

그런 다음 ListView에 포함할 부품을 설정합니다.
Json을 로드하여 파트를 인스턴스화하고, 파트 안의 파트를 설정해 나갑니다.
설정 시 CocoStudio로 붙인 부품의 이름을 사용합니다.

마지막으로 pushBackCustomItem으로 ListView에 파트를 밀어 넣습니다.

    for (int i=0; i<10; i++) {
            UIWidget *listObj = GUIReader::shareReader()->widgetFromJsonFile("listObject/listObject.json");

            ((UILabel*)listObj->getChildByName("Label_1"))->setText("hogehoge");
            ((UIImageView*)listObj->getChildByName("Image_3"))->loadTexture("hogehoge.png");

            pList->pushBackCustomItem(listObj);
    }

실행으로 이런 느낌이 듭니다.
(실제의 게임용으로 조금 만지기 때문에, 표시는 조금 다릅니다)



이러한 스크롤 처리를 손으로 만들어 본 적이 있습니다만, 3일 이상 걸렸습니다.
복잡한 코딩, 설치 장소 조정 등, 그렇게 귀찮습니다.

이번에는 30 분이 걸리지 않습니다.
CocoStudio로 만들면 매우 효율적입니다.

참고까지.
Good luck!