自定义View(三)--实现一个简单地流式布局

　　Android中的流式布局也就是常说的瀑布流很是常见，不仅在很多项目中都能见到，而且面试中也有很多面试官问道，那么什么是流式布局呢？简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候，则自动将控件填充到下一行中，如一些关键字的标签，热搜词列表等位置出现的比较多。而且控件的类型可以摆放不同的，如一行中可以放置TextView，或者是ImageView，布局应该根据行中最大宽度来自动确定自己的每一行的宽度。

　　本次的Demo我们要实现如下的效果：

　　其实思路还是比较简单容易理顺的，看代码的前几遍可能会感觉到懵逼，但是看过几遍就会有种"哦，就是这么回事。"的感觉了。先来说下我的思路吧：

　　因为是流式布局么，布局布局，当然要继承自ViewGroup了，而且本次Demo中没有用到什么自定义属性，所以简单了不少。老样子，自定义View，肯定先是要自定义一个类，我们起名为FlowLayout，名字是不是很贴切？按照惯例，因为要在xml文件中使用，所以重写其一个参数的和两个参数的构造函数。然后：

　　重写onMeasure()，在onMeasure()中计算出父布局和子控件的尺寸(还要计算出什么时候一行摆放不下的时候该换行，这部分是关键部分)

　　我们定义了两个个全局变量List<List<View>> mAllChildViews和List<Integer> mLineHeight用来在onLayout中使用，前者是用来存放所有的子控件的集合，里层的List集合用来存放每一行的子控件；后者是用来存放每一行中的最大高度的那一个子控件。

