update for lay out

cocos/ui/UIHelper.cpp

@@ -167,19 +167,7 @@ void Helper::doLayout(cocos2d::Node *rootNode)
         if (nullptr != com && nullptr != parent) {
             LayoutComponent* layoutComponent = (LayoutComponent*)com;
 
-            if (layoutComponent->isUsingPercentPosition())
-            {
-                layoutComponent->setPercentPosition(layoutComponent->getPercentPosition());
-            }
-            else if (layoutComponent->getReferencePoint() != LayoutComponent::ReferencePoint::BOTTOM_LEFT)
-            {
-                layoutComponent->setRelativePosition(layoutComponent->getRelativePosition());
-            }
-
-            if (layoutComponent->isUsingPercentContentSize())
-            {
-                layoutComponent->setPercentContentSize(layoutComponent->getPercentContentSize());
-            }
+            layoutComponent->refreshLayout();
         }
     }
 }

cocos/ui/UIHelper.h

@@ -79,6 +79,12 @@ public:
                                    std::string::size_type start,
                                    std::string::size_type length);
     
+    /**
+     * Refresh object and it's children lay out state
+     *
+     *@param rootNode   object which will be changed
+     *
+     */
     static void doLayout(Node *rootNode);
 
     static void changeLayoutSystemActiveState(bool bActive);

cocos/ui/UILayoutComponent.cpp

@@ -25,16 +25,29 @@
 #include "UILayoutComponent.h"
 #include "2d/CCNode.h"
 #include "GUIDefine.h"
-
+#include "UIHelper.h"
 
 NS_CC_BEGIN
 
 namespace ui {
     LayoutComponent::LayoutComponent()
-    : _usingPercentContentSize(false)
-    , _referencePoint(ReferencePoint::BOTTOM_LEFT)
-    , _usingPercentPosition(false)
+        :_horizontalEage(HorizontalEage::None)
+        , _verticalEage(VerticalEage::None)
+        , _leftMargin(0)
+        , _rightMargin(0)
+        , _usingPositionPercentX(false)
+        , _positionPercentX(0)
+        , _buttomMargin(0)
+        , _topMargin(0)
+        , _usingPositionPercentY(false)
+        , _positionPercentY(0)
+        , _percentWidth(0)
+        , _usingPercentWidth(false)
+        , _percentHeight(0)
+        , _usingPercentHeight(false)
         , _actived(true)
+        ,_usingStretchWidth(false)
+        , _usingStretchHeight(false)
     {
         _name = __LAYOUT_COMPONENT_NAME;
     }
@@ -61,247 +74,524 @@ namespace ui {
         return ret;
     }
 
-    //Size
-    Vec2 LayoutComponent::getOwnerContentSize()const
+    Node* LayoutComponent::getOwnerParent()
     {
-        return this->getOwner()->getContentSize();
+        Node* parent = _owner->getParent();
+        return parent;
     }
-    void LayoutComponent::setOwnerContentSize(const Vec2& size)
+    void LayoutComponent::refreshHorizontalMargin()
     {
-        this->getOwner()->setContentSize(Size(size.x,size.y));
+        Node* parent = this->getOwnerParent();
+        if (parent == nullptr)
+            return;
 
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
-        {
-            Size parentSize = parentNode->getContentSize();
+        Point ownerPoint = _owner->getPosition();
+        Point ownerAnchor = _owner->getAnchorPoint();
+        Size ownerSize = _owner->getContentSize();
+        Size parentSize = parent->getContentSize();
 
-            if (parentSize.width != 0 && parentSize.height != 0)
+        _leftMargin = ownerPoint.x - ownerAnchor.x * ownerSize.width;
+        _rightMargin = parentSize.width - (ownerPoint.x + (1 - ownerAnchor.x) * ownerSize.width);
+    }
+    void LayoutComponent::refreshVerticalMargin()
     {
-                _percentContentSize = Point(size.x/parentSize.width,size.y/parentSize.height);
-            }
-            else
-            {
-                _percentContentSize = Point(0,0);
-            }
-        }
+        Node* parent = this->getOwnerParent();
+        if (parent == nullptr)
+            return;
+
+        Point ownerPoint = _owner->getPosition();
+        Point ownerAnchor = _owner->getAnchorPoint();
+        Size ownerSize = _owner->getContentSize();
+        Size parentSize = parent->getContentSize();
+
+        _buttomMargin = ownerPoint.y - ownerAnchor.y * ownerSize.height;
+        _topMargin = parentSize.height - (ownerPoint.y + (1 - ownerAnchor.y) * ownerSize.height);
     }
 
