Allow customizing opacity of PageView indicator nodes (#18059)

* allow setting and getting of pageview indicator opacity. fix some documentation comments

* don't draw the indicator the selected indicator is currently overlapping

* add a tweaked opacity to one of the test cases

* remove unused variable

* convert tabs to whitespace

* change constexpr to static const

cocos/ui/UIPageView.cpp

@@ -507,6 +507,34 @@ const Color3B& PageView::getIndicatorIndexNodesColor() const
     CCASSERT(_indicator != nullptr, "");
     return _indicator->getIndexNodesColor();
 }
+    
+void PageView::setIndicatorSelectedIndexOpacity(GLubyte opacity)
+{
+    if(_indicator != nullptr)
+    {
+        _indicator->setSelectedIndexOpacity(opacity);
+    }
+}
+
+GLubyte PageView::getIndicatorSelectedIndexOpacity() const
+{
+    CCASSERT(_indicator != nullptr, "");
+    return _indicator->getSelectedIndexOpacity();
+}
+
+void PageView::setIndicatorIndexNodesOpacity(GLubyte opacity)
+{
+    if(_indicator != nullptr)
+    {
+        _indicator->setIndexNodesOpacity(opacity);
+    }
+}
+
+GLubyte PageView::getIndicatorIndexNodesOpacity() const
+{
+    CCASSERT(_indicator != nullptr, "");
+    return _indicator->getIndexNodesOpacity();
+}
 
 void PageView::setIndicatorIndexNodesScale(float indexNodesScale)
 {

cocos/ui/UIPageView.h

@@ -317,7 +317,7 @@ public:
     /**
      * @brief Set color of page indicator's selected index.
      *
-     * @param color Space between nodes in pixel.
+     * @param color New color for selected (current) index.
      */
     void setIndicatorSelectedIndexColor(const Color3B& color);
 
@@ -331,7 +331,7 @@ public:
     /**
      * @brief Set color of page indicator's index nodes.
      *
-     * @param color Space between nodes in pixel.
+     * @param color New indicator node color.
      */
     void setIndicatorIndexNodesColor(const Color3B& color);
     
@@ -342,6 +342,34 @@ public:
      */
     const Color3B& getIndicatorIndexNodesColor() const;
     
+    /**
+     * @brief Set opacity of page indicator's selected index.
+     *
+     * @param color New opacity for selected (current) index.
+     */
+    void setIndicatorSelectedIndexOpacity(GLubyte opacity);
+    
+    /**
+     * @brief Get the opacity of page indicator's selected index.
+     *
+     * @return opacity
+     */
+    GLubyte getIndicatorSelectedIndexOpacity() const;
+    
+    /**
+     * @brief Set opacity of page indicator's index nodes.
+     *
+     * @param opacity New indicator node opacity.
+     */
+    void setIndicatorIndexNodesOpacity(GLubyte opacity);
+    
+    /**
+     * @brief Get the opacity of page indicator's index nodes.
+     *
+     * @return opacity
+     */
+    GLubyte getIndicatorIndexNodesOpacity() const;
+    
     /**
      * @brief Set scale of page indicator's index nodes.
      *

cocos/ui/UIPageViewIndicator.cpp

@@ -31,7 +31,10 @@ static const char* CIRCLE_IMAGE_KEY = "/__circleImage";
 
 NS_CC_BEGIN
 
-static const float SPACE_BETWEEN_INDEX_NODES_DEFAULT = 23;
+namespace {
+    static const float SPACE_BETWEEN_INDEX_NODES_DEFAULT = 23;
+    static const GLubyte INDEX_NODES_OPACITY_DEFAULT = 0.3*255;
+}
 
 namespace ui {
 
@@ -50,9 +53,11 @@ PageViewIndicator* PageViewIndicator::create()
 PageViewIndicator::PageViewIndicator()
 : _direction(PageView::Direction::HORIZONTAL)
 , _currentIndexNode(nullptr)
+, _currentOverlappingIndexNode(nullptr)
 , _spaceBetweenIndexNodes(SPACE_BETWEEN_INDEX_NODES_DEFAULT)
 , _indexNodesScale(1.0f)
 , _indexNodesColor(Color3B::WHITE)
+, _indexNodesOpacity(INDEX_NODES_OPACITY_DEFAULT)
 , _useDefaultTexture(true)
 , _indexNodesTextureFile("")
 , _indexNodesTexType(Widget::TextureResType::LOCAL)
@@ -97,7 +102,14 @@ void PageViewIndicator::indicate(ssize_t index)
     {
         return;
     }
-    _currentIndexNode->setPosition(_indexNodes.at(index)->getPosition());
+    Sprite* oldOverlappingNode = _currentOverlappingIndexNode;
+    _currentOverlappingIndexNode = _indexNodes.at(index);
+    if ( oldOverlappingNode != _currentOverlappingIndexNode ) {
+        if ( oldOverlappingNode )
+            oldOverlappingNode->setVisible(true);
+        _currentOverlappingIndexNode->setVisible(false);
+        _currentIndexNode->setPosition(_currentOverlappingIndexNode->getPosition());
+    }
 }
 
 void PageViewIndicator::rearrange()
@@ -151,6 +163,12 @@ void PageViewIndicator::setIndexNodesColor(const Color3B& indexNodesColor)
         indexNode->setColor(indexNodesColor);
     }
 }
+    
+void PageViewIndicator::setIndexNodesOpacity(GLubyte opacity) {
+    _indexNodesOpacity = opacity;
+    for ( auto& indexNode : _indexNodes )
+        indexNode->setOpacity(opacity);
+}
 
 void PageViewIndicator::setIndexNodesScale(float indexNodesScale)
 {
@@ -220,7 +238,7 @@ void PageViewIndicator::increaseNumberOfPages()
     
     indexNode->setColor(_indexNodesColor);
     indexNode->setScale(_indexNodesScale);
-    indexNode->setOpacity(255 * 0.3f);
+    indexNode->setOpacity(_indexNodesOpacity);
     addProtectedChild(indexNode);
     _indexNodes.pushBack(indexNode);
 }

cocos/ui/UIPageViewIndicator.h

@@ -61,6 +61,10 @@ public:
     const Color3B& getIndexNodesColor() const { return _indexNodesColor; }
     void setIndexNodesScale(float indexNodesScale);
     float getIndexNodesScale() const { return _indexNodesScale; }
+    void setSelectedIndexOpacity(GLubyte opacity) { _currentIndexNode->setOpacity(opacity); }
+    GLubyte getSelectedIndexOpacity() const { return _currentIndexNode->getOpacity(); }
+    void setIndexNodesOpacity(GLubyte opacity);
+    GLubyte getIndexNodesOpacity() const { return _indexNodesOpacity; }
     
     /**
      * Sets texture for index nodes.
@@ -79,9 +83,11 @@ protected:
     PageView::Direction _direction;
     Vector<Sprite*> _indexNodes;
     Sprite* _currentIndexNode;
+    Sprite* _currentOverlappingIndexNode;
     float _spaceBetweenIndexNodes;
     float _indexNodesScale;
     Color3B _indexNodesColor;
+    GLubyte _indexNodesOpacity;
     
     bool _useDefaultTexture;
     std::string _indexNodesTextureFile;

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

@@ -88,6 +88,8 @@ bool UIPageViewTest::init()
         //This method is deprecated, we used here only testing purpose
         pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));
         
+        pageView->setIndicatorIndexNodesOpacity(255);
+        
         _uiLayer->addChild(pageView);
         
         return true;