100行Android代码自定义一个流式布局－FlowLayout

首先来看一下 手淘HD - 商品详情 - 选择商品属性 页面的UI

商品有很多尺码，而且展现每个尺码所需要的View的大小也不同（主要是宽度），所以在从服务器端拉到数据之前，展现所有尺码所需要的行数和每一行的个数都无法确定，因此不能直接使用GridView或ListView。

如果使用LinearLayout呢？

一个LinearLayout只能显示一行，如果要展示多行，则每一行都要new一个LinearLayout出来，而且还必须要计算出每一个LinearLayout能容纳多少个尺码对应的View，实现起来也会比较复杂。

其实要实现这个功能，只需要借鉴一下CSS3的​​flex-box​​​就可以了。
[外链图片转存中…(img-oc9yHs7s-1575536858910)]

要实现一个Android版本的flexbox，原理非常简单，为了与Android的命名规范保持一致，我们称之为​​FlowLayout​​。

0. 首先新建一个​​FlowLayout​​​类，继承自​​ViewGroup​​
1. 在​​onMeasure​​​中根据 child views 计算出​​FlowLayout​​高度
2. 在​​onLayout​​中对child views 的进行布局（layout）

下面只列出了最核心的代码片段，完整代码已经放到Github上－​​AndroidFlowLayout​​，欢迎fork。

在onMeasure中计算FlowLayout的高度

// 遍历所有的子View
for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
    View childView = getChildAt(i);
    // measure子View，并获取它的宽度和高度
    LayoutParams childLayoutParams = childView.getLayoutParams();
    childView.measure(
            getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, childLayoutParams.width),
            getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, childLayoutParams.height));
    int childWidth = childView.getMeasuredWidth();
    int childHeight = childView.getMeasuredHeight();
    // 计算当前行的高度（当前行所有子View中最高的那个）
    lineHeight = Math.max(childHeight, lineHeight);

    // 把当前child view放到上一个child view的右边，如果放不下，则换行
    if (childLeft + childWidth + paddingRight > myWidth) {
        childLeft = paddingLeft;
        childTop += mVerticalSpacing + lineHeight;
        lineHeight = childHeight;
    } else {
        childLeft += childWidth + mHorizontalSpacing;
    }
}

int wantedHeight = childTop + lineHeight + paddingBottom;
// 计算FlowLayout所需要高度
setMeasuredDimension(myWidth, resolveSize(wantedHeight, heightMeasureSpec));

在onLayout中对child views进行布局

代码与​​onMeasure​​非常类似，只需要根据child view的宽度和高度放到指定位置即可。

for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
    View childView = getChildAt(i);

    if (childView.getVisibility() == View.GONE) {
        continue;
    }

    int childWidth = childView.getMeasuredWidth();
    int childHeight = childView.getMeasuredHeight();

    lineHeight = Math.max(childHeight, lineHeight);

    if (childLeft + childWidth + paddingRight > myWidth) {
        childLeft = paddingLeft;
        childTop += mVerticalSpacing + lineHeight;
        lineHeight = childHeight;
    }
    
    // 关键代码
    childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
    childLeft += childWidth + mHorizontalSpacing;
}

完整版代码已经放到Github－​​FlowLayout​​​，打出来的aar包已经上传到了​​bintray​​​，使用方式非常简单，只需要在项目（project）对应的​​build.gradle​​中添加一条dependency即可。

compile 'com.liangfeizc:flowlayout:1.0.0@aar'

把aar包上传到 jCenter

具体做法可参考 ​​publishing gradle android library to jcenter​​​ 打包脚本可参考 ​​flowlayout/build.gradle​​

有问题请留言。よろしくお願いします