-    const Vec2& LayoutComponent::getPercentContentSize()const
+#pragma region OldVersion
+    void LayoutComponent::setUsingPercentContentSize(bool isUsed)
     {
-        return _percentContentSize;
+        _usingPercentWidth = _usingPercentHeight = isUsed;
+    }
+    bool LayoutComponent::getUsingPercentContentSize()
+    {
+        return _usingPercentWidth && _usingPercentHeight;
     }
 
     void LayoutComponent::setPercentContentSize(const Vec2 &percent)
     {
-        _percentContentSize = percent;
+        this->setPercentWidth(percent.x);
+        this->setPercentHeight(percent.y);
+    }
+    Vec2 LayoutComponent::getPercentContentSize()
+    {
+        Vec2 vec2=Vec2(_percentWidth,_percentHeight);
+        return vec2;
+    }
+#pragma endregion
 
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
+#pragma region Position & Margin
+    Point LayoutComponent::getAnchorPosition()
     {
-            Size parentSize = parentNode->getContentSize();
-            if (_usingPercentContentSize)
+        return _owner->getAnchorPoint();
+    }
+    void LayoutComponent::setAnchorPosition(Point point)
     {
-                this->getOwner()->setContentSize(Size(percent.x*parentSize.width,percent.y*parentSize.height));
-            }
-        }
+        Rect oldRect = _owner->getBoundingBox();
+        _owner->setAnchorPoint(point);
+        Rect newRect = _owner->getBoundingBox();
+        float offSetX = oldRect.origin.x - newRect.origin.x;
+        float offSetY = oldRect.origin.y - newRect.origin.y;
+
+        Point ownerPosition = _owner->getPosition();
+        ownerPosition.x += offSetX;
+        ownerPosition.y += offSetY;
+
+        this->setPosition(ownerPosition);
     }
 
-    bool LayoutComponent::isUsingPercentContentSize()
+    Point LayoutComponent::getPosition()
     {
-        return _usingPercentContentSize;
+        return _owner->getPosition();
     }
