Merge pull request #12352 from andyque/add-two-events-to-ui-slider

Improve ui::Slider

cocos/ui/UISlider.cpp

@@ -48,6 +48,7 @@ _slidBallDisabledRenderer(nullptr),
 _slidBallRenderer(nullptr),
 _barLength(0.0),
 _percent(0),
+_maxPercent(100),
 _scale9Enabled(false),
 _prevIgnoreSize(true),
 _zoomScale(0.1f),
@@ -384,18 +385,28 @@ void Slider::loadSlidBallTextureDisabled(SpriteFrame* spriteframe)
     this->updateChildrenDisplayedRGBA();
 }
 
+void Slider::setMaxPercent(int percent)
+{
+    _maxPercent = percent;
+}
+
+int Slider::getMaxPercent()const
+{
+    return _maxPercent;
+}
+
 void Slider::setPercent(int percent)
 {
-    if (percent > 100)
+    if (percent > _maxPercent)
     {
-        percent = 100;
+        percent = _maxPercent;
     }
     if (percent < 0)
     {
         percent = 0;
     }
     _percent = percent;
-    float res = percent / 100.0f;
+    float res = 1.0 * percent / _maxPercent;
     float dis = _barLength * res;
     _slidBallRenderer->setPosition(dis, _contentSize.height / 2.0f);
     if (_scale9Enabled)
@@ -433,7 +444,7 @@ bool Slider::onTouchBegan(Touch *touch, Event *unusedEvent)
     {
         Vec2 nsp = convertToNodeSpace(_touchBeganPosition);
         setPercent(getPercentWithBallPos(nsp.x));
-        percentChangedEvent();
+        percentChangedEvent(EventType::ON_SLIDEBALL_DOWN);
     }
     return pass;
 }
@@ -443,22 +454,24 @@ void Slider::onTouchMoved(Touch *touch, Event *unusedEvent)
     _touchMovePosition = touch->getLocation();
     Vec2 nsp = convertToNodeSpace(_touchMovePosition);
     setPercent(getPercentWithBallPos(nsp.x));
-    percentChangedEvent();
+    percentChangedEvent(EventType::ON_PERCENTAGE_CHANGED);
 }
 
 void Slider::onTouchEnded(Touch *touch, Event *unusedEvent)
 {
     Widget::onTouchEnded(touch, unusedEvent);
+    percentChangedEvent(EventType::ON_SLIDEBALL_UP);
 }
 
 void Slider::onTouchCancelled(Touch *touch, Event *unusedEvent)
 {
     Widget::onTouchCancelled(touch, unusedEvent);
+    percentChangedEvent(EventType::ON_SLIDEBALL_CANCEL);
 }
 
 float Slider::getPercentWithBallPos(float px)const
 {
-    return ((px/_barLength)*100.0f);
+    return ((px/_barLength) * static_cast<float>(_maxPercent));
 }
 
 void Slider::addEventListenerSlider(Ref *target, SEL_SlidPercentChangedEvent selector)
@@ -472,7 +485,7 @@ void Slider::addEventListener(const ccSliderCallback& callback)
     _eventCallback = callback;
 }
 
