Cocostudio学习笔记（3） ImageView + Slider

此记录使用两个控制流：ImageView 和 Slide。

----------------------------------------------------------------------------------------------------------------------------

ImageView

---------------------------------------------------------------------------------------------------------------------------

此时已经十一点多了，尽管有点晚，但我还是毅然而然的研究下cocostudio版“Sprite类”（谁让LOL玩得太晚了）。

1、首先，在Cocostudio创建一个名为"SpriteTest"的项目。然后将须要的资源导入到项目中，我导入三张图片，也就是我们最熟悉的boy，girl，girl_3。

（都说三角形是最稳固的，那么三角恋呢？）。最后将创建好的项目导出到cocos2dx项目的Resources文件夹下。

2、打开cocos2dxproject，加入上面导过来的.json文件。代码例如以下：

cocos2d::ui::Widget* image_sp = GUIReader::getInstance()->widgetFromJsonFile("SpriteTest_1.json");//读取json配置文件
this->addChild(image_sp,2);

之后执行下程序。恩，三个主角都显示出来，没多大问题。
这里要点名的一点是：在cocos2dx中我的模拟器窗体大小为960x640，而cocostudio项目中我设置的窗体大小为480x320（请原谅我的懒惰）。这样程序跑起来后会发现image_sp显示的位置处于左下方原点的位置。

3、我认为image_sp放在左下角太委屈它了，所以我要将它往右上角移动下。代码例如以下：

image_sp->setPosition(Point(300,200));

恩，执行后果然移动过去了，这样看来Widget也没什么了不起的嘛。我进它源代码里看看还有些啥玩意。呵呵，一大堆东西...吓尿了。

4、接下来我要单独取出boy来玩玩。但是，怎么取呢？难道也是用Sprite吗？要知道这但是cocostudio啊。

灵机一动：Menu是用Button取代，那么Sprite应该是用Image取代吧。赶紧写程序试下，还没敲完我最终反应过来。坑爹啊！
最后还是到Test里看下代码才知道是用ImageView这货。

ImageView* boy = static_cast<ImageView*>(Helper::seekWidgetByName(image_sp,"boy"));	
boy->setPosition(Point(240,200));

恩。跑一下没有问题。

5、以下进ImageView的源代码里看看。ImageView的老子Widget我惹不起。难道它这小屁孩我还惹不起？看完源代码。果然，才这么几行，没难度啊！挑几个重点的API看吧。

static ImageView* create();//相似Sprite的create()
static ImageView* create(const std::string& imageFileName, TextureResType texType = UI_TEX_TYPE_LOCAL);//同上
void loadTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL);//相似Sprite的initWithFile()。

没啥好说的。换汤不换药。唯一不同的地方就是TextureRestType这货，它应该是值读取纹理的类型。有以下两种：

typedef enum
{
    UI_TEX_TYPE_LOCAL = 0,
    UI_TEX_TYPE_UI_TEX_TYPE_LOCALPLIST = 1
}TextureResType;

//UI_TEX_TYPE_LOCAL是直接读取资源文件夹下的图片，这也是创建初始化ImageView的默认方式。
//UI_TEX_TYPE_UI_TEX_TYPE_LOCALPLIST 应该是读取plist文件。

6、最后就是跳过cocostudio，直接用ImageView创建个对象来试试，这里我先用Sprite创建一个对象，看能否够载入到image_sp上，事实证明是能够的。最后看代码（有三个boy）

ImageView* boy = static_cast<ImageView*>(Helper::seekWidgetByName(image_sp,"boy"));	//用image_sp中提取
boy->setPosition(Point(240,200));

auto boy_cx = Sprite::create("boy.png");//用Sprite创建
boy_cx->setPosition(Point(200,100));
image_sp->addChild(boy_cx,2);

auto boy_cc = ImageView::create("boy.png");//用boy_cc创建
boy_cc->setPosition(Point(300,100));
image_sp->addChild(boy_cc,2);

执行起来效果杠杠的，睡觉去。

----------------------------------------------------------------------------------------------------------------------------

Slider

---------------------------------------------------------------------------------------------------------------------------

接下来開始搞下slider，也就是cocos2dx中是ControlSlider这货啦。

