cocos2dx基础篇(9) 滑块控件CCControlSlider

滑块控件CCControlSlider，应该也是很常见的UI控件，想必大家都不陌生。

    比如调节音量的大小：

1、CCControl主要向滑块类CCControlSlider提供了以下控件事件

1. //

2. CCControlEventValueChanged //当控件的值发生改变时触发。

3. //

2、绑定控件事件的方法

1. //

2. //绑定控件事件

3. //addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);

4. void addTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents);

5.  

6. //删除控件事件

7. //removeTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);

8. void removeTargetWithActionForControlEvents(CCObject* target, SEL_CCControlHandler action, CCControlEvent controlEvents);

9. //

3、需要引用一下的文件及命名空间

1. //

2. #include "cocos-ext.h" //包含cocos-ext.h头文件

3. using namespace cocos2d::extension; //引用cocos2d::extension命名空间

4. //

4、常用操作

1. //

2. class CCControlSlider: public CCControl

3. {

4. /**

5. * 创建CCControlSlider的两种方式

6. */

7. //用CCSprite精灵创建滑块控件

8. //create("滑块背景图", "划过区域图", "滑块图");

9. static CCControlSlider* create(CCSprite* backgroundSprite, CCSprite* pogressSprite, CCSprite* thumbSprite);

10.  

11. //直接用图片资源名创建，省去了创建精灵的步骤

12. //实际上，在其内部依旧是调用上面的create函数创建CCSprite精灵

13. //create("滑块背景图", "划过区域图", "滑块图");

14. static CCControlSlider* create(const char* bgFile, const char* progressFile, const char* thumbFile);

15.  
16.  

17. /**

18. * 属性设置

19. * setValue ,

20. * setMinimumValue , setMaximumValue

21. * setMinimumAllowedValue , setMaximumAllowedValue ,

22. * setBackgroundSprite , setProgressSprite , setThumbSprite

23. */

24. float setValue() | getValue(); //设置当前滑块的值

25. float setMinimumValue() | getMinimumValue(); //设置滑块最小值

26. float setMaximumValue() | getMaximumValue(); //设置滑块最大值

27. float setMinimumAllowedValue() |　setMinimumAllowedValue(); //设置允许滑动的最小值

28. float setMaximumAllowedValue() | setMaximumAllowedValue(); //设置允许滑动的最大值

29.  
30.  

31. //设置滑块的背景图、划过区域图、滑块图

32. //CC_SYNTHESIZE_RETAIN为宏定义：除了创建了set/get以外，还用了retain来保留内存资源。

33. CC_SYNTHESIZE_RETAIN(CCSprite*, m_backgroundSprite, BackgroundSprite);

34. CC_SYNTHESIZE_RETAIN(CCSprite*, m_progressSprite, ProgressSprite);

35. CC_SYNTHESIZE_RETAIN(CCSprite*, m_thumbSprite, ThumbSprite);

36. };

37. //

5、滑块的值、最值、允许最值解析

    假设滑块的属性值设置如下：

        Value = 40;

        MinimumValue = 0;         MaximumValue = 100;

        MinimumAllowedValue = 20; MaximumAllowedValue = 80;

    那么滑块只能在Allowed的最小值和最大值之间滑动，即[20,80]的数值之间滑动。

【代码实战】

1、资源图片

2、引入文件和命名空间

1. //

2. #include "cocos-ext.h" //包含cocos-ext.h头文件

3. using namespace cocos2d::extension; //引用cocos2d::extension命名空间

4. //

3、在HelloWorld.h中声明控件回调函数、显示滑块数值的Label

1. //

2. CCLabelTTF* label; //显示滑块数值的Label

3.  

4. void valueChanged(CCObject* sender, CCControlEvent controlEvent); //当值改变时触发的控件事件

5. //

4、在HelloWorld.cpp中创建滑块控件，并绑定ValueChanged控件事件

1. //

2. //创建显示Slider值的标签

3. label = CCLabelTTF::create("50.0", "Arial", 32);

4. label->setPosition( midPos + ccp(0, 100) );

5. this->addChild(label);

6.  
7.  

8. //创建滑块控件CCControlSlider

9. CCControlSlider* slider = CCControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");

10. slider->setPosition( midPos );

11. this->addChild(slider);

12.  

13. //设置属性

14. slider->setMinimumValue(0); //设置滑块最小值

15. slider->setMaximumValue(100); //设置滑块最大值

16. slider->setMinimumAllowedValue(20); //设置允许滑动的最小值

17. slider->setMaximumAllowedValue(80); //设置允许滑动的最大值

18. slider->setValue(50); //设置当前滑块的值

19.  

20. //绑定事件，当滑块的值改变时触发控件事件

21. slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);

22. //

5、实现控件回调函数

1. //

2. //事件响应函数，值改变时，修改label标签的内容

3. void HelloWorld::valueChanged(CCObject* sender, CCControlEvent controlEvent)

4. {

5. //获取事件委托者：滑块控制CCControlSlider

6. CCControlSlider* slider = (CCControlSlider*)sender;

7.  

8. //修改label的值，显示滑块的当前值

9. //sprintf为C语言中的字符串格式转换，这里将float转换为字符串

10. char str[50];

11. sprintf(str, "%f", slider->getValue() ); //字符串格式转换

12. label->setString(str);

13. }

14. //

6、运行结果

7、分析与总结

        滑块只能在Allowed的最值之间滑动。