-void Slider::percentChangedEvent()
+void Slider::percentChangedEvent(EventType event)
 {
     this->retain();
     if (_sliderEventListener && _sliderEventSelector)
@@ -481,7 +494,7 @@ void Slider::percentChangedEvent()
     }
     if (_eventCallback)
     {
-        _eventCallback(this, EventType::ON_PERCENTAGE_CHANGED);
+        _eventCallback(this,event);
     }
     if (_ccEventCallback)
     {
@@ -695,6 +708,7 @@ void Slider::copySpecialProperties(Widget *widget)
         loadSlidBallTexturePressed(slider->_slidBallPressedRenderer->getSpriteFrame());
         loadSlidBallTextureDisabled(slider->_slidBallDisabledRenderer->getSpriteFrame());
         setPercent(slider->getPercent());
+        setMaxPercent(slider->getMaxPercent());
         _isSliderBallPressedTextureLoaded = slider->_isSliderBallPressedTextureLoaded;
         _isSliderBallDisabledTexturedLoaded = slider->_isSliderBallDisabledTexturedLoaded;
         _sliderEventListener = slider->_sliderEventListener;

cocos/ui/UISlider.h

@@ -61,7 +61,11 @@ public:
      */
     enum class EventType
     {
-        ON_PERCENTAGE_CHANGED
+        ON_PERCENTAGE_CHANGED,
+        //@since v3.7
+        ON_SLIDEBALL_DOWN,
+        ON_SLIDEBALL_UP,
+        ON_SLIDEBALL_CANCEL
     };
     typedef std::function<void(Ref*,EventType)> ccSliderCallback;
     /**
@@ -205,6 +209,21 @@ public:
      */
     int getPercent()const;
 
+    /**
+     * Set a large value could give more control to the precision.
+     * @since v3.7
+     * @param percent The max percent of Slider.
+     */
+    void setMaxPercent(int percent);
+
+    /**
+     * Query the maximum percent of Slider. The default value is 100.
+     * @since v3.7
+     * @return The maximum percent of the Slider.
+     */
+    int getMaxPercent()const;
+
+    
     CC_DEPRECATED_ATTRIBUTE void addEventListenerSlider(Ref* target,SEL_SlidPercentChangedEvent selector);
     /**
      * Add call back function called when slider's percent has changed to slider.
@@ -252,7 +271,7 @@ CC_CONSTRUCTOR_ACCESS:
 protected:
     virtual void initRenderer() override;
     float getPercentWithBallPos(float location)const;
-    void percentChangedEvent();
+    void percentChangedEvent(EventType event);
     virtual void onPressStateChangedToNormal() override;
     virtual void onPressStateChangedToPressed() override;
     virtual void onPressStateChangedToDisabled() override;
@@ -284,6 +303,7 @@ protected:
     
     float _barLength;
     int _percent;
+    int _maxPercent;
     
     bool _scale9Enabled;
     bool _prevIgnoreSize;

tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UISliderTest/UISliderTest.cpp

@@ -10,6 +10,7 @@ UISliderTests::UISliderTests()
     ADD_TEST_CASE(UISliderTest_Scale9_State_Change);
     ADD_TEST_CASE(UISliderNormalDefaultTest);
     ADD_TEST_CASE(UISliderDisabledDefaultTest);
+    ADD_TEST_CASE(UISliderNewEventCallbackTest);
 }
 
 // UISliderTest
@@ -47,6 +48,7 @@ bool UISliderTest::init()
         slider->loadBarTexture("cocosui/sliderTrack.png");
         slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "");
         slider->loadProgressBarTexture("cocosui/sliderProgress.png");
+        slider->setMaxPercent(10000);
         slider->setPosition(Vec2(widgetSize.width / 2.0f, widgetSize.height / 2.0f/* + slider->getSize().height * 2.0f*/));
         slider->addEventListener(CC_CALLBACK_2(UISliderTest::sliderEvent, this));
         _uiLayer->addChild(slider);
@@ -63,7 +65,8 @@ void UISliderTest::sliderEvent(Ref *pSender, Slider::EventType type)
     {
         Slider* slider = dynamic_cast<Slider*>(pSender);
         int percent = slider->getPercent();
-        _displayValueLabel->setString(String::createWithFormat("Percent %d", percent)->getCString());
+        int maxPercent = slider->getMaxPercent();
+        _displayValueLabel->setString(StringUtils::format("Percent %f", 10000.0 * percent / maxPercent));
     }
 }
 