+    void LayoutComponent::setPosition(Point position)
+    {
+        _owner->setPosition(position);
 
-    void LayoutComponent::setUsingPercentContentSize(bool flag)
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
         {
-        _usingPercentContentSize = flag;
+            Point ownerPoint = _owner->getPosition();
+            Size parentSize = parent->getContentSize();
 
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
-        {
-            Size parentSize = parentNode->getContentSize();
-            if (_usingPercentContentSize)
-            {
-                Size baseSize = this->getOwner()->getContentSize();
             if (parentSize.width != 0)
-                {
-                    _percentContentSize.x = baseSize.width/parentSize.width;
-                }
+                _positionPercentX = ownerPoint.x / parentSize.width;
             else
-                {
-                    _percentContentSize.x = 0;
-                    baseSize.width = 0;
-                }
+                _positionPercentX = 0;
 
             if (parentSize.height != 0)
-                {
-                    _percentContentSize.y = baseSize.height/parentSize.height;
-                }
+                _positionPercentY = ownerPoint.y / parentSize.height;
             else
-                {
-                    _percentContentSize.y = 0;
-                    baseSize.height = 0;
-                }
+                _positionPercentY = 0;
 
-                this->getOwner()->setContentSize(baseSize);
-            }
+            this->refreshHorizontalMargin();
+            this->refreshVerticalMargin();
         }
     }
 
-    //Position
-    bool LayoutComponent::isUsingPercentPosition()
+    bool LayoutComponent::isUsingPositionPercentX()
     {
-        return _usingPercentPosition;
+        return _usingPositionPercentX;
     }
-    void LayoutComponent::setUsingPercentPosition(bool flag)
+    void LayoutComponent::setPositionPercentXEnabled(bool isUsed)
     {
-        _usingPercentPosition = flag;
+        _usingPositionPercentX = isUsed;
+        if (_usingPositionPercentX)
+        {
+            _horizontalEage = HorizontalEage::None;
+        }
+    }
 
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
+    float LayoutComponent::getPositionPercentX()
     {
-            Size parentSize = parentNode->getContentSize();
+        return _positionPercentX;
+    }
+    void LayoutComponent::setPositionPercentX(float percentMargin)
+    {
+        _positionPercentX = percentMargin;
 
-            if (_usingPercentPosition)
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
         {
+            _owner->setPositionX(parent->getContentSize().width * _positionPercentX);
+            this->refreshHorizontalMargin();
+        }
+    }
+
+    bool LayoutComponent::isUsingPositionPercentY()
+    {
+        return _usingPositionPercentY;
+    }
+    void LayoutComponent::setPositionPercentYEnabled(bool isUsed)
+    {
+        _usingPositionPercentY = isUsed;
+        if (_usingPositionPercentY)
+        {
+            _verticalEage = VerticalEage::None;
+        }
+    }
+
+    float LayoutComponent::getPositionPercentY()
+    {
+        return _positionPercentY;
+    }
+    void LayoutComponent::setPositionPercentY(float percentMargin)
+    {
+        _positionPercentY = percentMargin;
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            _owner->setPositionY(parent->getContentSize().height * _positionPercentY);
+            this->refreshVerticalMargin();
+        }
+    }
+
+    LayoutComponent::HorizontalEage LayoutComponent::getHorizontalEage()
+    {
+        return _horizontalEage;
+    }
+    void LayoutComponent::setHorizontalEage(HorizontalEage hEage)
+    {
+        _horizontalEage = hEage;
+        if (_horizontalEage != HorizontalEage::None)
+        {
+            _usingPositionPercentX = false;
+        }
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size parentSize = parent->getContentSize();
             if (parentSize.width != 0)
-                {
-                    _percentPosition.x = _relativePosition.x/parentSize.width;
-                }
+                _positionPercentX = _owner->getPosition().x / parentSize.width;
             else
-                {
-                    _percentPosition.x = 0;
-                    _relativePosition.x = 0;
+                _positionPercentX = 0;
+
+            this->refreshHorizontalMargin();
         }
+    }
+
+    LayoutComponent::VerticalEage LayoutComponent::getVerticalEage()
+    {
+        return _verticalEage;
+    }
+    void LayoutComponent::setVerticalEage(VerticalEage vEage)
+    {
+        _verticalEage = vEage;
+        if (_verticalEage != VerticalEage::None)
+        {
+            _usingPositionPercentY = false;
+        }
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size parentSize = parent->getContentSize();
+            if (parentSize.height != 0)
+                _positionPercentY = _owner->getPosition().y / parentSize.height;
+            else
+                _positionPercentY = 0;
+
+            this->refreshVerticalMargin();
+        }
+    }
+
+    float LayoutComponent::getLeftMargin()
+    {
+        return _leftMargin;
+    }
+    void LayoutComponent::setLeftMargin(float margin)
+    {
+        _leftMargin = margin;
+    }
+
+    float LayoutComponent::getRightMargin()
+    {
+        return _rightMargin;
+    }
+    void LayoutComponent::setRightMargin(float margin)
+    {
+        _rightMargin = margin;
+    }
+
+    float LayoutComponent::getTopMargin()
+    {
+        return _topMargin;
+    }
+    void LayoutComponent::setTopMargin(float margin)
+    {
+        _topMargin = margin;
+    }
+
+    float LayoutComponent::getButtomMargin()
+    {
+        return _buttomMargin;
+    }
+    void LayoutComponent::setButtomMargin(float margin)
+    {
+        _buttomMargin = margin;
+    }
+
+#pragma endregion
+
+#pragma region Size & Percent
+    Size LayoutComponent::getSize()
+    {
+        return this->getOwner()->getContentSize();
+    }
+    void LayoutComponent::setSize(Size _size)
+    {
+        _owner->setContentSize(_size);
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size ownerSize = _owner->getContentSize();
+            Size parentSize = parent->getContentSize();
+
+            if (parentSize.width != 0)
+                _percentWidth = ownerSize.width / parentSize.width;
+            else
+                _percentWidth = 0;
 
             if (parentSize.height != 0)
+                _percentHeight = ownerSize.height / parentSize.height;
+            else
+                _percentHeight = 0;
+
+            this->refreshHorizontalMargin();
+            this->refreshVerticalMargin();
+        }
+    }
+
+    bool LayoutComponent::isUsingPercentWidth()
     {
-                    _percentPosition.y = _relativePosition.y/parentSize.height;
+        return _usingPercentWidth;
+    }
+    void LayoutComponent::setPercentWidthEnabled(bool isUsed)
+    {
+        _usingPercentWidth = isUsed;
+        if (_usingPercentWidth)
+        {
+            _usingStretchWidth = false;
+        }
+    }
+
+    float LayoutComponent::getSizeWidth()
+    {
+        return _owner->getContentSize().width;
+    }
+    void LayoutComponent::setSizeWidth(float width)
+    {
+        Size ownerSize = _owner->getContentSize();
+        ownerSize.width = width;
+        _owner->setContentSize(ownerSize);
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size parentSize = parent->getContentSize();
+            if (parentSize.width != 0)
+                _percentWidth = ownerSize.width / parentSize.width;
+            else
+                _percentWidth = 0;
+
+            this->refreshHorizontalMargin();
+        }
+    }
+
+    float LayoutComponent::getPercentWidth()
+    {
+        return _percentWidth;
+    }
+    void LayoutComponent::setPercentWidth(float percentWidth)
+    {
+        _percentWidth = percentWidth;
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size ownerSize = _owner->getContentSize();
+            ownerSize.width = parent->getContentSize().width * _percentWidth;
+            _owner->setContentSize(ownerSize);
+
+            this->refreshHorizontalMargin();
+        }
+    }
+
+    bool LayoutComponent::isUsingPercentHeight()
+    {
+        return _usingPercentHeight;
+    }
+    void LayoutComponent::setPercentHeightEnabled(bool isUsed)
+    {
+        _usingPercentHeight = isUsed;
+        if (_usingPercentHeight)
+        {
+            _usingStretchHeight = false;
+        }
+    }
+
+    float LayoutComponent::getSizeHeight()
+    {
+        return _owner->getContentSize().height;
+    }
+    void LayoutComponent::setSizeHeight(float height)
+    {
+        Size ownerSize = _owner->getContentSize();
+        ownerSize.height = height;
+        _owner->setContentSize(ownerSize);
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size parentSize = parent->getContentSize();
+            if (parentSize.height != 0)
+                _percentHeight = ownerSize.height / parentSize.height;
+            else
+                _percentHeight = 0;
+
+            this->refreshVerticalMargin();
+        }
+    }
+
+    float LayoutComponent::getPercentHeight()
+    {
+        return _percentHeight;
+    }
+    void LayoutComponent::setPercentHeight(float percentHeight)
+    {
+        _percentHeight = percentHeight;
+
+        Node* parent = this->getOwnerParent();
+        if (parent != nullptr)
+        {
+            Size ownerSize = _owner->getContentSize();
+            ownerSize.height = parent->getContentSize().height * _percentHeight;
+            _owner->setContentSize(ownerSize);
+
+            this->refreshVerticalMargin();
+        }
+    }
+
+    bool LayoutComponent::isUsingStretchWidth()
+    {
+        return _usingStretchWidth;
+    }
+    void LayoutComponent::setStretchWidthEnabled(bool isUsed)
+    {
+        _usingStretchWidth = isUsed;
+        if (_usingStretchWidth)
+        {
+            _usingPercentWidth = false;
+        }
+    }
+
+    bool LayoutComponent::isUsingStretchHeight()
+    {
+        return _usingStretchHeight;
+    }
+    void LayoutComponent::setStretchHeightEnabled(bool isUsed)
+    {
+        _usingStretchHeight = isUsed;
+        if (_usingStretchHeight)
+        {
+            _usingPercentHeight = false;
+        }
+    }
+
+#pragma endregion
+
+    void LayoutComponent::refreshLayout()
+    {
+        Node* parent = this->getOwnerParent();
+        if (parent == nullptr)
+            return;
+
+        Size parentSize = parent->getContentSize();
+        Size ownerSize = _owner->getContentSize();
+        Point ownerAnchor = _owner->getAnchorPoint();
+        Point ownerPosition = _owner->getPosition();
+
+        switch (this->_horizontalEage)
+        {
+        case HorizontalEage::None:
+            if (_usingStretchWidth)
+            {
+                ownerSize.width = parentSize.width * _percentWidth;
+                ownerPosition.x = _leftMargin + ownerAnchor.x * ownerSize.width;
             }
             else
             {
-                    _percentPosition.y = 0;
-                    _relativePosition.y = 0;
+                if (_usingPositionPercentX)
+                    ownerPosition.x = parentSize.width * _positionPercentX;
+                if (_usingPercentWidth)
+                    ownerSize.width = parentSize.width * _percentWidth;
             }
+            break;
+        case HorizontalEage::Left:
+            if (_usingPercentWidth || _usingStretchWidth)
+                ownerSize.width = parentSize.width * _percentWidth;
+            ownerPosition.x = _leftMargin + ownerAnchor.x * ownerSize.width;
+            break;
+        case HorizontalEage::Right:
+            if (_usingPercentWidth || _usingStretchWidth)
+                ownerSize.width = parentSize.width * _percentWidth;
+            ownerPosition.x = parentSize.width - (_rightMargin + (1 - ownerAnchor.x) * ownerSize.width);
+            break;
+        case HorizontalEage::Center:
+            if (_usingPercentWidth || _usingStretchWidth)
+            {
+                ownerSize.width = parentSize.width - _leftMargin - _rightMargin;
+                ownerPosition.x = _leftMargin + ownerAnchor.x * ownerSize.width;
+            }
+            else
+                ownerPosition.x = parentSize.width * _positionPercentX;
+            break;
+        default:
+            break;
         }
 
-            Point inversePoint = this->converPointWithReferencePointAndSize(_relativePosition,parentSize);
-            this->getOwner()->setPosition(inversePoint);
-        }
-    }
-
-    const Vec2& LayoutComponent::getPercentPosition()
+        switch (this->_verticalEage)
         {
-        return _percentPosition;
-    }
-    void LayoutComponent::setPercentPosition(const Vec2& percent)
+        case VerticalEage::None:
+            if (_usingStretchHeight)
             {
-        _percentPosition = percent;
-
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
-        {
-            Size parentSize = parentNode->getContentSize();
-            _relativePosition = Point(_percentPosition.x*parentSize.width,_percentPosition.y*parentSize.height);
-            Point inversePoint = this->converPointWithReferencePointAndSize(_relativePosition,parentSize);
-            this->getOwner()->setPosition(inversePoint);
-        }
-    }
-
-    const Vec2& LayoutComponent::getOwnerPosition()const
-    {
-        return this->getOwner()->getPosition();
-    }
-    void LayoutComponent::setOwnerPosition(const Vec2& point)
-    {
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
-        {
-            Size parentSize = parentNode->getContentSize();
-
-            Point inversePoint = this->converPointWithReferencePointAndSize(point,parentSize);
-            this->getOwner()->setPosition(point);
-            _relativePosition = inversePoint;
-            if (parentSize.width != 0 && parentSize.height != 0)
-            {
-                _percentPosition = Point(_relativePosition.x/parentSize.width,_relativePosition.y/parentSize.height);
+                ownerSize.height = parentSize.height * _percentHeight;
+                ownerPosition.y = _buttomMargin + ownerAnchor.y * ownerSize.height;
             }
             else
             {
-                _percentPosition = Point(0,0);
+                if (_usingPositionPercentY)
+                    ownerPosition.y = parentSize.height * _positionPercentY;
+                if (_usingPercentHeight)
+                    ownerSize.height = parentSize.height * _percentHeight;
             }
+            break;
+        case VerticalEage::Buttom:
+            if (_usingPercentHeight || _usingStretchHeight)
+                ownerSize.height = parentSize.height * _percentHeight;
+            ownerPosition.y = _buttomMargin + ownerAnchor.y * ownerSize.height;
+            break;
+        case VerticalEage::Top:
+            if (_usingPercentHeight || _usingStretchHeight)
+                ownerSize.height = parentSize.height * _percentHeight;
+            ownerPosition.y = parentSize.height - (_topMargin + (1 - ownerAnchor.y) * ownerSize.height);
+            break;
+        case VerticalEage::Center:
+            if (_usingPercentHeight || _usingStretchHeight)
+            {
+                ownerSize.height = parentSize.height - _topMargin - _buttomMargin;
+                ownerPosition.y = _buttomMargin + ownerAnchor.y * ownerSize.height;
             }
             else
-        {
-            this->getOwner()->setPosition(point);
-            if (_referencePoint == ReferencePoint::BOTTOM_LEFT)
-            {
-                _relativePosition = point;
-            }
+                ownerPosition.y = parentSize.height* _positionPercentY;
+            break;
+        default:
+            break;
         }
 
-    }
+        _owner->setPosition(ownerPosition);
+        _owner->setContentSize(ownerSize);
 
-    const Vec2& LayoutComponent::getRelativePosition()
-    {
-        return _relativePosition;
-    }
-    void LayoutComponent::setRelativePosition(const Vec2& position)
-    {
-        _relativePosition = position;
-
-        Node* parentNode = this->getOwner()->getParent();
-        if (parentNode != NULL && _actived)
-        {
-            Size parentSize = parentNode->getContentSize();
-
-            Point inversePoint = this->converPointWithReferencePointAndSize(_relativePosition,parentSize);
-            this->getOwner()->setPosition(inversePoint);
-            if (parentSize.width != 0 && parentSize.height != 0)
-            {
-                _percentPosition = Point(_relativePosition.x/parentSize.width,_relativePosition.y/parentSize.height);
-            }
-            else
-            {
-                _percentPosition = Point(0,0);
-            }
-        }
-    }
-
-    LayoutComponent::ReferencePoint LayoutComponent::getReferencePoint()
-    {
-        return _referencePoint;
-    }
-    void LayoutComponent::setReferencePoint(ReferencePoint point)
-    {
-        _referencePoint = point;
-        this->setRelativePosition(_relativePosition);
+        ui::Helper::doLayout(_owner);
     }
 
     void LayoutComponent::setActiveEnable(bool enable)
     {
         _actived = enable;
     }
-
-    Vec2 LayoutComponent::converPointWithReferencePointAndSize(const Vec2& point,const Size& size)
-    {
-        Point inversePoint = point;
-        switch (_referencePoint)
-        {
-        case ReferencePoint::TOP_LEFT:
-            inversePoint.y = size.height - inversePoint.y;
-            break;
-        case ReferencePoint::BOTTOM_RIGHT:
-            inversePoint.x = size.width - inversePoint.x;
-            break;
-        case ReferencePoint::TOP_RIGHT:
-            inversePoint.x = size.width - inversePoint.x;
-            inversePoint.y = size.height - inversePoint.y;
-            break;
-        default:
-            break;
-        }
-        return inversePoint;
-    }
 }
 
 NS_CC_END

