码迷,mamicode.com
首页 > 其他好文 > 详细

cocos布局分析

时间:2016-05-25 20:47:31      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:

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之绝对布局

代码如下

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有效。

技术分享

cocos布局分析

标签:

原文地址:http://www.cnblogs.com/damowang/p/5528189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!