AndroidUI系列-ViewGroup流式布局

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

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

就像备注写的一样，
首先需要准备的条件：
一个List<List< View > > 来缓存多少行。
一个List<Integer> 来缓存每一行的高度。
一个List<View> 来缓存每一行的子控件View。
相对于每一行来说，需要一个变量缓存当前行的宽度，一个变量缓存当前行的最大高度。

换行的条件：
当前行的宽度加上下一个子控件的宽度，超过了当前控件允许的最大宽度。那就换行。

那么直接开始撸吧。

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<List<View>> mLineViewsList = new ArrayList<>();    //用于缓存每一行最大的高度    private List<Integer> 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<View> 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<View> 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背景：

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

textView的样式.

<style name="text_flag">        <item name="android:background">@drawable/flag</item>        <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:textColor">#fff</item>    </style>

activity的布局：

<?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:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.flowlayout.MainActivity">    <com.example.administrator.flowlayout.FlowLayout        android:id="@+id/flowlayout"        android:layout_width="fill_parent"        android:layout_height="wrap_content">        <TextView            style="@style/text_flag"            android:text="阿萨德 "/>        <TextView            style="@style/text_flag"            android:text="我阿萨德阿萨德的"/>        <TextView            style="@style/text_flag"            android:textSize="16sp"            android:text="你阿萨德阿萨德的"/>        <TextView            style="@style/text_flag"            android:textSize="19sp"            android:text="阿萨德 阿萨德"/>        <TextView            style="@style/text_flag"            android:text="阿萨德阿萨德"/>        <TextView            style="@style/text_flag"            android:text="阿大声道"/>        <TextView            style="@style/text_flag"            android:text="阿大声道"/>        <TextView            style="@style/text_flag"            android:text="为全文完请二位"/>        <TextView            style="@style/text_flag"            android:text="谁是谁"/>        <TextView            style="@style/text_flag"            android:text="撒大声地"/>        <TextView            style="@style/text_flag"            android:text="阿大声道"/>        <TextView            style="@style/text_flag"            android:text="大法师"/>        <TextView            style="@style/text_flag"            android:text="12123"/>        <TextView            style="@style/text_flag"            android:text="sadsa"/>    </com.example.administrator.flowlayout.FlowLayout></LinearLayout>

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