cocos2d-C++ 学习UI控件（四）之 Slider|ListView

今天介绍一下滑动条Slider和列表视图ListView，Slider不难，大家稍微看一下应该就OK了，ListView绝对是一个坑，这个花了我不少时间研究，在介绍ListView的时候我会跟大家说一下注意点，也是我在学习的时候碰到的问题。

先介绍一下Slider吧

--------------------------------------------------------------------------Slider

void HelloWorld::addSlider()
{
	Slider* slider = Slider::create();
	slider->loadBarTexture("sliderProgress.png");     //设置滑动条背景
	slider->loadSlidBallTextureNormal("sliderThumb.png");   //设置滑块图片
	slider->setPosition(Vec2(300, 300));

	slider->addEventListener(CC_CALLBACK_2(HelloWorld::SliderEvent,this));  //监听滑动事件

	this->addChild(slider);
}

void HelloWorld::SliderEvent(Ref * pSender, Slider::EventType type)
{
	if (type == Slider::EventType::ON_PERCENTAGE_CHANGED)            //进度条的值发生变化
	{
		Slider* slider = (Slider*)pSender;
		int percent = slider->getPercent();
		log("========>>>>>>Slider percent  is  %d%%", percent);
	}
}

-------------------------------------------------------------------------- ListView

void HelloWorld::addListView()
{
	/*const char* image[] = { "button/Button01.png","button/Button01Disabled.png","button/Button01Pressed.png",
		"button/Button02.png","button/Button02Disabled.png","button/Button02Pressed.png" };*/
	auto gb_sprite = Sprite::create("button/background.png");  /做背景，不添加到ListView中
	Size size_gb = gb_sprite->getContentSize();
	gb_sprite->setAnchorPoint(Vec2(0.5, 0));
	gb_sprite->setPosition(Vec2(480, 100));
	this->addChild(gb_sprite, 1);

	auto listview = ListView::create();
	listview->setTag(100);
	listview->setDirection(ListView::Direction::BOTH);  //不知道为什么这里只有设置NONE或者BOTH，是可以滑动的，

	listview->setPosition(Vec2(480, 120));
	listview->setAnchorPoint(Vec2(0.5, 0));
	listview->setContentSize(Size(size_gb.width-20,size_gb.height-100));       //设置listview的窗口大小
	listview->setInnerContainerSize(Size(size_gb.width - 20, 1500));           //设置listview的内容大小

	for (int i = 0; i < 6; i++)
	{
		Layout *layout = Layout::create();        //先创建一个layout，直接添加到ListView
		layout->setContentSize(Size(size_gb.width,60));
		listview->addChild(layout);

		auto button = cocos2d::ui::Button::create("button/Button01.png", "button/Button01Pressed.png", "button/Button01Disabled.png");
		button->setScale9Enabled(true);
		button->setContentSize(Size(200, 40));
		layout->addChild(button);
		button->setPosition(Vec2(layout->getContentSize() / 2));   //调节button在layout上的位置，这里放在中央位置
	}
	listview->addEventListener((const cocos2d::ui::ListView::ccListViewCallback)CC_CALLBACK_2(HelloWorld::ListViewEvent, this));//监听点击ListView中项目事件
	listview->addEventListener((const cocos2d::ui::ScrollView::ccScrollViewCallback)CC_CALLBACK_2(HelloWorld::ScrollViewEvent, this));//监听滑动视图事件，回掉函数看之前的<span style="font-family: Arial, Helvetica, sans-serif;">ScrollView</span>
	log("listview->getItems().size()=%d", listview->getItems().size());            //显示ListView中的项目，这里有6个，指的是6个layout
	this->addChild(listview,1);
}

void HelloWorld::ListViewEvent(Ref* pSender, ListView::EventType type)
{
	log("HelloWorld::ListViewEvent(Ref* pSender, ListView::EventType type)");
	ListView *listview = (ListView*)pSender;    //pSender是对应ListView，不是点击的对象
	switch (type)
	{
	case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_START:log("ListView::ON_SELECTED_ITEM_START ===>> listview :%d",  listview->getTag());
		break;
	case cocos2d::ui::ListView::EventType::ON_SELECTED_ITEM_END:log("ListView::ON_SELECTED_ITEM_END ===>> listview :%d",  listview->getTag());
		break;
	default:
		break;
	}
}

效果图

上面是我调好的代码，现在说说可能会遇到的坑

1.一开始我往ListView中加的是Sprite，结果点击ListView中项目事件，怎么都不会发生，并且getItems().size()的值是0。后来换了button就好了，其他的大家在用的时候可以试试，我这边就不试了；

2.如果你直接把button加到ListView中会发现，你调整不了位置，button之间是紧挨着的。所以我每次先在往ListView中加一个Layout，接着把button加到Layout上，这里就可以调整位置了。如下图：

3.这个不知道是bug还是什么，反正我现在还不清楚原因：

listview->setDirection(ListView::Direction::BOTH); //不知道为什么这里只有设置NONE或者BOTH，是可以滑动的
如果我设置HORIZONTAL或者VERTICAL，你会发现不能滑动，Scrollview中是正常的；

******常用的基础容器快讲完了，等介绍完剩下的常用UI控件。我试着用做一个游戏，会用到这些容器，练习一下（时间待定，主要毕业设计都还没做完，毕不了业就惨了*_*）