cocos布局分析

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