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控件。我试着用做一个游戏,会用到这些容器,练习一下(时间待定,主要毕业设计都还没做完,毕不了业就惨了*_*)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值