本文共 6019 字，大约阅读时间需要 20 分钟。

很多时候，我们会遇见各种各样的需求，流式布局算是非常常见的一种。像各种菜单啊，展示之类的。其实这个很简单，可以自己手写一个，顺便练练自定义控件。先看看效果。

那么先来分析一下，满足这个需求，应该需要做哪些准备。

就像备注写的一样，

换行的条件：

那么直接开始撸吧。

package com.example.administrator.flowlayout;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;import java.util.List;/** * Created by ShuWen on 2017/6/1. */public class FlowLayout extends ViewGroup {
       //用于缓存的多少行    private List
   
    
     > mLineViewsList = new ArrayList<>();    //用于缓存每一行最大的高度    private List
     
       mLinesHieights = new ArrayList<>();    public FlowLayout(Context context) {        super(context);    }    public FlowLayout(Context context, AttributeSet attrs) {        super(context, attrs);    }    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    //为了获取子控件的margin属性值    @Override    public LayoutParams generateLayoutParams(AttributeSet attrs) {        return new MarginLayoutParams(getContext(),attrs);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //获取测量模式        int meaWidthMode = MeasureSpec.getMode(widthMeasureSpec);        int meaHeightMode = MeasureSpec.getMode(heightMeasureSpec);        //获得允许的宽高        int meaWidthSize = MeasureSpec.getSize(widthMeasureSpec);        int meaHeightSize = MeasureSpec.getSize(heightMeasureSpec);        //最后测量的宽高        int measuredWidth = 0;        int measuredHeight = 0;        if (meaHeightMode == MeasureSpec.EXACTLY && meaWidthMode == MeasureSpec.EXACTLY){            measuredHeight = meaHeightSize;            measuredWidth = meaWidthSize;        }else {            int iCurLineW = 0;            int iCurLineH = 0;            int childWidth = 0;            int childHeight = 0;            int childCount = getChildCount();            //用于缓存每一行的子控件            List
      
        childsList = new ArrayList<>();            for (int i = 0; i < childCount; i++) {                View childView = getChildAt(i);                //测量子控件，获得子控件的宽高和margin值                measureChild(childView,widthMeasureSpec,heightMeasureSpec);                MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();                //自控件的宽高                childWidth = params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;                childHeight = params.topMargin + childView.getMeasuredHeight() + params.bottomMargin;                //当前行的宽度，加上下一个控件的宽度大于允许值，则换行                if (childWidth + iCurLineW > meaWidthSize){                    //换行操作，记录测量的父控件宽高                    measuredWidth = Math.max(measuredWidth,iCurLineW);                    measuredHeight += iCurLineH;                    //保存该行的数据                    mLineViewsList.add(childsList);                    mLinesHieights.add(iCurLineH);                    //重新记录新的一行                    iCurLineH = childHeight;                    iCurLineW = childWidth;                    //开始缓存新一行数据                    childsList = new ArrayList<>();                    childsList.add(childView);                }else {                    //未换行操作，记录该行宽高                    iCurLineH = Math.max(iCurLineH,childHeight);                    iCurLineW += childWidth;                    //保存到该行集合                    childsList.add(childView);                }                //当该行是最后一行并且需要换行时，进行换行数据处理                if (i == childCount - 1){                    measuredHeight += iCurLineH;                    measuredWidth = Math.max(measuredWidth,iCurLineW);                    mLinesHieights.add(iCurLineH);                    mLineViewsList.add(childsList);                }            }        }        setMeasuredDimension(measuredWidth,measuredHeight);    }    @Override    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {        int left,top,right,bottom;        int curLeft = 0;        int curTop = 0;        int linesCount = mLineViewsList.size();        for (int j = 0; j < linesCount; j++) {            List
       
         childViews = mLineViewsList.get(j);            int childsCount = childViews.size();            for (int k = 0; k < childsCount; k++) {                View childView = childViews.get(k);                MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();                left = curLeft + params.leftMargin;                top = curTop + params.topMargin;                right = left + childView.getMeasuredWidth();                bottom = top + childView.getMeasuredHeight();                //为子控件布局                childView.layout(left,top,right,bottom);                curLeft += params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;            }            curLeft = 0;            curTop += mLinesHieights.get(j);        }        mLinesHieights.clear();        mLineViewsList.clear();    }    public interface onItemClick{
           void click(View view,int position);    }    public void setOnItemClickListener(final onItemClick onItemClick){        int childCount = getChildCount();        for (int i = 0; i < childCount; i++) {            View childView = getChildAt(i);            final int finalI = i;            childView.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View view) {                    onItemClick.click(view, finalI);                }            });        }    }}
       
      
     
    
   

其中用到的flag背景：

textView的样式.

activity的布局：

就这么简单，自己撸一遍吧，总能学到一点的。