好了,这篇博客继续讲控件。
首先先介绍一个 -x 已经封装了的功能,九妹。人云亦云,看别人这么讲,我也就这么称呼吧。
CCScale9Sprite* nineGirl = CCScale9Sprite::create("button.png");
nineGirl->setContentSize(CCSize(200, 100));
nineGirl->setPosition(ccp(300, 200));
this->addChild(nineGirl);
新建一个场景,然后添加这段代码,就能看到效果了:
稍微啰嗦一下,CCScale9Sprite,顾名思义,它是一张可拉伸的精灵
然后,button.png 是一张很小很小的图片:
然后讲第一个控件:
1、ConrolButton
//ControlButton.h
#ifndef __CONTROL_BUTTON_H__
#define __CONTROL_BUTTON_H__
#include "cocos2d.h"
#include "../../extensions/cocos-ext.h"
#include "MainMenu.h"
USING_NS_CC_EXT;
class ControlButton : public MainMenu
{
public:
virtual bool init();
CREATE_FUNC(ControlButton);
CCControlButton *standardButtonWithTitle(const char * title);
};
#endif
//.cpp
#include "ControlButton.h"
#include "HelloWorldScene.h"
using namespace cocos2d;
bool ControlButton::init()
{
bool bRet = false;
do
{
CCSize size = CCDirector::sharedDirector()->getWinSize();
//添加一个数组,里面都是titile元素
CCArray *stringArray = CCArray::create(
ccs("Hello"),
ccs("start530"),
ccs("cool"),
ccs("!"),
ccs("haha"),
NULL);
//这一步灰常神奇!!!没有它的话,背景框就无法跟button相关联
CCNode *layer = CCNode::create();
addChild(layer, 1);
double total_width = 0, height = 0;
// For each title in the array
CCObject* pObj = NULL;
CCARRAY_FOREACH(stringArray, pObj)
{
CCString* title = (CCString*)pObj;
// Creates a button with this string as title,getCString 从stringArray里读取文字
CCControlButton *button = standardButtonWithTitle(title->getCString());
button->setPosition(ccp(total_width + button->getContentSize().width / 2, button->getContentSize().height / 2));
layer->addChild(button);
// Compute the size of the layer,计算layer的大小
height = button->getContentSize().height;
total_width += button->getContentSize().width;//每增加一个array里的元素,width++
}
//设置layer的位置
layer->setAnchorPoint(ccp (0.5, 0.5));
layer->setContentSize(CCSizeMake(total_width, height));
layer->setPosition(ccp(size.width / 2.0f, size.height / 2.0f));
// Add the black background,用九妹创建一个背景
CCScale9Sprite *background = CCScale9Sprite::create("buttonBackground.png");
background->setContentSize(CCSizeMake(total_width + 14, height + 14));
background->setPosition(ccp(size.width / 2.0f, size.height / 2.0f));
this->addChild(background);
//添加mainMenu菜单
MainMenu *mainMenu = new MainMenu();
mainMenu->mainMenu();
this->addChild(mainMenu);
bRet = true;
}while(0);
return bRet;
}
CCControlButton *ControlButton::standardButtonWithTitle(const char * title)
{
//Creates and return a button with a default background and title color.
CCScale9Sprite *backgroundButton = CCScale9Sprite::create("button.png");//按下前
CCScale9Sprite *backgroundHighlightedButton = CCScale9Sprite::create("buttonHighlighted.png");//按下后
CCLabelTTF *titleButton = CCLabelTTF::create(title, "Marker Felt", 30);//添加文字
titleButton->setColor(ccc3(159, 168, 176));//设置文字点击前的颜色
CCControlButton *button = CCControlButton::create(titleButton, backgroundButton);
button->setBackgroundSpriteForState(backgroundHighlightedButton, CCControlStateHighlighted);
button->setTitleColorForState(ccWHITE, CCControlStateHighlighted);//设置文字点击后的颜色
return button;
}
效果如下:
2、ControlPotentiometer
bool ControlPotentiometer::init()
{
CCSize size = CCDirector::sharedDirector()->getWinSize();
CCNode *layer = CCNode::create();
layer->setPosition(ccp(size.width/2,size.height/2));
this->addChild(layer);
double layer_width = 0; //要记得初始化,否则报错
//add the background
CCScale9Sprite* background = CCScale9Sprite::create("buttonBackground.png");
background->setContentSize(CCSizeMake(80,50));
background->setPosition(ccp(layer_width + background->getContentSize().width / 2.0f,0));
layer->addChild(background);
layer_width += background->getContentSize().width;//此刻layer_width的值为background框的宽
//下面这两步 是设置显示在框里的内容,设置初始值为无
this->setDisplayValueLabel(CCLabelTTF::create("","HelveticaNeue-Bold",30));
m_pDisplayValueLabel->setPosition(background->getPosition());
layer->addChild(m_pDisplayValueLabel);
// Add the slider
CCControlPotentiometer *potentiometer = CCControlPotentiometer::create("potentiometerTrack.png"
,"potentiometerProgress.png"
,"potentiometerButton.png");
//此刻poten 的横坐标为layer_width的的宽+ 10 个像素
potentiometer->setPosition(ccp(layer_width + 10 + potentiometer->getContentSize().width / 2, 0));
// When the value of the slider will change, the given selector will be call
potentiometer->addTargetWithActionForControlEvents(this, cccontrol_selector(ControlPotentiometer::onValueChange), CCControlEventValueChanged);
layer->addChild(potentiometer);
layer_width += potentiometer->getContentSize().width;//此刻layer_width的值为background框的宽+ poten 的宽
// Set the layer size
layer->setContentSize(CCSizeMake(layer_width, 0));//设置layer 的固定大小。宽即为上面的layer_width
layer->setAnchorPoint(ccp (0.5f, 0.5f));
// Update the value label
this->onValueChange(potentiometer, CCControlEventValueChanged);
//add mainMenu
MainMenu *mainMenu = new MainMenu();
mainMenu->mainMenu();
this->addChild(mainMenu);
return true;
}
好了,先这样。下期继续。