11.【cocos2d-x 源码分析】:UI系统的详细分析（中）

最新推荐文章于 2026-05-20 07:58:48 发布
原创 最新推荐文章于 2026-05-20 07:58:48 发布 · 536 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
c++

当前文章被收录于：

c++
50 篇文章 1 人学习
订阅专栏 查看详情
cocos2d-x

当前文章被收录于：

cocos2d-x
26 篇文章 0 人学习
订阅专栏 查看详情
cocos2d-x 源码分析

当前文章被收录于：

cocos2d-x 源码分析
17 篇文章 2 人学习

本系列针对 cocos2d-x 3.3源码。

订阅专栏 查看详情
本文深入剖析了cocos2d-x 3.3版本UI系统的核心原理，重点关注了UI组件的实现细节，为读者揭示了UI系统的工作机制。文章详述了部分关键源码，为后续分析具体UI控件的实现奠定了基础。
对应源码位置：cocos2d-x-3.3\cocos\ui\UI*
Layout的原理

这里选取少量的重点部分。

//找当前节点的下一个可以聚焦的节点
//主要看思想  已经删了很多了
Widget* Layout::getNextFocusedWidget(FocusDirection direction, Widget *current)
{
    Widget *nextWidget = nullptr;
    ssize_t previousWidgetPos = _children.getIndex(current);
    //选取下一个 孩子节点
    previousWidgetPos = previousWidgetPos + 1;  
    if (previousWidgetPos < _children.size())
    {
    	//找下一个Widget
        nextWidget = this->getChildWidgetByIndex(previousWidgetPos);
        //handle widget
        if (nextWidget)
        {
        	//可以聚焦再看
            if (nextWidget->isFocusEnabled())
            {
                //如果是个 Layout 就在里面找 直到找到一个控件
                Layout* layout = dynamic_cast<Layout*>(nextWidget);
                if (layout)
                {
                    layout->_isFocusPassing = true;
                    return layout->findNextFocusedWidget(direction, layout);
                }
                else
                {
                	//否则 就是你了 回调一下
                    this->dispatchFocusEvent(current, nextWidget);
                    return nextWidget;
                }
            }
            else
            {
                return this->getNextFocusedWidget(direction, nextWidget);
            }
        }
        else
        {
            return current;
        }
    }
}
//看看 Layout具体怎么绘制
//这就是Node 节点都有的 visit
void Layout::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)
{
    if (!_visible)
    {
        return;
    }
    //空函数
    adaptRenderers();
    //核心部分  处理布局 后面详细
    doLayout();
    //先假装  不满足 直走else
    if (_clippingEnabled)
    {
        switch (_clippingType)
        {
            case ClippingType::STENCIL:
                stencilClippingVisit(renderer, parentTransform, parentFlags);
                break;
            case ClippingType::SCISSOR:
                scissorClippingVisit(renderer, parentTransform, parentFlags);
                break;
            default:
                break;
        }
    }
    //就是以前普通的visit
    else
    {
        Widget::visit(renderer, parentTransform, parentFlags);
    }
}
//处理布局的核心
void Layout::doLayout()
{
    //如果布局没有变化
    if (!_doLayoutDirty)
    {
        return;
    }
    //排序
    sortAllChildren();
	//创建 Layoutmanager
    LayoutManager* executant = this->createLayoutManager();
    
    if (executant)
    {
    	//核心部分
        executant->doLayout(this);
    }
    
    _doLayoutDirty = false;
}
//就是根据布局的类型生成对应的manager
LayoutManager* Layout::createLayoutManager()
{
    LayoutManager* exe = nullptr;
    switch (_layoutType)
    {
        case Type::VERTICAL:
            exe = LinearVerticalLayoutManager::create();
            break;
        case Type::HORIZONTAL:
            exe = LinearHorizontalLayoutManager::create();
            break;
        case Type::RELATIVE:
            exe = RelativeLayoutManager::create();
            break;
        default:
            break;
    }
    return exe;

}

LayoutManager 的分析