cocos/ui/UILayoutComponent.h

@@ -37,58 +37,128 @@ NS_CC_BEGIN
         ~LayoutComponent();
         virtual bool init()override;
         CREATE_FUNC(LayoutComponent);
-            /**
-            * When a node has a ReferencePositoin with value equals LEFT_BOTTOM,
-            * it will treat the left bottom corner of its parent as the origin(0,0) when positioning itself
-            * which is the same as cocos2d-x does. But you can change it by assigning a
-            * different ReferencePosition.
-            * For example: If you use ReferencePosition with value equals RIGHT_TOP,
-            * then it will treat the right top corner of its parent as the origin(0,0) when positioning itself.
-            */
-            enum class ReferencePoint
+
+        enum class HorizontalEage
         {
-                BOTTOM_LEFT,
-                TOP_LEFT,
-                BOTTOM_RIGHT,
-                TOP_RIGHT
+            None,
+            Left,
+            Right,
+            Center
         };
+        enum class VerticalEage
+        {
+            None,
+            Buttom,
+            Top,
+            Center
+        };
+#pragma region OldVersion
+        virtual void setUsingPercentContentSize(bool isUsed);
+        virtual bool getUsingPercentContentSize();
 
-            bool isUsingPercentPosition();
-            void setUsingPercentPosition(bool flag);
+        virtual void setPercentContentSize(const Vec2 &percent);
+        virtual Vec2 getPercentContentSize();
+#pragma endregion
 
