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