class CC_GUI_DLL LayoutManager : public Ref
{
public:
    virtual ~LayoutManager(){};
    LayoutManager(){};
    //虚函数
    virtual void doLayout(LayoutProtocol *layout) = 0;
    
    friend class Layout;
};
//垂直的线性布局
class CC_GUI_DLL LinearVerticalLayoutManager : public LayoutManager
{
private:
    LinearVerticalLayoutManager(){};
    virtual ~LinearVerticalLayoutManager(){};
    static LinearVerticalLayoutManager* create();
    virtual void doLayout(LayoutProtocol *layout) override;
    
    friend class Layout;
};
//水平的线性布局
class CC_GUI_DLL LinearHorizontalLayoutManager : public LayoutManager
{
private:
    LinearHorizontalLayoutManager(){};
    virtual ~LinearHorizontalLayoutManager(){};
    static LinearHorizontalLayoutManager* create();
    virtual void doLayout(LayoutProtocol *layout) override;
    
    friend class Layout;
};
//具体实现 选一个  其思想就是 计算出最终的位置  相对布局更加复杂
void LinearHorizontalLayoutManager::doLayout(LayoutProtocol* layout)
{
	//获取布局本身的大小
    Size layoutSize = layout->getLayoutContentSize();
    //获取布局的孩子节点
    Vector<Node*> container = layout->getLayoutElements();
    float leftBoundary = 0.0f;
    for (auto& subWidget : container)
    {
    	//获取这个控件
        Widget* child = dynamic_cast<Widget*>(subWidget);
        if (child)
        {
            LinearLayoutParameter* layoutParameter = dynamic_cast<LinearLayoutParameter*>(child->getLayoutParameter());
            if (layoutParameter)
            {
                LinearLayoutParameter::LinearGravity childGravity = layoutParameter->getGravity();
                Vec2 ap = child->getAnchorPoint();
                Size cs = child->getContentSize();
                //计算最终位置
                //x的位置 找到锚点位置 确定锚点位置的坐标
                float finalPosX = leftBoundary + (ap.x * cs.width);
                float finalPosY = layoutSize.height - (1.0f - ap.y) * cs.height;
                //此时为 top的方式
                switch (childGravity)
                {
                    case LinearLayoutParameter::LinearGravity::NONE:
                    case LinearLayoutParameter::LinearGravity::TOP:
                        break;
                    case LinearLayoutParameter::LinearGravity::BOTTOM:
                    	//放在底部
                        finalPosY = ap.y * cs.height;
                        break;
                     //垂直 居中
                    case LinearLayoutParameter::LinearGravity::CENTER_VERTICAL:
                        finalPosY = layoutSize.height / 2.0f - cs.height * (0.5f - ap.y);
                        break;
                    default:
                        break;
                }
                //再加上外边距
                Margin mg = layoutParameter->getMargin();
                finalPosX += mg.left;
                finalPosY -= mg.top;
                child->setPosition(Vec2(finalPosX, finalPosY));
                leftBoundary = child->getRightBoundary() + mg.right;
            }
        }
    }
}
重点分析RelativeLayoutManager

很长，但很有意思。