-            const Vec2& getPercentPosition();
-            void setPercentPosition(const Vec2& percent);
+#pragma region Position & Margin
+        virtual Point getAnchorPosition();
+        virtual void setAnchorPosition(Point point);
 
-            const Vec2& getRelativePosition();
-            void setRelativePosition(const Vec2& position);
+        virtual Point getPosition();
+        virtual void setPosition(Point position);
 
-            void setReferencePoint(ReferencePoint point);
-            ReferencePoint getReferencePoint();
+        virtual bool isUsingPositionPercentX();
+        virtual void setPositionPercentXEnabled(bool isUsed);
 
-            const Vec2& getOwnerPosition()const;
-            void setOwnerPosition(const Vec2& point); 
+        virtual float getPositionPercentX();
+        virtual void setPositionPercentX(float percentMargin);
 
-            Vec2 getOwnerContentSize()const;
-            void setOwnerContentSize(const Vec2& size);
+        virtual bool isUsingPositionPercentY();
+        virtual void setPositionPercentYEnabled(bool isUsed);
 
-            const Vec2& getPercentContentSize()const;
-            void setPercentContentSize(const Vec2& percent);
+        virtual float getPositionPercentY();
+        virtual void setPositionPercentY(float percentMargin);
 
-            bool isUsingPercentContentSize();
-            void setUsingPercentContentSize(bool flag);
+        virtual HorizontalEage getHorizontalEage();
+        virtual void setHorizontalEage(HorizontalEage hEage);
 
