自定义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对象。下面我们来看一下关键代码：

  1 package com.example.customviewgroup;
  2 
  3 import android.content.Context;
  4 import android.util.AttributeSet;
  5 import android.util.Log;
  6 import android.view.View;
  7 import android.view.ViewGroup;
  8 
  9 import java.util.ArrayList;
 10 import java.util.List;
 11 
 12 /**
 13  * 流式布局
 14  */
 15 public class FlowLayout extends ViewGroup {
 16     //存储所有行的view视图  按行记录view  每行的view存储到list集合中
 17     private List<List<View>> mAllChildViews = new ArrayList<>();
 18     //记录每行的最大高度
 19     private List<Integer> mLineHeight = new ArrayList<>();
 20 
 21     public FlowLayout(Context context) {
 22         super(context);
 23     }
 24 
 25     public FlowLayout(Context context, AttributeSet attrs) {
 26         super(context, attrs);
 27     }
 28 
 29     /**
 30      * 负责子控件的测量模式和大小 根据所有的子控件的设置确定ViewGroup自己的宽度和高度
 31      * 首先得到父容器传入的测量模式和宽高的计算值 循环所有的子view 调用measureChild对
 32      * 所有的子view进行测量 然后根据所有的子view测量得出宽度和高度  如果ViewGroup设置为
 33      * warp_content时 ViewGroup的宽度和子view的总宽度一致  高度和子view的最大的高度一致
 34      * <p/>
 35      * 如果viewgroup设置为match_parent时直接根据父viewgroup传入的宽度和高度进行测量设置
 36      */
 37     @Override
 38     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 39         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 40         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 41         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 42         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 43 //        Log.d("tag", "widthSize: "+widthSize);
 44         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 45 
 46         //定义一个不断累加的总高度 当布局中高度的设置为warp_content时使用该高度
 47         int totalHeight = 0;
 48         //定义不断累加的变量  存放当前行控件的宽度总和
 49         int lineWidth = 0;
 50         //获取当前行控件中最高的控件的高度总和
 51         int lineHeight = 0;
 52         //获取viewGroup中子控件总个数遍历
 53         int childCount = getChildCount();
 54         for (int i = 0; i < childCount; i++) {
 55             View childView = getChildAt(i);
 56             //测量子控件的宽度和高度
 57             // (因为每个子控件的margin可能不同，所以使用measureChild()方法测量每个子控件
 58             // 若没有特定的属性，使用measureChildren()方法即可)
 59             measureChild(childView, widthMeasureSpec, heightMeasureSpec);
 60             //获取每个子控件的布局参数
 61             MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
 62             //获取子控件的实际宽度和高度
 63             int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
 64             int chileHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
 65 
 66             //如果加入当前的childView超出最大的宽度  到目前为止最大的宽度给width 累加高度 开启新行
 67             if (lineWidth + childWidth > widthSize) {
 68                 //开启新行(相当于直接将当前控件摆放到下一行，所以行宽从此childView的宽度开始)
 69                 lineWidth = childWidth;
 70                 //累加高度
 71                 totalHeight += lineHeight;
 72                 lineHeight = chileHeight;//开启记录下一行的高度
 73             } else {
 74                 //累加lineWidth  取得最大的lineHeight
 75                 lineWidth += childWidth;
 76                 lineHeight = Math.max(lineHeight, chileHeight);
 77             }
 78 
 79 //            如果绘制最后一个,因为totalHeight是从0的位置开始的，所以要再加上一个行高
 80             if (i == childCount - 1) {
 81                 totalHeight += lineHeight;
 82             }
 83 
 84             //宽度就设置为与屏幕一致，高度用一个三目运算符，若是高度模式为MeasureSpec.EXACTLY，则与屏幕一致，否则为我们得到的总高度
 85             setMeasuredDimension(widthSize,
 86                     (heightMode == MeasureSpec.EXACTLY) ? heightSize : totalHeight);
 87         }
 88     }
 89 
 90     @Override
 91     protected LayoutParams generateDefaultLayoutParams() {
 92         return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
 93     }
 94 
 95     @Override
 96     public LayoutParams generateLayoutParams(AttributeSet attrs) {
 97         return new MarginLayoutParams(getContext(), attrs);
 98     }
 99 
100     @Override
101     protected LayoutParams generateLayoutParams(LayoutParams p) {
102         return new MarginLayoutParams(p);
103     }
104 
105     /**
106      * 完成对viewgroup中所有childview的位置的指定
107      */
108     @Override
109     protected void onLayout(boolean changed, int l, int t, int r, int b) {
110         //先把集合中的内容全部清除掉，然后再加载本次绘制内容(这个地方不太清楚理解的对不对)
111         mAllChildViews.clear();
112         mLineHeight.clear();
113         Log.d("onLayout", "mAllChildViews: " + mAllChildViews);
114         Log.d("onLayout", "mLineHeight: "+mLineHeight);
115         //获取当前view的宽度(也就是父布局宽度)
116         int layoutWidth = getWidth();
117 //        Log.d("tag", "layoutWidth: "+layoutWidth);
118         //声明变量 定义每行的宽度和高度
119         int lineWidth = 0;
120         int lineHeight = 0;
121         //声明list集合存储每一行中所有的childView
122         List<View> lineViews = new ArrayList<>();
123         int childCount = getChildCount();
124         for (int i = 0; i < childCount; i++) {
125             View childView = getChildAt(i);
126             MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
127             int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
128             int childHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
129             //如果需要换行
130             if (lineWidth + childWidth > layoutWidth) {
131                 //记录这一行中所有的view以及最大高度
132                 mLineHeight.add(lineHeight);
133                 //将每一行的childview视图存储到集合中  然后开启新的arraylist记录下一行
134                 mAllChildViews.add(lineViews);
135                 //重置行宽度(这里说行宽其实有点不准确，lineWidth其实指的是绘制childView的左上角的点的横坐标)
136                 lineWidth = 0;
137                 //开启新的一行，则重新new一个来记录行View的集合
138                 lineViews = new ArrayList<>();
139             }
140             //如果不需要换行 则累加行宽，找出本行最大行高
141             lineWidth += childWidth;
142             //lineHeight其实指的是childView的左上角的点的纵坐标
143             lineHeight = Math.max(lineHeight, childHeight);
144             //不换行则添加childView到行集合中
145             lineViews.add(childView);
146         }
147 
148         mLineHeight.add(lineHeight);
149         mAllChildViews.add(lineViews);
150 
151         //声明绘制的起点坐标
152         int mLeft = 0;
153         int mTop = 0;
154         int lineNums = mAllChildViews.size();//获取总行数
155         for (int i = 0; i < lineNums; i++) {
156             lineViews = mAllChildViews.get(i);//获取每一行中所有的view
157             lineHeight = mLineHeight.get(i);//当前行的最大高度
158             for (int j = 0; j < lineViews.size(); j++) {
159                 View childView = lineViews.get(j);
160                 MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
161                 //计算childView中的left top right bottom
162                 int left_child = mLeft + lp.leftMargin;
163                 int top_child = mTop + lp.topMargin;
164                 int right_child = left_child + childView.getMeasuredWidth();
165                 int botton_child = top_child + childView.getMeasuredHeight();
166                 childView.layout(left_child, top_child, right_child, botton_child);
167                 //指定每个子控件的起始位置
168                 mLeft += childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
169             }
170             //下一行开始,重置行宽(x),累加行高(y)
171             mLeft = 0;
172             mTop += lineHeight;
173         }
174     }
175 }

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