Vector<Widget*> RelativeLayoutManager::getAllWidgets(cocos2d::ui::LayoutProtocol *layout)
{
	//获取所有孩子节点 
    Vector<Node*> container = layout->getLayoutElements();
    Vector<Widget*> widgetChildren;
    for (auto& subWidget : container)
    {
    	//看看  是不是 Widget 子类
        Widget* child = dynamic_cast<Widget*>(subWidget);
        if (child)
        {
        	//获取 layoutParameter 
            RelativeLayoutParameter* layoutParameter = dynamic_cast<RelativeLayoutParameter*>(child->getLayoutParameter());
            layoutParameter->_put = false;
            //未处理布局数据加1
            _unlayoutChildCount++;
            //加入到vector
            widgetChildren.pushBack(child);
        }
    }
    return widgetChildren;

}
//获取相对的Widget   
Widget* RelativeLayoutManager::getRelativeWidget(Widget* widget)
{
    Widget* relativeWidget = nullptr;
    RelativeLayoutParameter* layoutParameter = dynamic_cast<RelativeLayoutParameter*>(widget->getLayoutParameter());
    //获取其相对的控件的名字
    const std::string relativeName = layoutParameter->getRelativeToWidgetName();
    //看有没有
    if (!relativeName.empty())
    {
        for (auto& sWidget : _widgetChildren)
        {
            if (sWidget)
            {
            	//遍历子节点  看看有没有他所说的那个名字的节点
                RelativeLayoutParameter* rlayoutParameter = dynamic_cast<RelativeLayoutParameter*>(sWidget->getLayoutParameter());
                if (rlayoutParameter &&  rlayoutParameter->getRelativeName() == relativeName)
                {
                    relativeWidget = sWidget;
                    _relativeWidgetLP = rlayoutParameter;
                    break;
                }
            }
        }
    }
    return relativeWidget;
}
//核心方法
 void RelativeLayoutManager::doLayout(LayoutProtocol *layout)
{
    //获取所有的孩子控件
    _widgetChildren = this->getAllWidgets(layout);
    //如果未处理节点数目大于0
    while (_unlayoutChildCount > 0)
    {
        for (auto& subWidget : _widgetChildren)
        {
        	//当前要处理的 控件 _widget 为内部变量
            _widget = static_cast<Widget*>(subWidget);
            //获取参数
            RelativeLayoutParameter* layoutParameter = dynamic_cast<RelativeLayoutParameter*>(_widget->getLayoutParameter());
            
            if (layoutParameter)
            {
                if (layoutParameter->_put)
                {
                    continue;
                }
                
               //根据相对位置计算  返回值表示计算成功了没 成功了就继续
                bool ret = this->caculateFinalPositionWithRelativeWidget(layout);
                if (!ret) {
                    continue;
                }
                //计算 附加上边距的最终值。
                this->caculateFinalPositionWithRelativeAlign();
           
            	//成功了
                _widget->setPosition(Vec2(_finalPositionX, _finalPositionY));
                //这个计算好了
                layoutParameter->_put = true;
            }
        }
        _unlayoutChildCount--;

    }
    _widgetChildren.clear();
}   
bool RelativeLayoutManager::caculateFinalPositionWithRelativeWidget(LayoutProtocol *layout)
{
	//获取 锚点 和大小
    Vec2 ap = _widget->getAnchorPoint();
    Size cs = _widget->getContentSize();
    //最终位置
    _finalPositionX = 0.0f;
    _finalPositionY = 0.0f;
    //获取相对节点
    Widget* relativeWidget = this->getRelativeWidget(_widget);
    //获取参数
    RelativeLayoutParameter* layoutParameter = dynamic_cast<RelativeLayoutParameter*>(_widget->getLayoutParameter());
	//相对关系
    RelativeLayoutParameter::RelativeAlign align = layoutParameter->getAlign();
	//获取布局的大小
    Size layoutSize = layout->getLayoutContentSize();
    switch (align)
    {
        case RelativeLayoutParameter::RelativeAlign::NONE:
        //位于父级空间的 左上
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT:
            _finalPositionX = ap.x * cs.width;
            _finalPositionY = layoutSize.height - ((1.0f - ap.y) * cs.height);
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL:
        //位于父级空间的 顶部的水平居中
            _finalPositionX = layoutSize.width * 0.5f - cs.width * (0.5f - ap.x);
            _finalPositionY = layoutSize.height - ((1.0f - ap.y) * cs.height);
            break;
        //位于父级空间的 顶部的右侧
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT:
            _finalPositionX = layoutSize.width - ((1.0f - ap.x) * cs.width);
            _finalPositionY = layoutSize.height - ((1.0f - ap.y) * cs.height);
            break;
        //位于父级空间的 左边 垂直居中
        case RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL:
            _finalPositionX = ap.x * cs.width;
            _finalPositionY = layoutSize.height * 0.5f - cs.height * (0.5f - ap.y);
            break;
        //位于父级空间的 正中间
        case RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT:
            _finalPositionX = layoutSize.width * 0.5f - cs.width * (0.5f - ap.x);
            _finalPositionY = layoutSize.height * 0.5f - cs.height * (0.5f - ap.y);
            break;
        //位于父级空间的 右边 垂直居中
        case RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL:
            _finalPositionX = layoutSize.width - ((1.0f - ap.x) * cs.width);
            _finalPositionY = layoutSize.height * 0.5f - cs.height * (0.5f - ap.y);
            break;
        //位于父级空间的 左下角
        case RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BOTTOM:
            _finalPositionX = ap.x * cs.width;
            _finalPositionY = ap.y * cs.height;
            break;
         //位于父级空间的 底部的水平居中
        case RelativeLayoutParameter::RelativeAlign::PARENT_BOTTOM_CENTER_HORIZONTAL:
            _finalPositionX = layoutSize.width * 0.5f - cs.width * (0.5f - ap.x);
            _finalPositionY = ap.y * cs.height;
            break;
           //位于父级空间的 右下角
        case RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM:
            _finalPositionX = layoutSize.width - ((1.0f - ap.x) * cs.width);
            _finalPositionY = ap.y * cs.height;
            break;
         //位于其它控件的上面 左侧对齐   
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_LEFTALIGN:
            if (relativeWidget)
            {	
            	//相对的那个控件 还没有计算  不行
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                //相对于的控件 已经计算过了
                //获取相对者的 上边界与左边界
                float locationTop = relativeWidget->getTopBoundary();
                float locationLeft = relativeWidget->getLeftBoundary();
                //计算 自己的位置
                _finalPositionY = locationTop + ap.y * cs.height;
                _finalPositionX = locationLeft + ap.x * cs.width;
            }
            break;
        //位于其它控件的上面 居中 
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_CENTER:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                Size rbs = relativeWidget->getContentSize();
                float locationTop = relativeWidget->getTopBoundary();
                
                _finalPositionY = locationTop + ap.y * cs.height;
                _finalPositionX = relativeWidget->getLeftBoundary() + rbs.width * 0.5f + ap.x * cs.width - cs.width * 0.5f;
            }
            break;
            //上面右边对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_RIGHTALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationTop = relativeWidget->getTopBoundary();
                float locationRight = relativeWidget->getRightBoundary();
                _finalPositionY = locationTop + ap.y * cs.height;
                _finalPositionX = locationRight - (1.0f - ap.x) * cs.width;
            }
            break;
            //左侧 顶部对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_TOPALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationTop = relativeWidget->getTopBoundary();
                float locationLeft = relativeWidget->getLeftBoundary();
                _finalPositionY = locationTop - (1.0f - ap.y) * cs.height;
                _finalPositionX = locationLeft - (1.0f - ap.x) * cs.width;
            }
            break;
            //左侧居中
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_CENTER:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                Size rbs = relativeWidget->getContentSize();
                float locationLeft = relativeWidget->getLeftBoundary();
                _finalPositionX = locationLeft - (1.0f - ap.x) * cs.width;
                
                _finalPositionY = relativeWidget->getBottomBoundary() + rbs.height * 0.5f + ap.y * cs.height - cs.height * 0.5f;
            }
            break;
            //左侧底部对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_BOTTOMALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationBottom = relativeWidget->getBottomBoundary();
                float locationLeft = relativeWidget->getLeftBoundary();
                _finalPositionY = locationBottom + ap.y * cs.height;
                _finalPositionX = locationLeft - (1.0f - ap.x) * cs.width;
            }
            break;
            //右侧 顶部对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_TOPALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationTop = relativeWidget->getTopBoundary();
                float locationRight = relativeWidget->getRightBoundary();
                _finalPositionY = locationTop - (1.0f - ap.y) * cs.height;
                _finalPositionX = locationRight + ap.x * cs.width;
            }
            break;
            //右侧 居中
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_CENTER:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                Size rbs = relativeWidget->getContentSize();
                float locationRight = relativeWidget->getRightBoundary();
                _finalPositionX = locationRight + ap.x * cs.width;
                
                _finalPositionY = relativeWidget->getBottomBoundary() + rbs.height * 0.5f + ap.y * cs.height - cs.height * 0.5f;
            }
            break;
            //右侧 底部对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_BOTTOMALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationBottom = relativeWidget->getBottomBoundary();
                float locationRight = relativeWidget->getRightBoundary();
                _finalPositionY = locationBottom + ap.y * cs.height;
                _finalPositionX = locationRight + ap.x * cs.width;
            }
            break;
            //下方 左对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_LEFTALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationBottom = relativeWidget->getBottomBoundary();
                float locationLeft = relativeWidget->getLeftBoundary();
                _finalPositionY = locationBottom - (1.0f - ap.y) * cs.height;
                _finalPositionX = locationLeft + ap.x * cs.width;
            }
            break;
            //下方居中
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_CENTER:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                Size rbs = relativeWidget->getContentSize();
                float locationBottom = relativeWidget->getBottomBoundary();
                
                _finalPositionY = locationBottom - (1.0f - ap.y) * cs.height;
                _finalPositionX = relativeWidget->getLeftBoundary() + rbs.width * 0.5f + ap.x * cs.width - cs.width * 0.5f;
            }
            break;
            //下方 右侧对齐
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_RIGHTALIGN:
            if (relativeWidget)
            {
                if (_relativeWidgetLP && !_relativeWidgetLP->_put)
                {
                    return false;
                }
                float locationBottom = relativeWidget->getBottomBoundary();
                float locationRight = relativeWidget->getRightBoundary();
                _finalPositionY = locationBottom - (1.0f - ap.y) * cs.height;
                _finalPositionX = locationRight - (1.0f - ap.x) * cs.width;
            }
            break;
        default:
            break;
    }
    return true;
}
//看情况  处理边距  
void RelativeLayoutManager::caculateFinalPositionWithRelativeAlign()
{
    RelativeLayoutParameter* layoutParameter = dynamic_cast<RelativeLayoutParameter*>(_widget->getLayoutParameter());
    
    Margin mg = layoutParameter->getMargin();
   
    RelativeLayoutParameter::RelativeAlign align = layoutParameter->getAlign();
    
    //handle margin
    switch (align)
    {
        case RelativeLayoutParameter::RelativeAlign::NONE:
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT:
            _finalPositionX += mg.left;
            _finalPositionY -= mg.top;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL:
            _finalPositionY -= mg.top;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT:
            _finalPositionX -= mg.right;
            _finalPositionY -= mg.top;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL:
            _finalPositionX += mg.left;
            break;
        case RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT:
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL:
            _finalPositionX -= mg.right;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BOTTOM:
            _finalPositionX += mg.left;
            _finalPositionY += mg.bottom;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_BOTTOM_CENTER_HORIZONTAL:
            _finalPositionY += mg.bottom;
            break;
        case RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM:
            _finalPositionX -= mg.right;
            _finalPositionY += mg.bottom;
            break;
            
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_LEFTALIGN:
            _finalPositionY += mg.bottom;
            _finalPositionX += mg.left;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_RIGHTALIGN:
            _finalPositionY += mg.bottom;
            _finalPositionX -= mg.right;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_CENTER:
            _finalPositionY += mg.bottom;
            break;
            
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_TOPALIGN:
            _finalPositionX -= mg.right;
            _finalPositionY -= mg.top;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_BOTTOMALIGN:
            _finalPositionX -= mg.right;
            _finalPositionY += mg.bottom;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_CENTER:
            _finalPositionX -= mg.right;
            break;
            
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_TOPALIGN:
            _finalPositionX += mg.left;
            _finalPositionY -= mg.top;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_BOTTOMALIGN:
            _finalPositionX += mg.left;
            _finalPositionY += mg.bottom;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_CENTER:
            _finalPositionX += mg.left;
            break;
            
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_LEFTALIGN:
            _finalPositionY -= mg.top;
            _finalPositionX += mg.left;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_RIGHTALIGN:
            _finalPositionY -= mg.top;
            _finalPositionX -= mg.right;
            break;
        case RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_CENTER:
            _finalPositionY -= mg.top;
            break;
        default:
            break;
    }
}
最后