-            void setActiveEnable(bool enable);
-        private:
-            Vec2 converPointWithReferencePointAndSize(const Vec2& point,const Size& size);
-        private:
+        virtual VerticalEage getVerticalEage();
+        virtual void setVerticalEage(VerticalEage vEage);
 
-            Vec2 _percentContentSize;
-            bool _usingPercentContentSize;
+        virtual float getLeftMargin();
+        virtual void setLeftMargin(float margin);
+
+        virtual float getRightMargin();
+        virtual void setRightMargin(float margin);
+
+        virtual float getTopMargin();
+        virtual void setTopMargin(float margin);
+
+        virtual float getButtomMargin();
+        virtual void setButtomMargin(float margin);
+
+#pragma endregion
+
+#pragma region Size & Percent
+        virtual Size getSize();
+        virtual void setSize(Size _size);
+
+        virtual bool isUsingPercentWidth();
+        virtual void setPercentWidthEnabled(bool isUsed);
+
+        virtual float getSizeWidth();
+        virtual void setSizeWidth(float width);
+
+        virtual float getPercentWidth();
+        virtual void setPercentWidth(float percentWidth);
+
+        virtual bool isUsingPercentHeight();
+        virtual void setPercentHeightEnabled(bool isUsed);
+
+        virtual float getSizeHeight();
+        virtual void setSizeHeight(float height);
+
+        virtual float getPercentHeight();
+        virtual void setPercentHeight(float percentHeight);
+
+        virtual bool isUsingStretchWidth();
+        virtual void setStretchWidthEnabled(bool isUsed);
+
+        virtual bool isUsingStretchHeight();
+        virtual void setStretchHeightEnabled(bool isUsed);
+
+#pragma endregion
+
+        virtual void setActiveEnable(bool enable);
+        virtual void refreshLayout();
+
+    protected:
+        Node* getOwnerParent();
+        virtual void refreshHorizontalMargin();
+        virtual void refreshVerticalMargin();
+    protected:
+        HorizontalEage  _horizontalEage;
+        VerticalEage    _verticalEage;
+
+        float           _leftMargin;
+        float           _rightMargin;
+        float           _buttomMargin;
+        float           _topMargin;
+
+        bool            _usingPositionPercentX;
+        float           _positionPercentX;
+        bool            _usingPositionPercentY;
+        float           _positionPercentY;
+
+        bool            _usingStretchWidth;
+        bool            _usingStretchHeight;
+
+        float           _percentWidth;
+        bool            _usingPercentWidth;
+        
+        float           _percentHeight;
+        bool            _usingPercentHeight;
 
