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>

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