ListView - Add enum for magnetic type and test cases for magnetic scroll.

cocos/ui/UIListView.cpp

@@ -34,6 +34,7 @@ IMPLEMENT_CLASS_GUI_INFO(ListView)
 ListView::ListView():
 _model(nullptr),
 _gravity(Gravity::CENTER_VERTICAL),
+_magneticType(MagneticType::NONE),
 _itemsMargin(0.0f),
 _curSelectedIndex(-1),
 _refreshViewDirty(true),
@@ -379,6 +380,16 @@ void ListView::setGravity(Gravity gravity)
     _refreshViewDirty = true;
 }
 
+void ListView::setMagneticType(MagneticType magneticType)
+{
+    _magneticType = magneticType;
+}
+
+ListView::MagneticType ListView::getMagneticType() const
+{
+    return _magneticType;
+}
+
 void ListView::setItemsMargin(float margin)
 {
     if (_itemsMargin == margin)

cocos/ui/UIListView.h

@@ -86,6 +86,22 @@ public:
         ON_SELECTED_ITEM_END
     };
     
+    /**
+     * ListView supports magnetic scroll.
+     * With CENTER type, ListView tries to align its items in center of current view.
+     * With BOTH_END type, ListView tries to align its items in left or right end if it is horizontal, top or bottom in vertical. The aligning side (left or right, top or bottom) is determined by user's scroll direction.
+     */
+    enum class MagneticType
+    {
+        NONE,
+        CENTER,
+        BOTH_END,
+        LEFT,
+        RIGHT,
+        TOP,
+        BOTTOM,
+    };
+    
     /**
      * ListView item click callback.
      */
@@ -193,6 +209,17 @@ public:
      */
     void setGravity(Gravity gravity);
     