　　重写onLayout()方法，在onLayout()方法中先要根据控件的宽高和是否有外边距等来确定每行的childView和每行的最大行高，并将其填充到集合中，然后再遍历mAllChildViews集合，绘制每行的childView，这时候就不需要在判断是否需要换行了！因为之前的操作中我们已经确定了哪些childView是属于一行中的。最后，我们可能会在xml文件中使用margin属性，所以要重写三个generateLayoutParams方法，并返回一个MarginLayoutParams对象。下面我们来看一下关键代码：

　　

 package com.example.customviewgroup;

 import android.content.Context;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.View;
 import android.view.ViewGroup;

 import java.util.ArrayList;
 import java.util.List;

 /**
  * 流式布局
  */
 public class FlowLayout extends ViewGroup {
     //存储所有行的view视图  按行记录view  每行的view存储到list集合中
     private List<List<View>> mAllChildViews = new ArrayList<>();
     //记录每行的最大高度
     private List<Integer> mLineHeight = new ArrayList<>();

     public FlowLayout(Context context) {
         super(context);
     }

     public FlowLayout(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     /**
      * 负责子控件的测量模式和大小 根据所有的子控件的设置确定ViewGroup自己的宽度和高度
      * 首先得到父容器传入的测量模式和宽高的计算值 循环所有的子view 调用measureChild对
      * 所有的子view进行测量 然后根据所有的子view测量得出宽度和高度  如果ViewGroup设置为
      * warp_content时 ViewGroup的宽度和子view的总宽度一致  高度和子view的最大的高度一致
      * <p/>
      * 如果viewgroup设置为match_parent时直接根据父viewgroup传入的宽度和高度进行测量设置
      */
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 //        Log.d("tag", "widthSize: "+widthSize);
         int heightSize = MeasureSpec.getSize(heightMeasureSpec);

         //定义一个不断累加的总高度 当布局中高度的设置为warp_content时使用该高度
         int totalHeight = 0;
         //定义不断累加的变量  存放当前行控件的宽度总和
         int lineWidth = 0;
         //获取当前行控件中最高的控件的高度总和
         int lineHeight = 0;
         //获取viewGroup中子控件总个数遍历
         int childCount = getChildCount();
         for (int i = 0; i < childCount; i++) {
             View childView = getChildAt(i);
             //测量子控件的宽度和高度
             // (因为每个子控件的margin可能不同，所以使用measureChild()方法测量每个子控件
             // 若没有特定的属性，使用measureChildren()方法即可)
             measureChild(childView, widthMeasureSpec, heightMeasureSpec);
             //获取每个子控件的布局参数
             MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
             //获取子控件的实际宽度和高度
             int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
             int chileHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

             //如果加入当前的childView超出最大的宽度  到目前为止最大的宽度给width 累加高度 开启新行
             if (lineWidth + childWidth > widthSize) {
                 //开启新行(相当于直接将当前控件摆放到下一行，所以行宽从此childView的宽度开始)
                 lineWidth = childWidth;
                 //累加高度
                 totalHeight += lineHeight;
                 lineHeight = chileHeight;//开启记录下一行的高度
             } else {
                 //累加lineWidth  取得最大的lineHeight
                 lineWidth += childWidth;
                 lineHeight = Math.max(lineHeight, chileHeight);
             }

 //            如果绘制最后一个,因为totalHeight是从0的位置开始的，所以要再加上一个行高
             if (i == childCount - 1) {
                 totalHeight += lineHeight;
             }

             //宽度就设置为与屏幕一致，高度用一个三目运算符，若是高度模式为MeasureSpec.EXACTLY，则与屏幕一致，否则为我们得到的总高度
             setMeasuredDimension(widthSize,
                     (heightMode == MeasureSpec.EXACTLY) ? heightSize : totalHeight);
         }
     }

     @Override
     protected LayoutParams generateDefaultLayoutParams() {
         return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
     }

     @Override
     public LayoutParams generateLayoutParams(AttributeSet attrs) {
         return new MarginLayoutParams(getContext(), attrs);
     }

     @Override
     protected LayoutParams generateLayoutParams(LayoutParams p) {
         return new MarginLayoutParams(p);
     }

     /**
      * 完成对viewgroup中所有childview的位置的指定
      */
     @Override
     protected void onLayout(boolean changed, int l, int t, int r, int b) {
         //先把集合中的内容全部清除掉，然后再加载本次绘制内容(这个地方不太清楚理解的对不对)
         mAllChildViews.clear();
         mLineHeight.clear();
         Log.d("onLayout", "mAllChildViews: " + mAllChildViews);
         Log.d("onLayout", "mLineHeight: "+mLineHeight);
         //获取当前view的宽度(也就是父布局宽度)
         int layoutWidth = getWidth();
 //        Log.d("tag", "layoutWidth: "+layoutWidth);
         //声明变量 定义每行的宽度和高度
         int lineWidth = 0;
         int lineHeight = 0;
         //声明list集合存储每一行中所有的childView
         List<View> lineViews = new ArrayList<>();
         int childCount = getChildCount();
         for (int i = 0; i < childCount; i++) {
             View childView = getChildAt(i);
             MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
             int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
             int childHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
             //如果需要换行
             if (lineWidth + childWidth > layoutWidth) {
                 //记录这一行中所有的view以及最大高度
                 mLineHeight.add(lineHeight);
                 //将每一行的childview视图存储到集合中  然后开启新的arraylist记录下一行
                 mAllChildViews.add(lineViews);
                 //重置行宽度(这里说行宽其实有点不准确，lineWidth其实指的是绘制childView的左上角的点的横坐标)
                 lineWidth = 0;
                 //开启新的一行，则重新new一个来记录行View的集合
                 lineViews = new ArrayList<>();
             }
             //如果不需要换行 则累加行宽，找出本行最大行高
             lineWidth += childWidth;
             //lineHeight其实指的是childView的左上角的点的纵坐标
             lineHeight = Math.max(lineHeight, childHeight);
             //不换行则添加childView到行集合中
             lineViews.add(childView);
         }

         mLineHeight.add(lineHeight);
         mAllChildViews.add(lineViews);

         //声明绘制的起点坐标
         int mLeft = 0;
         int mTop = 0;
         int lineNums = mAllChildViews.size();//获取总行数
         for (int i = 0; i < lineNums; i++) {
             lineViews = mAllChildViews.get(i);//获取每一行中所有的view
             lineHeight = mLineHeight.get(i);//当前行的最大高度
             for (int j = 0; j < lineViews.size(); j++) {
                 View childView = lineViews.get(j);
                 MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
                 //计算childView中的left top right bottom
                 int left_child = mLeft + lp.leftMargin;
                 int top_child = mTop + lp.topMargin;
                 int right_child = left_child + childView.getMeasuredWidth();
                 int botton_child = top_child + childView.getMeasuredHeight();
                 childView.layout(left_child, top_child, right_child, botton_child);
                 //指定每个子控件的起始位置
                 mLeft += childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
             }
             //下一行开始,重置行宽(x),累加行高(y)
             mLeft = 0;
             mTop += lineHeight;
         }
     }
 }

其实Android5.0之后可以使用RecycleView来实现，不用这么麻烦。