Android可自动换行的布局 -- AutoWrapLineLayout

效果图


使用

在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