android 流式布局简单实现

1.概述
今天看了Android自定义控件的书籍之后准备动手写个自定义控件，于是有了该篇文章。之前也看过一些大神们写的,受益匪浅。初写博客一方面是想向大神们学习，另一方面也算是自己学习的一个记录。
2.思路分析
好了废话不多扯，开始正题：流式布局肯定一个view容器也就是ViewGroup。从View的工作原理可以得知 View的绘制流程：
onMeasure —–> onLayout —–> onDraw,依次是
测量规格 —-> 确定位置 —> 绘制。 因此我们实现流式布局只需要重写前2步，即onMeasure和onLayout。
测量时需要通常需要处理测量模式为AT_MOST 对应wrap_content,这种情况需要根据子控件的宽和高来最终确认父控件的宽和高。
3.代码实现

public class FlowView extends ViewGroup {  public FlowView(Context context) {    this(context, null);  }  public FlowView(Context context, AttributeSet attrs) {    this(context, attrs, 0);  }  public FlowView(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);  }  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    int measureWidth = 0;    int measureHeight = 0;    int childCount = getChildCount();    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);    int measureWidthSize = MeasureSpec.getSize(widthMeasureSpec);    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);    int measureHeightSize = MeasureSpec.getSize(heightMeasureSpec);  /**note: 原本写法先判断 Mode 都是Exactly的情况下不去测量                childView,从而提高效率。     *   针对onMeasure是可以的,但是onLayout中需要获取子控件width和height    时     *       还是得测量,所以此处统一测量了。     *     */    //if (measureHeightMode == MeasureSpec.EXACTLY     //&& measureWidthMode == MeasureSpec.EXACTLY) {    //  measureWidth = measureWidthSize;    //  measureHeight = measureHeightSize;    //} else {    for (int i = 0; i < childCount; i++) {      View child = getChildAt(i);      measureChild(child, widthMeasureSpec, heightMeasureSpec);      MarginLayoutParams layoutParam = (MarginLayoutParams) child.getLayoutParams();      int cWidth = child.getMeasuredWidth() + layoutParam.leftMargin + layoutParam.rightMargin;      int cHeight = child.getHeight() + layoutParam.topMargin + layoutParam.bottomMargin;      /**       * 思路:不换行--> width累加  height取max       *      换行 --> width = 上一行累加值与当前控件width的 max值       *               height = 上一行的max值 + 当前控件的height       */      if (measureWidth + cWidth > measureWidthSize) {        measureWidth = Math.max(measureWidth, cWidth);        measureHeight += cHeight;      } else {        measureHeight = Math.max(measureHeight, cHeight);        measureWidth += cWidth;      }    }    setMeasuredDimension(measureWidthMode == MeasureSpec.EXACTLY ? measureWidthSize : measureWidth,        measureHeightMode == MeasureSpec.EXACTLY ? measureHeightSize : measureHeight);  }  @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {    int childCount = getChildCount();    int lineWidth = 0;    int lineHeight = 0;    int left = 0;    int top = 0;    for (int i = 0; i < childCount; i++) {      View child = getChildAt(i);      MarginLayoutParams layoutParam = (MarginLayoutParams) child.getLayoutParams();      int cWidth = child.getWidth() + layoutParam.leftMargin + layoutParam.rightMargin;      int cHeight = child.getHeight() + layoutParam.topMargin + layoutParam.bottomMargin;      //换行      if (cWidth + lineWidth > getWidth()) {        if (child.getVisibility() != View.GONE) {          left = 0;          top = lineHeight;          child.layout(left + layoutParam.leftMargin, top + layoutParam.topMargin,              left + layoutParam.leftMargin + child.getMeasuredWidth(),              top + layoutParam.topMargin + child.getMeasuredHeight());          left += layoutParam.leftMargin + child.getMeasuredWidth();        }        lineWidth = cWidth;        lineHeight += cHeight;      } else {        lineWidth += cWidth;        lineHeight = Math.max(lineHeight, cHeight);        if (child.getVisibility() != View.GONE) {          child.layout(left + layoutParam.leftMargin, top + layoutParam.topMargin,              left + layoutParam.leftMargin + child.getMeasuredWidth(),              top + layoutParam.topMargin + child.getMeasuredHeight());          left += layoutParam.leftMargin + child.getMeasuredWidth();        }      }    }  }  @Override public LayoutParams generateLayoutParams(AttributeSet attrs) {    return new MarginLayoutParams(getContext(), attrs);  }}

4.运行测试

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >   <demos.ch.com.flowlayout.FlowView       android:layout_width="wrap_content"       android:layout_height="wrap_content"       >     <Button         style="@style/btn_style"         android:text="演员"         />     <Button         style="@style/btn_style"         android:text="你还要我怎样"         />     <Button         style="@style/btn_style"         android:text="方圆几里"         />     <Button         style="@style/btn_style"         android:text="绅士"         />     <Button         style="@style/btn_style"         android:text="认真的雪"         />     <Button         style="@style/btn_style"         android:text="faded"         />     <Button         style="@style/btn_style"         android:text="We dont talk more"         />     <Button         style="@style/btn_style"         android:text="Jar of love"         />     <Button         style="@style/btn_style"         android:text="可惜没如果"         />     <Button         style="@style/btn_style"         android:text="浪费"         />     <Button         style="@style/btn_style"         android:text="一丝不挂"         />     <Button         style="@style/btn_style"         android:text="阴天快乐"         />     <Button         style="@style/btn_style"         android:text="可以了"         />   </demos.ch.com.flowlayout.FlowView></LinearLayout><---样式文件 ---><style name="btn_style">    <item name="android:layout_width">wrap_content</item>    <item name="android:layout_height">wrap_content</item>    <item name="android:layout_margin">5dp</item>    <item name="android:background">@color/colorBackground</item>    <item name="android:textColor">#ffffff</item>    <item name="android:textSize">24dp</item>  </style>

运行结果：
1.match_parent | wrap_content

2.固定值(400dp）

以上就实现了简单的流式布局实现。
源码下载:
[https://github.com/ChenHaoLw/FlowLayout]