cocos2d-x-2.0 新增UI的使用方法（CCControlSlider、CCControlSwitch、CCControlColourPicker、ListView）

猴子原创，欢迎转载。转载请注明： 转载自Cocos2D开发网–Cocos2Dev.com，谢谢！


原文地址: http://www.cocos2dev.com/?p=252


cocos2d-x-2.0新增加了几个UI控件，这里我介绍下常用的这几个UI控件（CCControlSlider、CCControlSwitch、CCControlColourPicker、ListView）的使用方法。






一、CCControlSlider

// Slider
 
CCControlSlider * slider = CCControlSlider::sliderWithFiles("sliderTrack2.png","sliderProgress2.png" ,"sliderThumb.png");
 
//添加回调函数
 
slider->addTargetWithActionForControlEvents(this, menu_selector(HelloWorld::actionSlider),CCControlEventValueChanged);
 
slider->setPosition(ccp(size.width*.8, size.height*.2) );
 
//silder的最小值和最大值
 
slider->setMinimumValue(0.0f);
 
slider->setMaximumValue(100.0f);
 
//slider的当前值
 
slider->setValue(50.0f);
 
addChild(slider);

回调函数：

void HelloWorld::actionSlider(CCObject* pSender){
 
CCControlSlider* pSliderCtl = (CCControlSlider*)pSender;
 
ccTime scale;
 
scale = pSliderCtl->getValue();
 
//slider的当前值
 
CCLog("CCControlSlider value = %f",scale);
 
}

二、CCControlSwitch

//switch button
 
CCControlSwitch *switchControl = CCControlSwitch::switchWithMaskSprite
 
(
 
CCSprite::spriteWithFile("switch-mask.png"),
 
CCSprite::spriteWithFile("switch-on.png"),
 
CCSprite::spriteWithFile("switch-off.png"),
 
CCSprite::spriteWithFile("switch-thumb.png"),
 
CCLabelTTF::labelWithString("On", "Arial-BoldMT", 16),
 
CCLabelTTF::labelWithString("Off", "Arial-BoldMT", 16)
 
);
 
switchControl->setPosition(ccp (size.width*.8, size.height*.35));
 
//回调函数
 
switchControl->addTargetWithActionForControlEvents(this, menu_selector(HelloWorld::callbackSwitch), CCControlEventValueChanged);
 
addChild(switchControl);
 
callbackSwitch(switchControl);

回调函数：

void HelloWorld::callbackSwitch(CCObject* pSender){
 
CCControlSwitch* pSwitch = (CCControlSwitch*)pSender;
 
if (pSwitch->getIsOn()){
 
CCLog("CCControlSwitch value = ON");
 
} else{
 
CCLog("CCControlSwitch value = OFF");
 
}
 
}

三、CCControlColourPicker

//clolor picker
 
CCControlColourPicker *colourPicker = CCControlColourPicker::colourPicker();
 
colourPicker->setColor(ccc3(37, 46, 252));
 
colourPicker->setPosition(ccp (size.width*.8, size.height*.7));
 
colourPicker->addTargetWithActionForControlEvents(this, menu_selector(HelloWorld::colourValueChanged), CCControlEventValueChanged);
 
addChild(colourPicker);

回调函数：

void HelloWorld::colourValueChanged(CCObject *sender){
 
CCControlColourPicker* pPicker = (CCControlColourPicker*)sender;
 
std::string str = CCString::stringWithFormat("#%02X%02X%02X",pPicker->getColorValue().r, pPicker->getColorValue().g, pPicker->getColorValue().b)->getCString();
 
CCLog("CCControlColourPicker value = %s",str.c_str());
 
}

四、ListView

ListViewTestLayer.h头文件

//
 
//  ListViewTestLayer.h
 
//  2dxDemo
 
//
 
//  Created by Yanghui Liu on 12-6-26.
 
//  Copyright (c) 2012年 BoyoJoy. All rights reserved.
 
//
 
 
 
#ifndef _dxDemo_ListViewTestLayer_h
 
#define _dxDemo_ListViewTestLayer_h
 
 
 
#include "cocos2d.h"
 
#include "CCListView.h"
 
#include <list.h>
 
#include <string.h>
 
 
 
USING_NS_CC;
 
using namespace cocos2d::extension;
 
 
 
