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

最新推荐文章于 2018-08-18 15:43:13 发布

沙猪大少

最新推荐文章于 2018-08-18 15:43:13 发布

阅读量1.4k

点赞数 1

分类专栏：游戏开发 cocos2d-x 文章标签： cocos2d-x 控件 ui

本文链接：https://blog.csdn.net/qq_16112417/article/details/51259183

版权

游戏开发 cocos2d-x 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天介绍一下滑动条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;
	}
}

效果图