cocos布局分析
2016-05-25 19:11
489 查看
HBox和VBox布局
HBox只是一个水平布局包装类。 HBox里面所有的孩子节点都会水平排列成一行
VBox仅仅是对垂直布局的一个简便的类封装。 VBox把它的子节点布局在一竖列中。
Layout容器下布局
ccui.LayoutType =
{
ABSOLUTE = 0, --绝对布局 默认 子元素按照绝对位置排列
VERTICAL = 1, --垂直平铺
HORIZONTAL = 2, --横向平铺
RELATIVE = 3, --相对布局
}
ccui.LinearGravity =
{
none = 0,
left = 1, --左侧对齐
top = 2, --顶部对齐
right = 3, --右侧对齐
bottom = 4, --底部对齐
centerVertical = 5, --垂直居中对齐线性布局
centerHorizontal = 6, --水平居中对齐线性布局
}
Layout之绝对布局
代码如下
Layout之相对布局
代码如下
Layout之垂直平铺
代码如下
这段代码决定了子控件在垂直方向的布局规则,即Y坐标落点规则。
子控件代码
Layout之横向平铺
代码如下
这段代码决定了子控件在水平方向的布局规则,即X坐标落点规则。
子控件代码
HBox只是一个水平布局包装类。 HBox里面所有的孩子节点都会水平排列成一行
VBox仅仅是对垂直布局的一个简便的类封装。 VBox把它的子节点布局在一竖列中。
Layout容器下布局
ccui.LayoutType =
{
ABSOLUTE = 0, --绝对布局 默认 子元素按照绝对位置排列
VERTICAL = 1, --垂直平铺
HORIZONTAL = 2, --横向平铺
RELATIVE = 3, --相对布局
}
ccui.LinearGravity =
{
none = 0,
left = 1, --左侧对齐
top = 2, --顶部对齐
right = 3, --右侧对齐
bottom = 4, --底部对齐
centerVertical = 5, --垂直居中对齐线性布局
centerHorizontal = 6, --水平居中对齐线性布局
}
Layout之绝对布局
代码如下
local layout = ccui.Layout:create() layout:setLayoutType(ccui.LayoutType.ABSOLUTE)
Layout之相对布局
代码如下
local layout = ccui.Layout:create() layout:setLayoutType(ccui.LayoutType.RELATIVE)
Layout之垂直平铺
代码如下
local layout = ccui.Layout:create() layout:setLayoutType(ccui.LayoutType.VERTICAL)
这段代码决定了子控件在垂直方向的布局规则,即Y坐标落点规则。
子控件代码
local button = ccui.Button:create() button:setTitleText("Text Button 1") button:setTouchEnabled(true) button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "") layout:addChild(button) local lp1 = ccui.LinearLayoutParameter:create() button:setLayoutParameter(lp1) lp1:setGravity(ccui.LinearGravity.centerHorizontal) lp1:setMargin({ left = 0, top = 5, right = 0, bottom = 10 }) local textButton = ccui.Button:create() textButton:setTouchEnabled(true) textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "") textButton:setTitleText("Text Button 2") layout:addChild(textButton) local lp2 = ccui.LinearLayoutParameter:create() textButton:setLayoutParameter(lp2) lp2:setGravity(ccui.LinearGravity.centerHorizontal) lp2:setMargin({left = 0, top = 10, right = 0, bottom = 10} ) local button_scale9 = ccui.Button:create() button_scale9:setTouchEnabled(true) button_scale9:setTitleText("Text Button 3") button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "") button_scale9:setScale9Enabled(true) button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height)) layout:addChild(button_scale9) local lp3 = ccui.LinearLayoutParameter:create() button_scale9:setLayoutParameter(lp3) lp3:setGravity(ccui.LinearGravity.centerHorizontal) lp3:setMargin({ left = 0, top = 10, right = 0, bottom = 10 } )
LinearLayoutParameter线性布局参数 它是专门为线性排列元素用线性布局管理器,通过该类可以指示子控件在水平方向的定位规则,即X坐标。如果垂直方向Layout容器中已定,那么只有决定X坐标的,Left,Right,Center有效。 示例图如下
Layout之横向平铺
代码如下
local layout = ccui.Layout:create() layout:setLayoutType(ccui.LayoutType.HORIZONTAL)
这段代码决定了子控件在水平方向的布局规则,即X坐标落点规则。
子控件代码
local button = ccui.Button:create() button:setTouchEnabled(true) button:setTitleText("Text Button 1") button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "") layout:addChild(button) local lp1 = ccui.LinearLayoutParameter:create() button:setLayoutParameter(lp1) lp1:setGravity(ccui.LinearGravity.top) lp1:setMargin({left = 0, top = 10, right = 0, bottom = 10} ) local textButton = ccui.Button:create() textButton:setTouchEnabled(true) textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "") textButton:setTitleText("Text Button 2") layout:addChild(textButton) local lp2 = ccui.LinearLayoutParameter:create() textButton:setLayoutParameter(lp2) lp2:setGravity(ccui.LinearGravity.centerVertical) lp2:setMargin({left = 0,top = 10,right = 0,bottom = 50}) local button_scale9 = ccui.Button:create() button_scale9:setTouchEnabled(true) button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "") button_scale9:setTitleText("Text Button 2") button_scale9:setScale9Enabled(true) button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height)) layout:addChild(button_scale9) local lp3 = ccui.LinearLayoutParameter:create() button_scale9:setLayoutParameter(lp3) lp3:setGravity(ccui.LinearGravity.bottom) lp3:setMargin({left = 0, top = 10, right = 0, bottom = 10})
LinearLayoutParameter线性布局参数 它是专门为线性排列元素用线性布局管理器,通过该类可以指示子控件在垂直方向的定位规则,即Y坐标。如果水平方向Layout容器中已定,那么只有决定Y坐标的,Top,Bottom,Center有效。
相关文章推荐
- cocos2dx 3.x getStringFromFile lua 读取二进制文件
- libcocos2dx 已停止运行
- Cocos2dx 2.x移植安卓及打包
- register_spine_module(lua_State*) in libluacocos2d iOS.a(lua_cocos2dx_spine_manual.o)
- Cocos2dx spine 二进制 c 版本
- cocos2d-x 两个场景间进行传参数
- cocos2d-x 设置全局可变变量
- 如何将cocos2d-x项目打包成一个.exe
- Cocos2d-3.x Action介绍
- cocos2dx3.2在安卓下实现资源和程序分离调试
- 【cocos2d-x 手游研发----怪物智能AI】
- 【cocos2d-x 手游研发小技巧 循环无限滚动的登陆背景】
- 安卓程序自启动的办法
- cocos2dx源码分析之内存管理
- Cocos2d-x 导入到Eclipse后出现The import org.cocos2dx.lib cannot be resolved错误
- cocos2dx 3D游戏制作参考
- cocos2dx之如何利用plist文件来制作循环动画
- cocos2dx之c++11 bind
- Cocos2dx 3.10音频无法正常播放问题的解决之路
- cocos2d-x项目的创建