【cocos2dx-3.2】UI控件之Listview

学过安卓的同学。对listview是很熟悉的。主要是用来展示一条条的格式相同的信息。

cocos2d既然是作为游戏引擎。就会有很多地方涉及到listview。比如说是商城。排名。

listivew在cocos2d中有自己的实现方法。总的来说是要比安卓中简单的。

分为如下几步

1创建一个listview

auto lv = listview::create();

2设置它的适配器。cocos2d中没有像安卓中的adpter一样。用布局xml的方式来做。但其实是一个意思

首先要定义一个布局。和安卓中的xml一个意思。表现形式不同而已

auto layout = Layout::create();

有了布局就可以往里面放东西了。button。imageview。label之类的统统可以 。当然不放东西也是可以的

这里就只是定义一个布局。然后设置背景

layout->setbalckgroupimageview("图片路径");

3将设置好的布局添加到listview中。一般用for循环来实现。看到这里。感觉很有android的影子。

for(int i=0;i<10;i++)
{
     auto layout = Layout::create();
    
     lv->addchile(layout);
}

其实是和适配器一个道理。适配器只是把这些数据都装在一个list中。cocos是用一个layout来装里面的控件。并且立即为其填充数据。当然你也可以将数据先以数组的形式保存好。然后就可以在for循环中以此做数据的填充了。

最后贴上完整的代码。其中的资源自己替换为自己的图片资源就行。

#include "listview.h"
#include "cocos2d.h"
#include "extensions/cocos-ext.h"
#include "ui/CocosGUI.h"

USING_NS_CC;
USING_NS_CC_EXT;
using namespace ui;

Scene* mylistview::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();
    
    // 'layer' is an autorelease object
    auto layer = mylistview::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool mylistview::init()
{
    //
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

	char* i[15] = {"nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png",
	"nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png",
	"nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png","nd3_rank_1.png"};

	_image = i;
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

	ListView* lv = ListView::create();

	lv->setDirection(ui::ScrollView::Direction::VERTICAL);//设置方向为垂直方向
        lv->setBounceEnabled(true);
        lv->setBackGroundImage("nd3_white_bg.9.png");//设置图片为九宫格格式。其实就和9图一个意思。只是安卓中要自己制作。这里程序会帮你生成
        lv->setBackGroundImageScale9Enabled(true);
        lv->setContentSize(Size(300, 640));
		lv->setAnchorPoint(Point(0.5,0.5));
		lv->setPosition(Point(visibleSize.width/2,visibleSize.height/2));

		this->addChild(lv);
        
		Size size = Size(300,100);
        
		 for (int i = 0; i < 20; ++i)
        {
            std::string ccstr = StringUtils::format("listview_item_%d", i);
            _array.push_back(ccstr);
        }

    
		 for (int i = 0; i < 15; ++i)
        {
			auto image = ImageView::create(_image[i]);

			image->setPosition(Point(image->getContentSize().width/2,size.height/2));

			auto bt = Button::create("button.png", "buttonHighlighted.png");

			bt->setScale9Enabled(true);

			bt->setContentSize(Size(size.width/2,size.height/2));

			bt->setPosition(Point(size.width-bt->getContentSize().width/2,size.height/2));

			bt->setTitleText(_array.at(i));

			//itme的布局
			auto layout = Layout::create();

			layout->setBackGroundImageScale9Enabled(true);

			layout->setBackGroundImage("nd3_white_bg.9.png");

			layout->setContentSize(size);

			layout->addChild(bt);
			layout->addChild(image);

			lv->addChild(layout);

        }

		 lv->setItemsMargin(10);

    return true;
}