Handle auto layout with scaled widget (#17822)

* handle auto layout with scaled widget * add test for UILayout for Scaled Widget * add test for UILayout - Scaled Widget - JS
cocos2d · May 26, 2017 · afcffc7 · afcffc7
1 parent 92e713b
commit afcffc7
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 12 deletions.
diff --git a/cocos/ui/UILayoutManager.cpp b/cocos/ui/UILayoutManager.cpp
@@ -57,7 +57,7 @@ void LinearHorizontalLayoutManager::doLayout(LayoutProtocol* layout)
             {
                 LinearLayoutParameter::LinearGravity childGravity = layoutParameter->getGravity();
                 Vec2 ap = child->getAnchorPoint();
-                Size cs = child->getContentSize();
+                Size cs = child->getBoundingBox().size;
                 float finalPosX = leftBoundary + (ap.x * cs.width);
                 float finalPosY = layoutSize.height - (1.0f - ap.y) * cs.height;
                 switch (childGravity)
@@ -115,7 +115,7 @@ void LinearVerticalLayoutManager::doLayout(LayoutProtocol* layout)
             {
                 LinearLayoutParameter::LinearGravity childGravity = layoutParameter->getGravity();
                 Vec2 ap = subWidget->getAnchorPoint();
-                Size cs = subWidget->getContentSize();
+                Size cs = subWidget->getBoundingBox().size;
                 float finalPosX = ap.x * cs.width;
                 float finalPosY = topBoundary - ((1.0f-ap.y) * cs.height);
                 switch (childGravity)
@@ -136,7 +136,7 @@ void LinearVerticalLayoutManager::doLayout(LayoutProtocol* layout)
                 finalPosX += mg.left;
                 finalPosY -= mg.top;
                 subWidget->setPosition(finalPosX, finalPosY);
-                topBoundary = subWidget->getPosition().y - subWidget->getAnchorPoint().y * subWidget->getContentSize().height - mg.bottom;
+                topBoundary = subWidget->getPosition().y - subWidget->getAnchorPoint().y * subWidget->getBoundingBox().size.height - mg.bottom;
             }
         }
     }
