Layout組件使用以下配置：
1.png
效果如下圖所示
2.png
cocosCreator版本：1.9.2
這個效果明顯不是我想要的，我想要的效果是卡牌不論有多少張，它們在垂直方向都能居中悍手，而在實際效果圖中我們看到明顯是往上偏移了渴逻。
此時，觀察到我們的這個Layout組件的高度值僅有一個卡牌高度的量（如一張卡牌高度是100档泽，那么兩張卡牌高度本應(yīng)該是200俊戳，而我們這個Layout的實際高度僅有100），所以可以得到一個結(jié)論：問題出在Layout的高度計算代碼有誤茁瘦。
解決方案
新建一個JavaScript文件品抽，然后使其繼承自cc.Layout，然后重寫它在GRID這種Type情況下的垂直方向布局方法甜熔。
cc.Class({
extends: cc.Layout,
properties: {
},
//覆蓋父類同名方法圆恤，代碼取自父類方法，僅修改幾個小細節(jié)
_doLayoutGridAxisHorizontal(layoutAnchor, layoutSize){
var baseWidth = layoutSize.width;
var sign = 1;
var bottomBoundaryOfLayout = -layoutAnchor.y * layoutSize.height;
var paddingY = this.paddingBottom;
if (this.verticalDirection === cc.Layout.VerticalDirection.TOP_TO_BOTTOM) {
sign = -1;
bottomBoundaryOfLayout = (1 - layoutAnchor.y) * layoutSize.height;
paddingY = this.paddingTop;
}
//修改處1：此處根據(jù)sign的不同使用不同計算方式
var fnPositionY = function(child, topOffset, row) {
return sign === 1 ? (bottomBoundaryOfLayout + topOffset + child.anchorY * child.height + paddingY + row * this.spacingY) :
(bottomBoundaryOfLayout - topOffset - (1 - child.anchorY) * child.height - paddingY - row * this.spacingY);
}.bind(this);
//修改處2：resizeMode === CONTAINER時的高度計算方式修改
this._doLayoutHorizontally(baseWidth, true, fnPositionY, true);
if (this.resizeMode === cc.Layout.ResizeMode.CONTAINER) {
var minY = Number.MAX_VALUE, maxY = Number.MIN_VALUE;
for(var c of this.node.children)
{
if (c.activeInHierarchy) {
var b = c.getBoundingBox();
if(b.yMin < minY)minY = b.yMin;
if(b.yMax > maxY)maxY = b.yMax;
}
}
var newHeight = maxY - minY;
this.node.setContentSize(baseWidth, newHeight);
bottomBoundaryOfLayout = sign === 1 ? (-layoutAnchor.y * newHeight) : ((1 - layoutAnchor.y) * newHeight);
this._doLayoutHorizontally(baseWidth, true, fnPositionY, true);
}
}
});
使用此Javascript文件替代Layout作為布局組件即可解決問題腔稀，當然盆昙，要是你想修改官方cc.Layout的源碼也行，就是步驟多一點焊虏，而且升級ccc之后還得重新寫一遍淡喜。希望官方人員看到此貼后可以及時修改Layout中相關(guān)高度計算的源碼。不過我這個只給出了自適應(yīng)高度的計算代碼诵闭，全當拋磚引玉了炼团，自適應(yīng)寬度的計算代碼在此就不寫了