下一篇分析 具体 UI控件 的实现。

cocos2d-x 常用UI控件
11-30
总结cocos2d-x开发中常用ui控件的使用方法
12.【cocos2d-x 源码分析】:UI系统的详细分析（下）
会飞的徐公明
05-22 469
对应源码位置：cocos2d-x-3.3\cocos\ui\UI* HBox与 VBox 这两者的实现很简单 class CC_GUI_DLL VBox : public Layout{ public: /** * Default constructor */ VBox(); /** * Default ...
Cocos2d-xUI组件详解
田螺姑娘的博客
02-09 1938
Cocos2d-xUI组件详解 标签（Label）   Cocos2d-x提供Label对象给用户，可以使用位图字体，TrueType字体，系统字体创建标签。这个单一的类能处理你所有的标签需求。下面介绍使用各种字体，创建标签的方法。 BMFont   BMFont是一个使用位图字体创建的标签类型，位图字体中的字符由点阵组成。使用这种字体标签性能非常好，但是不适合缩放。由于点阵的原因，缩放会导致失真。标签中的每一个字符都是一个单独的Sprite，也就是说精灵的属性（旋转，缩放，着色等）控制都适用于这里的每个
手把手教你用Vivado 2017.4为ZYNQ7010开发板配置uCOSIII BSP（附完整工程）
最新发布
weixin_33743880的博客
05-20 390
本文详细介绍了如何使用Vivado 2017.4为ZYNQ7010开发板配置uCOSIII BSP，包括硬件设计、uCOS-III源码工程部署、系统启动与调试技巧以及外设驱动开发实战。通过完整的工程示例和关键配置解析，帮助开发者快速掌握ZYNQ7010上的实时系统构建方法。
Cocos2d-x3.0 从代码中获取cocostudio编辑的UI控件
weixin_33828101的博客
06-03 196
依据名字查找控件 须要包括的头文件及名字空间： #include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"using namespace cocos2d::ui;using namespace cocostudio; 注：project中须要附加包括的头文件文件夹：$(EngineRoot)cocos\editor-su...
CocosCreator 对UI的引用思考
u013158916的博客
09-25 547
UI和代码结合的弊端 1.大量通过界面引用UI节点 如下图所示，通过脚本组件大量直接引用UI节点，会在相应的描述文件中记录相应的key和value,在一定程度上会增加相关描述文件的大小，从而影响这个描述文件加载所花费的时间。进一步影响资源加载总时间。 { "__type__": "85d24iUBchG45eRtzPrngjE", "_name": "", "_objF...
Cocos2d-x源码阅读 UI树2
02-07 2149
Cocos2d-x的UI是按照树形结构组织的。 大家学过数据结构的话 就知道 什么是树了。 树只有一个 根节点，根节点没有父节点，其他节点都有父节点和子节点，而叶子节点没有子节点，叶子节点就是指没有子节点的节点。 在这里父和子 都是相对的。 我们知道树结构的遍历有3种方式，说是遍历 就是把每个节点找个遍的意思，前序遍历，中序遍历，后序遍历。 所谓的前，中，后指的是根节点，
cocos2dx 源码分析 之Widget 头文件 （3.11.1）
mixi＝小六
07-04 4202
一直想找时间梳理下，虽然我可能讲的不好，但多写多讲才会进步啊！嗯，厚脸皮的试试。
【Cocos2d-x】源码分析之 2d/ui/Widget
yhhwatl的专栏
05-21 4833
cocostudio源码浅析之widget
cocos2d-x开发日志10 ——贪食蛇源码
贱小牛的博客
08-18 1621
简单的游戏开发，比较适合和我一样的小白练手，除了游戏结束场景，全部包含在了HelloWorldScene中，先上源码，注释已经比较全面，但是具体细节会陆续更新。HelloWorldScene.h#ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__#include "cocos2d.h" #include "GameOverScen
Cocos2d-x 3.0final手机游戏开发视频教程2014 - 自学编程 -(陆续更新中)
thismoss的专栏
06-05 1827
内容： 很多人问我：沈老师，要不要更新引擎版本到3.0，更新这么快，以后会不会每个月都有一次，好怕呀！ 我说：不管你以前是哪个版本，3.0final是一个架构级别的升级，可以在新项目中果断升级，还包括以下：    c++11 的特性的使用（比如Lambda函数，auto等新特性的使用，这些特性用上会让人上瘾的）   更改了渲染的方式     （具体还得再了解，总之官方称性能提升了15个
免费自学Cocos2d-x3.0final2014原创视频教程（56集）(适用于Cocos2d-x3.1 Cocos2d-x3.2版本全)
luckyboy101的专栏
08-31 1408
Cocos2d-x3.0final(适用于Cocos2d-x3.1 Cocos2d-x3.2版本全) 视频播放地址：http://yun.itxdl.cn/course/62 视频下载地址：http://pan.baidu.com/s/1jGiLOG2   链接: http://pan.baidu.com/s/1qWz4LdE 密码: 7rzo 学习交流QQ群：
免费cocos2dx3.x视频教程
William Zhao's notes
09-03 4622
Cocos2d-x3.0final(适用于Cocos2d-x3.1 Cocos2d-x3.2版本全) 视频播放地址：http://yun.itxdl.cn/course/62 视频下载地址：http://pan.baidu.com/s/1jGiLOG2   链接: http://pan.baidu.com/s/1qWz4LdE 密码: 7rzo 学习交流QQ群：
CSDN 优秀专栏 专家 博文汇总
Silence的程序实验室
06-18 1466
CSDN 优秀专栏 专家 博文汇总 专栏： 一、移动开发系列 1、cocos2d-x入门 2、Android ApiDemo实例解析 3、老罗的Android之旅 4、IM软件业务知识 5、iOS UI 6、大话设计模式 7、Cocos2dx 小技巧 8、Android进阶之自定义组件 9、Android动效实验室 10、Android最新实用库
相关博客
许集贤
08-19 481
大牛博客 http://blog.csdn.net/guolin_blog?viewmode=contents http://blog.csdn.net/lmj623565791?viewmode=contents 源码包导入与查看 http://blog.csdn.net/xiaanming/article/details/9031141 信息安全与攻击 http
cocos 代码和界面关联
jonathan_joestar的博客
01-19 1883
cocos 代码和界面关联 要把控件拖到这
Cocos2d-x 之简单 UI 及事件
xingxinmanong的博客
07-16 2293
Cocos2d经过几个版本的迭代，UI系统比较多，也比较乱，对于我们初学者来说，不必做到大而全，只需要掌握一种比较常用的就行。这篇文章主要介绍cocos studio中使用的UI系统。
Cocos2d-x 3.0 开发（十五）使用UILayout布局，制作对话界面
linking530的专栏
08-29 676
1、概述     上一篇我们在编辑器中设计了一个静态的UIScrollView，而通常我们都需要在程序中动态增加信息。插入元素的位置怎么确定？在3.0中UILayout已经实现了基本的布局，一起来看看吧： 2、编辑界面     打开CocoStudio的UIEditor 编辑一个界面，创建一个ScrollView和两个Button。因为ScrollVi
cocos2d框架介绍
热门推荐
liangneo的专栏
09-13 2万+
cocos2d引擎 2.0 cocos2d简介 Cocos2d最初的版本是用python写的,之后被改成objectiveC,应用于iphone上,之后国内某人又根据该设计理念,将其改为C++版本cocos2dX,该版本可以在iphone,widnows,andriod三个平
Cocos2dx之UI组件
weixin_40763897的博客
02-24 2750
Cocos2d-x提供了一套UI组件。包括 Label Menu Buttons Checkbox Loading Bar Slider TextField Label Cocos2d-x提供Label对象，可以用真值类型、bitmap（位图）或内置系统字体来创建。 Label BMFont BMFont是一种Label类型，它使用bitmap（位图）字体。位图中的字符由点的矩阵组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值