-            ReferencePoint _referencePoint;
-            Vec2 _relativePosition;
-            Vec2 _percentPosition;
-            bool _usingPercentPosition;
         bool _actived;
     };
 }

cocos/ui/UIWidget.cpp

@@ -222,7 +222,6 @@ bool Widget::init()
 
 void Widget::onEnter()
 {
-    updateSizeAndPosition();
     ProtectedNode::onEnter();
 }
 
@@ -281,30 +280,7 @@ void Widget::setContentSize(const cocos2d::Size &contentSize)
     {
         _contentSize = getVirtualRendererSize();
     }
-    if (_running)
-    {
-        Widget* widgetParent = getWidgetParent();
-        Size pSize;
-        if (widgetParent)
-        {
-            pSize = widgetParent->getContentSize();
-        }
-        else
-        {
-            pSize = _parent->getContentSize();
-        }
-        float spx = 0.0f;
-        float spy = 0.0f;
-        if (pSize.width > 0.0f)
-        {
-            spx = _customSize.width / pSize.width;
-        }
-        if (pSize.height > 0.0f)
-        {
-            spy = _customSize.height / pSize.height;
-        }
-        _sizePercent = Vec2(spx, spy);
-    }
+    
     onSizeChanged();
 }
 
@@ -315,30 +291,28 @@ void Widget::setSize(const Size &size)
 
 void Widget::setSizePercent(const Vec2 &percent)
 {
-    _sizePercent = percent;
-    Size cSize = _customSize;
-    if (_running)
+    auto component = this->getOrCreateLayoutComponent();
+    component->setUsingPercentContentSize(true);
+    component->setPercentContentSize(percent);
+    component->refreshLayout();
+}
+
+
+void Widget::setSizeType(SizeType type)
 {
-        Widget* widgetParent = getWidgetParent();
-        if (widgetParent)
+    _sizeType = type;
+    
+    auto component = this->getOrCreateLayoutComponent();
+
+    if (_sizeType == Widget::SizeType::PERCENT)
     {
-            cSize = Size(widgetParent->getContentSize().width * percent.x , widgetParent->getContentSize().height * percent.y);
+        component->setUsingPercentContentSize(true);
     }
     else
     {
-            cSize = Size(_parent->getContentSize().width * percent.x , _parent->getContentSize().height * percent.y);
+        component->setUsingPercentContentSize(false);
     }
 }