@@ -121,7 +124,7 @@ void UISliderTest_Scale9::sliderEvent(Ref *pSender, Slider::EventType type)
     {
         Slider* slider = dynamic_cast<Slider*>(pSender);
         int percent = slider->getPercent();
-        _displayValueLabel->setString(String::createWithFormat("Percent %d", percent)->getCString());
+        _displayValueLabel->setString(StringUtils::format("Percent %d", percent));
     }
 }
 
@@ -189,7 +192,7 @@ void UISliderTest_Scale9_State_Change::sliderEvent(Ref *pSender, Slider::EventTy
     {
         Slider* slider = dynamic_cast<Slider*>(pSender);
         int percent = slider->getPercent();
-        _displayValueLabel->setString(String::createWithFormat("Percent %d", percent)->getCString());
+        _displayValueLabel->setString(StringUtils::format("Percent %d", percent));
     }
 }
 
@@ -303,3 +306,66 @@ bool UISliderDisabledDefaultTest::init()
 }
 
 
+
+// UISliderNewEventCallbackTest
+
+UISliderNewEventCallbackTest::UISliderNewEventCallbackTest()
+: _displayValueLabel(nullptr)
+{
+
+}
+
+UISliderNewEventCallbackTest::~UISliderNewEventCallbackTest()
+{
+}
+
+bool UISliderNewEventCallbackTest::init()
+{
+    if (UIScene::init())
+    {
+        Size widgetSize = _widget->getContentSize();
+
+        // Add a label in which the slider alert will be displayed
+        _displayValueLabel = Text::create("","Arial",32);
+        _displayValueLabel->setAnchorPoint(Vec2(0.5f, -1));
+        _displayValueLabel->setPosition(Vec2(widgetSize.width / 2.0f, widgetSize.height / 2.0f + 100));
+        _uiLayer->addChild(_displayValueLabel);
+
+        // Add the alert
+        Text* alert = Text::create("See console ouput for Slider Down and Up event.","fonts/Marker Felt.ttf",20);
+        alert->setColor(Color3B(159, 168, 176));
+        alert->setPosition(Vec2(widgetSize.width / 2.0f,
+                                widgetSize.height / 2.0f - alert->getContentSize().height * 3.75f));
+        _uiLayer->addChild(alert);
+
+        // Create the slider
+        Slider* slider = Slider::create();
+        slider->loadBarTexture("cocosui/sliderTrack.png");
+        slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "");
+        slider->loadProgressBarTexture("cocosui/sliderProgress.png");
+        slider->setMaxPercent(1000);
+        slider->setPosition(Vec2(widgetSize.width / 2.0f,
+                                 widgetSize.height / 2.0f + 50));
+        slider->addEventListener([=](Ref* widget,Slider::EventType type)
+        {
+            Slider* slider = (Slider*)widget;
+            if(type == Slider::EventType::ON_SLIDEBALL_DOWN)
+            {
+                CCLOG("slider button pressed!");
+            }
+            else if(type == Slider::EventType::ON_PERCENTAGE_CHANGED)
+            {
+                CCLOG("slider is moving! percent = %f", 100.0f * slider->getPercent() / slider->getMaxPercent() );
+            }
+            else if(type == Slider::EventType::ON_SLIDEBALL_UP)
+            {
+                CCLOG("slider button is released.");
+            }
+        });
+        _uiLayer->addChild(slider);
+
+
+        return true;
+    }
+    return false;
+}

tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UISliderTest/UISliderTest.h

@@ -98,4 +98,16 @@ protected:
     cocos2d::ui::Text* _displayValueLabel;
 };
 
+class UISliderNewEventCallbackTest : public UIScene
+{
+public:
+    CREATE_FUNC(UISliderNewEventCallbackTest);
+
+    UISliderNewEventCallbackTest();
+    ~UISliderNewEventCallbackTest();
+    virtual bool init() override;
+
+protected:
+    cocos2d::ui::Text* _displayValueLabel;
+};
 #endif /* defined(__TestCpp__UISliderTest__) */