学步园

好了，这篇博客继续讲控件。

首先先介绍一个 -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;
}

好了，先这样。下期继续。