+    /**
+     * Set magnetic type of ListView.
+     * @see `MagneticType`
+     */
+    void setMagneticType(MagneticType magneticType);
+    
+    /**
+     * Get magnetic type of ListView.
+     */
+    MagneticType getMagneticType() const;
+    
     /**
      * Set the margin between each item in ListView.
      *
@@ -344,6 +371,8 @@ protected:
     
     Gravity _gravity;
     
+    MagneticType _magneticType;
+    
     float _itemsMargin;
     
     ssize_t _curSelectedIndex;

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

@@ -7,6 +7,8 @@ const char* font_UIListViewTest = "fonts/Marker Felt.ttf";
 
 UIListViewTests::UIListViewTests()
 {
+    ADD_TEST_CASE(UIListViewTest_MagneticVertical);
+    ADD_TEST_CASE(UIListViewTest_MagneticHorizontal);
     ADD_TEST_CASE(UIListViewTest_ScrollToItemVertical);
     ADD_TEST_CASE(UIListViewTest_ScrollToItemHorizontal);
     ADD_TEST_CASE(UIListViewTest_Vertical);
@@ -653,3 +655,135 @@ bool UIListViewTest_ScrollToItem::init()
     }
     return true;
 }
+
+
+
+// UIListViewTest_Magnetic
+bool UIListViewTest_Magnetic::init()
+{
+    if(!UIScene::init())
+    {
+        return false;
+    }
+    
+    Size layerSize = _uiLayer->getContentSize();
+    
+    _titleLabel = Text::create("Magnetic scroll", "fonts/Marker Felt.ttf", 32);
+    _titleLabel->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
+    _titleLabel->setPosition(Vec2(layerSize / 2) + Vec2(0, _titleLabel->getContentSize().height * 3.15f));
+    _uiLayer->addChild(_titleLabel, 3);
+    
+    // Create the list view
+    _listView = ListView::create();
+    _listView->setDirection(getListViewDirection());
+    _listView->setBounceEnabled(true);
+    _listView->setBackGroundImage("cocosui/green_edit.png");
+    _listView->setBackGroundImageScale9Enabled(true);
+    _listView->setContentSize(layerSize / 2);
+    _listView->setScrollBarPositionFromCorner(Vec2(7, 7));
+    _listView->setItemsMargin(2.0f);
+    _listView->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
+    _listView->setPosition(layerSize / 2);
+    _uiLayer->addChild(_listView);
+    
+    // Guide line for center align
+    {
+        DrawNode* pNode = DrawNode::create();
+        Vec2 center = layerSize / 2;
+        if(getListViewDirection() == ScrollView::Direction::HORIZONTAL)
+        {
+            float halfY = 110;
+            pNode->drawLine(Vec2(center.x, center.y - halfY), Vec2(center.x, center.y + halfY), Color4F(0, 0, 0, 1));
+        }
+        else
+        {
+            float halfX = 150;
+            pNode->drawLine(Vec2(center.x - halfX, center.y), Vec2(center.x + halfX, center.y), Color4F(0, 0, 0, 1));
+        }
+        pNode->setLineWidth(2);
+        _uiLayer->addChild(pNode);
+    }
+    
+    // Show the indexes of items on each boundary.
+    {
+        Text* labels[5];
+        for(int i = 0; i < 5; ++i)
+        {
+            labels[i] = Text::create(" ", "fonts/Marker Felt.ttf", 12);
+            labels[i]->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
+            _uiLayer->addChild(labels[i]);
+        }
+        float deltaX = 145, deltaY = 90;
+        labels[0]->setPosition(_uiLayer->getContentSize() / 2 + Size(-deltaX, 0));   // left
+        labels[1]->setPosition(_uiLayer->getContentSize() / 2 + Size(deltaX, 0));   // right
+        labels[2]->setPosition(_uiLayer->getContentSize() / 2 + Size(0, deltaY));   // top
+        labels[3]->setPosition(_uiLayer->getContentSize() / 2 + Size(0, -deltaY));   // bottom
+        labels[4]->setPosition(_uiLayer->getContentSize() / 2 + Size(deltaX, deltaY));  // center
+        
+        // Callback
+        _listView->ScrollView::addEventListener([labels](Ref* ref, ScrollView::EventType eventType) {
+            ListView* listView = dynamic_cast<ListView*>(ref);
+            if(listView == nullptr || eventType != ScrollView::EventType::CONTAINER_MOVED)
+            {
+                return;
+            }
+            auto left = listView->getLeftmostItemInCurrentView();
+            auto right = listView->getRightmostItemInCurrentView();
+            auto top = listView->getTopmostItemInCurrentView();
+            auto bottom = listView->getBottommostItemInCurrentView();
+            auto center = listView->getCenterItemInCurrentView();
+            
+            labels[0]->setString(StringUtils::format("Left\nindex=%zd", listView->getIndex(left)));
+            labels[1]->setString(StringUtils::format("RIght\nindex=%zd", listView->getIndex(right)));
+            labels[2]->setString(StringUtils::format("Top index=%zd", listView->getIndex(top)));
+            labels[3]->setString(StringUtils::format("Bottom index=%zd", listView->getIndex(bottom)));
+            labels[4]->setString(StringUtils::format("Center\nindex=%zd", listView->getIndex(center)));
+        });
+    }
+    
+    // Initial magnetic type
+    _listView->setMagneticType(ListView::MagneticType::CENTER);
+    _titleLabel->setString("MagneticType - CENTER");
+    
+    // Magnetic change button
+    auto pButton = Button::create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png");
+    pButton->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
+    pButton->setScale(0.8f);
+    pButton->setPosition(Vec2(layerSize / 2) + Vec2(130, -60));
+    pButton->setTitleText("Next Magnetic");
+    pButton->addClickEventListener([this](Ref*) {
+        ListView::MagneticType eCurrentType = _listView->getMagneticType();
+        ListView::MagneticType eNextType;
+        std::string sString;
+        if(eCurrentType == ListView::MagneticType::NONE)
+        {
+            eNextType = ListView::MagneticType::BOTH_END;
+            sString = "BOTH_END";
+        }
+        else if(eCurrentType == ListView::MagneticType::BOTH_END)
+        {
+            eNextType = ListView::MagneticType::CENTER;
+            sString = "CENTER";
+        }
+        else if(eCurrentType == ListView::MagneticType::CENTER)
+        {
+            eNextType = ListView::MagneticType::NONE;
+            sString = "NONE";
+        }
+        _listView->setMagneticType(eNextType);
+        _titleLabel->setString(StringUtils::format("MagneticType - %s", sString.c_str()));
+    });
+    _uiLayer->addChild(pButton);
+    
+    // Add list items
+    static const Size BUTTON_SIZE(50, 40);
+    for (int i = 0; i < 20; ++i)
+    {
+        auto pButton = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
+        pButton->setContentSize(BUTTON_SIZE);
+        pButton->setScale9Enabled(true);
+        pButton->setTitleText(StringUtils::format("Button-%d", i));
+        _listView->pushBackCustomItem(pButton);
+    }
+    return true;
+}

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

@@ -84,6 +84,8 @@ public:
     virtual bool init() override;
 };
 
+
+// Test for scroll to item
 class UIListViewTest_ScrollToItem : public UIScene
 {
 protected:
@@ -115,4 +117,36 @@ public:
     }
 };
 
+
+// Test for magnetic scroll
+class UIListViewTest_Magnetic : public UIScene
+{
+protected:
+    virtual bool init() override;
+    virtual cocos2d::ui::ScrollView::Direction getListViewDirection() const = 0;
+    
+    cocos2d::ui::ListView* _listView;
+    cocos2d::ui::Text* _titleLabel;
+};
+
+class UIListViewTest_MagneticVertical : public UIListViewTest_Magnetic
+{
+public:
+    CREATE_FUNC(UIListViewTest_MagneticVertical);
+    virtual cocos2d::ui::ScrollView::Direction getListViewDirection() const
+    {
+        return cocos2d::ui::ScrollView::Direction::VERTICAL;
+    }
+};
+
+class UIListViewTest_MagneticHorizontal : public UIListViewTest_Magnetic
+{
+public:
+    CREATE_FUNC(UIListViewTest_MagneticHorizontal);
+    virtual cocos2d::ui::ScrollView::Direction getListViewDirection() const
+    {
+        return cocos2d::ui::ScrollView::Direction::HORIZONTAL;
+    }
+};
+
 #endif /* defined(__TestCpp__UIListViewTest__) */