首页 > 代码库 > Cocostudio学习笔记(3) ImageView + Slider
Cocostudio学习笔记(3) ImageView + Slider
这篇记录了两个控件的使用流程:ImageView 和 Slide。
----------------------------------------------------------------------------------------------------------------------------
ImageView
---------------------------------------------------------------------------------------------------------------------------
此时已经十一点多了,虽然有点晚,但我还是毅然而然的研究下cocostudio版“Sprite类”(谁让LOL玩得太晚了)。
1、首先,在Cocostudio创建一个名为"SpriteTest"的项目。然后将需要的资源导入到项目中,我导入三张图片,也就是我们最熟悉的boy,girl,girl_3。(都说三角形是最稳固的,那么三角恋呢?),最后将创建好的项目导出到cocos2dx项目的Resources目录下。
2、打开cocos2dx工程,添加上面导过来的.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中创建一个工程。然后将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