TangIDE开发技巧之GridView控件布局

版权声明：欢迎访问studio.holaverse.cn！HTML5游戏零基础超快上手！一天一个小游戏！！！ https://blog.csdn.net/yinlijun2004/article/details/46639965

用TangIDE开发游戏的朋友，可能会用到网格控件UIGridView，它用来管理排列排列整齐的子控件非常方便。但是默认的布局下子控件会将网格填充的满满当当。如下图：

如果你希望子控件之间留有缝隙，显得美观一些，像这样：

那么，你只需要改写UIGridView的relayoutChildren方法就可以了，改动只需2处。

var me = this;
var win = this.getWindow();
//显示对象
var grid = win.find("ui-grid-general");
grid.relayoutChildren = function(animHint) {
    if(this.disableRelayout) {
        return;
    }

    var r = 0;
    var c = 0;
    var x = 0;
    var y = 0;

    var w = this.getWidth(true);
    var h = this.getHeight(true);
    var spacer = this.spacer;
    var itemSize = this.calcItemSize();
    var itemW = itemSize.w + spacer;
    var itemH = itemSize.h + spacer;
    var cols = Math.floor(w/itemW);
    var rows = Math.floor(h/itemH);

    var vMargin = (this.h - rows * itemH) >> 1;
    var hMargin = (this.w - cols * itemW) >> 1;

    this.cols = cols;
    this.rows = rows;

    for(var i = 0; i < this.children.length; i++) {
        var child = this.children[i];

        r = Math.floor(i/cols);
        c = Math.floor(i%cols);

        x = hMargin + c * itemW + 10;
        y = vMargin + r * itemH + 10;

        if(animHint || this.mode === Shape.MODE_EDITING) {
            child.animMove(x, y, animHint);
        }
        else {
            child.move(x, y);
        }

        child.xAttr = UIElement.X_FIX_LEFT;
        child.yAttr = UIElement.Y_FIX_TOP;
        child.widthAttr = UIElement.WIDTH_FIX;
        child.heightAttr = UIElement.HEIGHT_FIX;
        child.setSize(itemSize.w - 10, itemSize.h - 10);
        child.setUserMovable(true);
        child.setUserResizable(false);
        child.relayoutChildren();
        if(!this.isUIScrollView) {
            child.setDraggable(this.itemDraggable);
        }
    }

    return;
};
grid.relayoutChildren(false);