效果图
使用
在app level的build.gradle中加入项目依赖, 确保在project level的build.gradle中包含jcenter()中心仓库。
compile 'cn.wolfspider:autowraplinelayout:1.0.1'
添加完以后就可以开始使用了，具体的使用和设置样式的方法还请到项目的Github主页(https://github.com/Hector1990/AutoWrapLineLayoutDemo)去浏览,当然别忘记Star一下哈。
如果只是想使用它，那么到这里就可以了。
实现原理
首先需要继承ViewGroup, 在这里我们需要重写它的onMeasure和onLayout方法。本项目中它的子View有两种填充方式，一种是Fill_PARENT，一种是WRAP_CONTENT，看名字应该能知道是什么意思吧。简单起见，这里只介绍WRAP_CONTENT的这一种实现方式。
首先来看onMeasure
childOfLine = new ArrayList<>(); //记录每行的view数
int childCount = getChildCount();
int totalHeight = 0; //ViewGroup的总高度
int totalWidth = MeasureSpec.getSize(widthMeasureSpec); //ViewGroup的总长度
int curLineChildCount = 0; //当前行的view数
int curLineWidth = 0; //当前行的宽度
int maxHeight = 0; //当前行的最大高度
for (int i = 0; i < childCount; i++) {
View childItem = getChildAt(i);
measureChild(childItem, widthMeasureSpec, heightMeasureSpec);
int childHeight = childItem.getMeasuredHeight();
int childWidth = childItem.getMeasuredWidth();
if (curLineWidth + childWidth <= totalWidth) {
/** 当前行的宽度加上此view的宽度小于总长度 **/
curLineWidth += childWidth;
maxHeight = Math.max(childHeight, maxHeight);
curLineChildCount++;
} else {
/** 当前行的宽度加上此view的宽度大于总长度，换行 **/
childOfLine.add(curLineChildCount);
curLineWidth = childWidth;
curLineChildCount = 1;
totalHeight += maxHeight;
maxHeight = childHeight;
}
}
childOfLine.add(curLineChildCount);
for (int i = 0; i < childOfLine.size(); i++) {
if (childOfLine.get(i) == 0) {
childOfLine.remove(i);
}
}
/** 计算得到ViewGroup的总高度 **/
totalHeight += (mVerticalGap * (childOfLine.size() - 1) + maxHeight);
setMeasuredDimension(totalWidth, totalHeight);
根据上面的代码，我们可以看到，第一步是测量childView的大小，然后根据它的长度加上当前行的宽度和总长度进行比较，如果小于等于则继续，否则换行。这里注意的是换行的同时，要把上一行的childView的数量加入list中，并且ViewGroup的总长度要加上上一行的最大高度。
在所有的childView测量完之后，我们要进行最后的结算，首先是最后一行的childView数量要加入list中，其次总高度要加上最后一行的maxHeight，以及垂直方向的间距。
接下来看onLayout
int index = 0;
int curHeight = 0; //当前行的起始高度
for (int i = 0; i < childOfLine.size(); i++) {
int childCount = childOfLine.get(i);
int maxHeight = 0;
int lineWidth = 0;
int target = index + childCount;
for ( ; index < target; index++) {
View item = getChildAt(index);
maxHeight = Math.max(maxHeight, item.getMeasuredHeight());
item.layout(lineWidth, curHeight, lineWidth + item.getMeasuredWidth(), curHeight + item.getMeasuredHeight());
lineWidth += item.getMeasuredWidth() + mHorizontalGap;
}
curHeight += maxHeight + mVerticalGap;
}
这里的代码应该比较容易理解，根据上一行记录的每一行的childView数，可以知道每一个childView属于哪一行，然后就可以进行布局了。
项目完整的代码在Github上，有兴趣的朋友可以去看下顺便提点意见。当然别忘了Star一下哦。
Github地址：https://github.com/Hector1990/AutoWrapLineLayoutDemo