1、在cocostuido中创建一个project。然后将slider拖到场景中。在属性设置里我就改了个name。其它都默认。由于用的都是系统自带的那些资源图片，所以在cocos2dx中显示的效果很的不友好。

2、在cocos2dx中导入slider的.json文件。然后载入到场景中来。

代码例如以下：

cocos2d::ui::Widget* slideUI = GUIReader::getInstance()->widgetFromJsonFile("SlideUI/SlideUI_1.json");
this->addChild(slideUI,2);

3、单独提取出slide这个控件，然后对它做一些简单的操作，如setPosition。

Slider* slide = static_cast<Slider*>(Helper::seekWidgetByName(slideUI,"slide"));
slide->setPosition(Point(500,200));

事实上每篇都有这一步的原因是由于我想了解slider这个控件在cocos2dx中的类名叫什么。比如ProgressBar在cocos2dx中的类名就叫：
LoadingBar。

4、以下看下Slide的源代码：

//创建Slide的方式比較特别，由于它没有一个API是直接在create中载入资源的
static Slider* create();

//有以下几个载入资源的方式：
//a 载入背景条,背景条知道不？就是进度为0时。整个进度条显示的背景图片
void loadBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL);
//b 载入拖杆，也就是在滑动条上滚来滚去的那个杆子
void loadSlidBallTextures(const std::string& normal,//未被触摸显示的图片
						  const std::string& pressed,//触摸后显示的图片
						  const std::string& disabled,//禁止触摸显示的图片
						  TextureResType texType = UI_TEX_TYPE_LOCAL);
						  
//上面这个API是能够一次性的载入三张图片，以下这三个是单独载入的：
void loadSlidBallTextureNormal(const std::string& normal,TextureResType texType = UI_TEX_TYPE_LOCAL);
void loadSlidBallTexturePressed(const std::string& pressed,TextureResType texType = UI_TEX_TYPE_LOCAL);
void loadSlidBallTextureDisabled(const std::string& disabled,TextureResType texType = UI_TEX_TYPE_LOCAL);

//TextureResType这货在之前的笔记里有提到过，UI_TEX_TYPE_LOCAL 就表示载入的纹理图片是直接从Resources文件夹下载入，而
//UI_TEX_TYPE_PLIST表示载入的纹理是通过plist来载入。

//c 载入进度条
void loadProgressBarTexture(const std::string& fileName, TextureResType texType = UI_TEX_TYPE_LOCAL);

void setPercent(int percent);//设置进度
int getPercent();//读取进度

void addEventListenerSlider(Ref* target,SEL_SlidPercentChangedEvent selector);//加入事件回调

5、以下简单的创建一个Slider：

auto m_slide = Slider::create();
m_slide->loadBarTexture("SlideUI/sliderTrack.png");
m_slide->loadSlidBallTextures("SlideUI/sliderThumb.png","SlideUI/sliderThumb.png","");
m_slide->loadProgressBarTexture("SlideUI/sliderProgress.png");

m_slide->setPosition(Point(200,200));
m_slide->setPercent(50);
m_slide->addEventListenerSlider(this,sliderpercentchangedselector(HelloWorld::sliderCallback));//加入回调函数
this->addChild(m_slide,3);

//以下看下回调函数的声明：
void sliderCallback(Ref* sender,SliderEventType type);

//进入SliderEventType看下它都有哪些參数：
typedef enum
{
    SLIDER_PERCENTCHANGED
}SliderEventType;

//好吧，就一个，那就是每当slide的进度发生变化时都会跳入到回调函数中。
//以下看下回调函数的实现：
void HelloWorld::sliderCallback(Ref* sender,SliderEventType type)
{
	switch (type)
	{
	case SLIDER_PERCENTCHANGED:
		CCLOG("slide percent change");
		break;
	}
}

恩。也就这样吧。

6、小结。

Slider个人感觉还是没有cocos2dx原装的ControlSlider好用，API也没多少。毕竟ControlSlider还有设置Slider的最大值。最小值，同意滑动的最大值等。

尊重原创。转载请注明来源：http://blog.csdn.net/star530/article/details/37365053