Android之FlowLayout流式布局

传承者（Inheritors）打造共同进步生态圈！！！

转载：http://blog.csdn.net/lmj623565791/article/details/38352503

考虑宽高，设置宽高是重点

flag_04

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <solid android:color="#7690A5" >    </solid>    <corners android:radius="5dp"/>    <padding        android:bottom="2dp"        android:left="10dp"        android:right="10dp"        android:top="2dp" /></shape>

main

<?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:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" tools:context="com.example.administrator.testapplication.Main2Activity"><com.example.administrator.testapplication.FlowLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    >  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="Welcome"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="IT工程师"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="学习ing"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="恋爱ing"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="挣钱ing"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="努力ing"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="I thick i can"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="dddddd"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="黑恶黑诶诶"      android:textColor="#323232" />  <TextView      style="@style/text_flag_01"      android:background="@drawable/flag_04"      android:text="I thick i can"      android:textColor="#323232" /></com.example.administrator.testapplication.FlowLayout></LinearLayout>

style

   <style name="text_flag_01">        <item name="android:layout_width" >wrap_content</item>        <item name="android:layout_height">wrap_content</item>        <item name="android:layout_margin">4dp</item>        <item name="android:background">@drawable/flag_01</item>        <item name="android:textColor">#ffffff</item>    </style>

FlowLayout

public class FlowLayout  extends ViewGroup{    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);    }    @Override    public LayoutParams generateLayoutParams(AttributeSet attrs) {        return new MarginLayoutParams(getContext(),attrs);    }    /**     * 获得设置子控件的测量模式，大小，根据所有子控件设置自己的宽和高     * @param widthMeasureSpec     * @param heightMeasureSpec     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //获得它的父容器为它设置的测量模式和大小        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);        //如果wrap_content情况下，记录宽和高        int width =0, height = 0;        //记录每一行的宽度，width不断取最大的宽度        int lineWidth = 0;        //每一行的高度，累计至height        int lineHeight = 0;        int cCount = getChildCount();        //遍历每个子元素        for (int i = 0; i < cCount; i++) {            View child = getChildAt(i);            //测量每一个child的宽和高            measureChild(child,widthMeasureSpec,heightMeasureSpec);            //得到child的lp            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();            //当前子空间实际占据的宽度            int childWidth = child.getMeasuredWidth()+lp.leftMargin + lp.rightMargin;            int childHeight = child.getMeasuredHeight()+lp.topMargin +lp.bottomMargin;            //如果加入当前child，则超出最大宽度，则给目前最大宽度，启动新的一行            if(lineWidth +childWidth>sizeWidth){                width = Math.max(lineWidth,childWidth);//获取最大的                lineWidth = childWidth;//重新开启新的行，开始记录                //叠加当前高度                height+= lineHeight;                //开启记录下一行的高度                lineHeight = childHeight;            }else{                //否则累加值lineWidth，lineHeight取最大高度                lineWidth+=childWidth;                lineHeight = Math.max(lineHeight, childHeight);            }            //如果是最后一个，则将当前记录得最大宽度和当前lineWidth做比较            if(i == cCount - 1){                width = Math.max(width, lineWidth);                height+=lineHeight;            }        }       setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY )? sizeWidth:width,(modeHeight == MeasureSpec.EXACTLY )? sizeHeight:height);    }    /**     * 存储所有的view     * 按行记录     *     */    private List<List<View>> mAllViews = new ArrayList<>();    //记录每一行的最大高度    private List<Integer> mLineHeight = new ArrayList<>();    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        mAllViews.clear();        mLineHeight.clear();        int width = getWidth();        int lineWidth = 0,lineHeight = 0;        // 存储每一行所有的childView        List<View> lineViews = new ArrayList<>();        int cCount = getChildCount();        //遍历所有的孩子        for (int i = 0; i < cCount; i++) {            View child = getChildAt(i);            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();            int childWidth = child.getMeasuredWidth();            int childHeight = child.getMeasuredHeight();            //如果 需要换行            if(childWidth +lp.leftMargin + lp.rightMargin+lineWidth > width){                //记录这一行所有的View 以及最大的高度                mLineHeight.add(lineHeight);                //将当前的childView保存，然互开启新的ArrayList保存下一行的childView                mAllViews.add(lineViews);                lineWidth = 0;//重置行宽                lineViews = new ArrayList<>();            }            //如果不需要换行，则累加            lineWidth += childWidth + lp.leftMargin+ lp.rightMargin;            lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);            lineViews.add(child);        }        //记录最后一行        mLineHeight.add(lineHeight);        mAllViews.add(lineViews);        int left =0, top = 0;        //得到总行数        int  lineNums = mAllViews.size();        for (int i = 0; i < lineNums; i++) {            //每一行的所有的views            lineViews = mAllViews.get(i);            //当前行的最大高度            lineHeight = mLineHeight.get(i);            //遍历当前所有的view            for (int j = 0; j < lineViews.size(); j++) {                View child = lineViews.get(j);                if(child.getVisibility() == View.GONE){                    continue;                }                MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();                //计算childView 的left，top，right，bottom                int lc = left + lp.leftMargin;                int tc =top+lp.topMargin;                int rc = lc + child.getMeasuredWidth();                int bc = tc + child.getMeasuredHeight();                child.layout(lc,tc,rc,bc);                left += child.getMeasuredWidth() + lp.rightMargin + lp.leftMargin;            }            left = 0;            top += lineHeight;        }    }}

效果