[cocos]ui布局---创建根据父控件和仓库格子大小对齐的仓库

转载于 2017-06-26 15:37:00 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Faiz-room/p/7080852.html

文章标签：

#ui

本文介绍了一种使用Lua编写的布局算法，该算法能够根据父容器的尺寸和子元素的数量及尺寸，合理地布置子元素的位置。通过计算每行显示的元素数量、元素间的间距以及每个元素的具体位置，实现了均匀分布的效果。

int itemNum = 25
local eachCol = 5
local rowNum = itemNum / eachCol
float parentW = parent:getContentSize():width
float parentH = parent:getContentSize():Height
for i=1,itemNum do 
　　local row = math.ceil( i / eachCol )
　　local col = n% eachCol 
　　if col == 0 then
　　　　col = eachCol 
　　end
　　local item= ccui.ImageView:create('UI/XXXX.png')
　　local itemW= item:getContentSize().width
　　local itemH= item:getContentSize().height
　　local gapW = (parentW - itemW * eachCol) / (eachCol - 1) + itemW -- 间隔总宽度 = 总宽-格子占的宽 ， 每个间隔宽度 = 间隔总宽度 / 间隔数 + itenW
　　local gapH  = (parentH - itemH * rowNum) / (rowNum - 1) + itemH
　　local x = itemW / 2
　　local y = itemH / 2 
　　item:setPosition( x + (col-1)*gapW , y + (row-1)*gapH)
　　parent:add(item)
end