@@ -206,7 +206,7 @@ Widget* RelativeLayoutManager::getRelativeWidget(Widget* widget)
 bool RelativeLayoutManager::calculateFinalPositionWithRelativeWidget(LayoutProtocol *layout)
 {
     Vec2 ap = _widget->getAnchorPoint();
-    Size cs = _widget->getContentSize();
+    Size cs = _widget->getBoundingBox().size;
 
     _finalPositionX = 0.0f;
     _finalPositionY = 0.0f;
@@ -280,7 +280,7 @@ bool RelativeLayoutManager::calculateFinalPositionWithRelativeWidget(LayoutProto
                 {
                     return false;
                 }
-                Size rbs = relativeWidget->getContentSize();
+                Size rbs = relativeWidget->getBoundingBox().size;
                 float locationTop = relativeWidget->getTopBoundary();
 
                 _finalPositionY = locationTop + ap.y * cs.height;
@@ -320,7 +320,7 @@ bool RelativeLayoutManager::calculateFinalPositionWithRelativeWidget(LayoutProto
                 {
                     return false;
                 }
-                Size rbs = relativeWidget->getContentSize();
+                Size rbs = relativeWidget->getBoundingBox().size;
                 float locationLeft = relativeWidget->getLeftBoundary();
                 _finalPositionX = locationLeft - (1.0f - ap.x) * cs.width;
 
@@ -360,7 +360,7 @@ bool RelativeLayoutManager::calculateFinalPositionWithRelativeWidget(LayoutProto
                 {
                     return false;
                 }
-                Size rbs = relativeWidget->getContentSize();
+                Size rbs = relativeWidget->getBoundingBox().size;
                 float locationRight = relativeWidget->getRightBoundary();
                 _finalPositionX = locationRight + ap.x * cs.width;
 
@@ -400,7 +400,7 @@ bool RelativeLayoutManager::calculateFinalPositionWithRelativeWidget(LayoutProto
                 {
                     return false;
                 }
-                Size rbs = relativeWidget->getContentSize();
+                Size rbs = relativeWidget->getBoundingBox().size;
                 float locationBottom = relativeWidget->getBottomBoundary();
 
                 _finalPositionY = locationBottom - (1.0f - ap.y) * cs.height;

diff --git a/cocos/ui/UIWidget.cpp b/cocos/ui/UIWidget.cpp
@@ -1125,22 +1125,22 @@ bool Widget::isEnabled() const
 
 float Widget::getLeftBoundary() const
 {
-    return getPosition().x - getAnchorPoint().x * _contentSize.width;
+    return getBoundingBox().origin.x;
 }
 
 float Widget::getBottomBoundary() const
 {
-    return getPosition().y - getAnchorPoint().y * _contentSize.height;
+    return getBoundingBox().origin.y;
 }
 
 float Widget::getRightBoundary() const
 {
-    return getLeftBoundary() + _contentSize.width;
+    return getLeftBoundary() + getBoundingBox().size.width;
 }
 
 float Widget::getTopBoundary() const
 {
-    return getBottomBoundary() + _contentSize.height;
+    return getBottomBoundary() + getBoundingBox().size.height;
 }
 
 const Vec2& Widget::getTouchBeganPosition()const

diff --git a/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.cpp b/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.cpp
@@ -14,6 +14,7 @@ UILayoutTests::UILayoutTests()
     ADD_TEST_CASE(UILayoutTest_Layout_Linear_Horizontal);
     ADD_TEST_CASE(UILayoutTest_Layout_Relative_Align_Parent);
     ADD_TEST_CASE(UILayoutTest_Layout_Relative_Location);
+    ADD_TEST_CASE(UILayoutTest_Layout_Scaled_Widget);
     ADD_TEST_CASE(UILayoutComponentTest);
     ADD_TEST_CASE(UILayoutComponent_Berth_Test);
     ADD_TEST_CASE(UILayoutComponent_Berth_Stretch_Test);
@@ -726,6 +727,62 @@ bool UILayoutTest_Layout_Relative_Location::init()
     return false;
 }
 
+// UILayoutTest_Layout_Relative_Location
+
+UILayoutTest_Layout_Scaled_Widget::UILayoutTest_Layout_Scaled_Widget()
+{
+}
+
+UILayoutTest_Layout_Scaled_Widget::~UILayoutTest_Layout_Scaled_Widget()
+{
+}
+
+bool UILayoutTest_Layout_Scaled_Widget::init()
+{
+    if (UIScene::init())
+    {
+        Size widgetSize = _widget->getContentSize();
+
+        // Add the alert
+        Text* alert = Text::create("Layout Scaled Widget", "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 * 4.5f));
+        _uiLayer->addChild(alert);
+
+        Layout* root = static_cast<Layout*>(_uiLayer->getChildByTag(81));
+
+        Layout* background = dynamic_cast<Layout*>(root->getChildByName("background_Panel"));
+
+        // Create the layout
+        Layout* layout = Layout::create();
+        layout->setLayoutType(Layout::Type::HORIZONTAL);
+        layout->setContentSize(Size(280, 150));
+        Size backgroundSize = background->getContentSize();
+        layout->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
+                                 (backgroundSize.width - layout->getContentSize().width) / 2.0f,
+                                 (widgetSize.height - backgroundSize.height) / 2.0f +
+                                 (backgroundSize.height - layout->getContentSize().height) / 2.0f));
+        _uiLayer->addChild(layout);
+
+        ImageView* imageView_Center1 = ImageView::create("cocosui/scrollviewbg.png");
+        imageView_Center1->setScale(0.5);
+        layout->addChild(imageView_Center1);
+
+        ImageView* imageView_Center2 = ImageView::create("cocosui/scrollviewbg.png");
+        imageView_Center2->setScale(1.2);
+        layout->addChild(imageView_Center2);
+
+        ImageView* imageView_Center3 = ImageView::create("cocosui/scrollviewbg.png");
+        imageView_Center3->setScale(0.8);
+        layout->addChild(imageView_Center3);
+
+        return true;
+    }
+
+    return false;
+}
+
+
 bool UILayoutComponentTest::init()
 {
     if (UIScene::init())

diff --git a/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.h b/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.h
@@ -123,6 +123,16 @@ class UILayoutTest_Layout_Relative_Location : public UIScene
     CREATE_FUNC(UILayoutTest_Layout_Relative_Location);
 };
 
+class UILayoutTest_Layout_Scaled_Widget : public UIScene
+{
+public:
+    UILayoutTest_Layout_Scaled_Widget();
+    ~UILayoutTest_Layout_Scaled_Widget();
+    virtual bool init() override;
+
+    CREATE_FUNC(UILayoutTest_Layout_Scaled_Widget);
+};
+
 class UILayoutComponentTest : public UIScene
 {
 public:

diff --git a/tests/js-tests/src/GUITest/UILayoutTest/UILayoutTest.js b/tests/js-tests/src/GUITest/UILayoutTest/UILayoutTest.js
@@ -406,6 +406,48 @@ var UILayoutTest_Layout_Relative_Location = UIMainLayer.extend({
      }
 });
 
+var UILayoutTest_Layout_Scaled_Widget = UIMainLayer.extend({
+    init: function(){
+        if (this._super()) {
+            var widgetSize = this._widget.getContentSize();
+
+            // Add the alert
+            var alert = new ccui.Text("Layout Scaled Widget", "Marker Felt", 20);
+            alert.setColor(cc.color(159, 168, 176));
+            alert.setPosition(widgetSize.width / 2.0, widgetSize.height / 2.0 - alert.height * 4.5);
+            this._mainNode.addChild(alert);
+
+            var root = this._mainNode.getChildByTag(81);
+            var background = root.getChildByName("background_Panel");
+
+            // Create the layout
+            var layout = new ccui.Layout();
+            layout.setLayoutType(ccui.Layout.LINEAR_HORIZONTAL);
+            layout.setContentSize(280, 150);
+            var backgroundSize = background.getContentSize();
+            layout.setPosition((widgetSize.width - backgroundSize.width) / 2.0 + (backgroundSize.width - layout.width) / 2.0,
+                    (widgetSize.height - backgroundSize.height) / 2.0 + (backgroundSize.height - layout.height) / 2.0 );
+            this._mainNode.addChild(layout);
+
+            // center
+            var imageView_Center1 = new ccui.ImageView("ccs-res/cocosui/scrollviewbg.png");
+            imageView_Center1.scale = 0.5;
+            layout.addChild(imageView_Center1);
+
+            var imageView_Center2 = new ccui.ImageView("ccs-res/cocosui/scrollviewbg.png");
+            imageView_Center2.scale = 1.2;
+            layout.addChild(imageView_Center2);
+
+            var imageView_Center3 = new ccui.ImageView("ccs-res/cocosui/scrollviewbg.png");
+            imageView_Center3.scale = 0.8;
+            layout.addChild(imageView_Center3);
+
+            return true;
+        }
+        return false;
+    }
+});
+
 var UILayoutComponentTest = UIMainLayer.extend({
     _baseLayer: null,
     init: function(){

diff --git a/tests/js-tests/src/GUITest/UISceneManager.js b/tests/js-tests/src/GUITest/UISceneManager.js
@@ -410,6 +410,12 @@
                     return new UILayoutTest_Layout_Relative_Location();
                 }
             },
+            {
+                title: "UILayoutTest_Layout_Scaled_Widget",
+                func: function () {
+                    return new UILayoutTest_Layout_Scaled_Widget();
+                }
+            },
             {
                 title: "UILayoutComponent_Berth_Test",
                 func: function () {