-    if (_ignoreSize)
-    {
-        this->setContentSize(getVirtualRendererSize());
-    }
-    else
-    {
-        this->setContentSize(cSize);
-    }
-    _customSize = cSize;
-}
 
 void Widget::updateSizeAndPosition()
 {
@@ -419,11 +393,6 @@ void Widget::updateSizeAndPosition(const cocos2d::Size &parentSize)
     setPosition(absPos);
 }
 
-void Widget::setSizeType(SizeType type)
-{
-    _sizeType = type;
-}
-
 Widget::SizeType Widget::getSizeType() const
 {
     return _sizeType;
@@ -469,7 +438,9 @@ const Size& Widget::getCustomSize() const
 
 const Vec2& Widget::getSizePercent()
 {
-    return _sizePercent;
+    auto component = this->getOrCreateLayoutComponent();
+
+    return component->getPercentContentSize();
 }
 
 Vec2 Widget::getWorldPosition()const
@@ -484,14 +455,6 @@ Node* Widget::getVirtualRenderer()
 
 void Widget::onSizeChanged()
 {
-    for (auto& child : getChildren())
-    {
-        Widget* widgetChild = dynamic_cast<Widget*>(child);
-        if (widgetChild)
-        {
-            widgetChild->updateSizeAndPosition();
-        }
-    }
 }
 
 Size Widget::getVirtualRendererSize() const
@@ -948,47 +911,40 @@ void Widget::interceptTouchEvent(cocos2d::ui::Widget::TouchEventType event, coco
 
 void Widget::setPosition(const Vec2 &pos)
 {
-    if (_running)
-    {
-        Widget* widgetParent = getWidgetParent();
-        if (widgetParent)
-        {
-            Size pSize = widgetParent->getContentSize();
-            if (pSize.width <= 0.0f || pSize.height <= 0.0f)
-            {
-                _positionPercent = Vec2::ZERO;
-            }
-            else
-            {
-                _positionPercent = Vec2(pos.x / pSize.width, pos.y / pSize.height);
-            }
-        }
-    }
     ProtectedNode::setPosition(pos);
 }
 
 void Widget::setPositionPercent(const Vec2 &percent)
 {
-    _positionPercent = percent;
-    if (_running)
-    {
-        Widget* widgetParent = getWidgetParent();
-        if (widgetParent)
-        {
-            Size parentSize = widgetParent->getContentSize();
-            Vec2 absPos = Vec2(parentSize.width * _positionPercent.x, parentSize.height * _positionPercent.y);
-            setPosition(absPos);
-        }
-    }
+    auto component = this->getOrCreateLayoutComponent();
+    component->setPositionPercentX(percent.x);
+    component->setPositionPercentY(percent.y);
+    component->refreshLayout();
 }
 
-const Vec2& Widget::getPositionPercent()const{
-    return _positionPercent;
+Vec2 Widget::getPositionPercent(){
+
+    auto component = this->getOrCreateLayoutComponent();
+    float percentX = component->getPositionPercentX();
+    float percentY = component->getPositionPercentY();
+
+    return Vec2(percentX,percentY);
 }
 
 void Widget::setPositionType(PositionType type)
 {
+    auto component = this->getOrCreateLayoutComponent();
     _positionType = type;
+    if (type == Widget::PositionType::ABSOLUTE)
+    {
+        component->setPositionPercentXEnabled(false);
+        component->setPositionPercentYEnabled(false);
+    }
+    else
+    {
+        component->setPositionPercentXEnabled(true);
+        component->setPositionPercentYEnabled(true);
+    }
 }
 
 Widget::PositionType Widget::getPositionType() const

cocos/ui/UIWidget.h

@@ -272,7 +272,7 @@ public:
      *
      * @return The percent (x,y) of the widget in OpenGL coordinates
      */
-    const Vec2& getPositionPercent()const;
+    Vec2 getPositionPercent();
 
     /**
      * Changes the position type of the widget