class ListViewTestLayer : public CCLayer , public CCListViewDelegate {
 
public:
 
ListViewTestLayer();
 
~ListViewTestLayer();
 
virtual bool init();
 
LAYER_NODE_FUNC(ListViewTestLayer);
 
virtual void visit();
 
public:
 
// 继承自CCListViewDelegate所需要实现的方法
 
virtual void CCListView_numberOfCells(CCListView *listView, CCListViewProtrolData *data);
 
virtual void CCListView_cellForRow(CCListView *listView, CCListViewProtrolData *data);
 
virtual void CCListView_didClickCellAtRow(CCListView *listView, CCListViewProtrolData *data);
 
virtual void CCListView_didScrollToRow(CCListView *listView, CCListViewProtrolData *data);
 
 
 
private:
 
//显示list的状态的一个lable
 
CCLabelTTF *m_InfoLabel;
 
private:
 
// 存放的List数据
 
std::list<std::string> *m_pDataList;
 
CCListView *m_pListView;
 
//是否刷新，即reload
 
bool m_bFresh;
 
void initData();
 
};
 
#endif

cpp的实现：

//
 
//  ListViewTestLayer.cpp
 
//  2dxDemo
 
//
 
//  Created by Yanghui Liu on 12-6-26.
 
//  Copyright (c) 2012年 BoyoJoy. All rights reserved.
 
//
 
 
 
#include "ListViewTestLayer.h"
 
#include "CCListViewCell.h"
 
 
 
ListViewTestLayer::ListViewTestLayer(){
 
}
 
 
 
ListViewTestLayer::~ListViewTestLayer(){
 
}
 
 
 
void ListViewTestLayer::initData(){
 
m_bFresh = true;
 
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
 
m_pDataList = new std::list<std::string>;
 
for (int i=0; i<15; i++) {
 
char info[20];
 
sprintf(info, "My Cell %d", i);
 
m_pDataList->push_back(info);
 
}
 
// 初始化控件ListView
 
CCListView *listView = CCListView::viewWithMode(CCListViewModeVertical);
 
listView->setContentSize( CCSizeMake(winSize.width * .5, winSize.height));
 
listView->setDelegate(this);
 
listView->setPosition(CCPointZero);
 
this->addChild(listView);
 
m_pListView = listView;
 
// 初始化控件Label，显示ListView信息
 
m_InfoLabel = CCLabelTTF::labelWithString("Info", "", 32);
 
m_InfoLabel->setPosition(ccp(winSize.width * .8, winSize.height *.1));
 
this->addChild(m_InfoLabel);
 
}
 
 
 
//visit方法会在每一帧的时候调用，也可以自己注册schedule
 
void ListViewTestLayer::visit(){
 
CCLayer::visit();
 
if (m_bFresh) {
 
m_pListView->reload();
 
m_bFresh = false;
 
}
 
}
 
 
 
//返回行数
 
void ListViewTestLayer::CCListView_numberOfCells(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data){
 
data->nNumberOfRows = m_pDataList->size();
 
}
 
 
 
//构造每一个cell
 
void ListViewTestLayer::CCListView_cellForRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data){
 
CCSize listSize = m_pListView->getContentSize();
 
CCSize cellSize = CCSizeMake(listSize.width, listSize.height / 5);
 
CCListViewCell *cell = CCListViewCell::node();
 
cell->setOpacity(0);
 
cell->setContentSize(cellSize);
 
//cell选中颜色
 
cell->setSelectionColor(ccc4(0, 255, 0, 255));
 
data->cell = cell;
 
std::list<std::string>::iterator it = m_pDataList->begin();
 
for (int i=0; i<data->nRow; ++i) {
 
++it;
 
}
 
CCLabelTTF *cellLabel = CCLabelTTF::labelWithString(((std::string) *it).c_str(), "Arial", 32);
 
cellLabel->setPosition(ccp(cellSize.width / 2, cellSize.height / 2));
 
cell->addChild(cellLabel);
 
}
 
 
 
//cell被选中
 
void ListViewTestLayer::CCListView_didClickCellAtRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data){
 
char info[100];
 
sprintf(info, "No. %d Row", data->nRow);
 
m_InfoLabel->setString(info);
 
}
 
 
 
//listView在滑动中
 
void ListViewTestLayer::CCListView_didScrollToRow(cocos2d::extension::CCListView *listView, cocos2d::extension::CCListViewProtrolData *data){
 
m_InfoLabel->setString("Scrolling...");
 
}
 
 
 
bool ListViewTestLayer::init(){
 
if (!CCLayer::init()) {
 
return false;
 
}
 
initData();
 
return true;
 
}

调用方法：

//list view

ListViewTestLayer *listViewDemoLayer = ListViewTestLayer::node();

addChild(listViewDemoLayer);