关于FlowLayout的一点完善

FlowLayout，自适应内容的Layout，当内容到达右端时会自动换行，先看效果。

1608741472944[1].gif

使用：

1.给FlowLayout动态加入View

 for (int i = 0; i < 9; i++) {
            ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(190, ViewGroup.LayoutParams.WRAP_CONTENT);
            if (i == 2) {
                marginLayoutParams.height = 200;
            } else {
                marginLayoutParams.height =  ViewGroup.LayoutParams.WRAP_CONTENT;
            }
            Button button = new Button(getContext());
            button.setBackgroundResource(R.drawable.shape_button);
            button.setText("item: " + i);
            mBinding.flowLayout.addView(button, marginLayoutParams);
        }

2.也可以直接在xml文件中写死

 <com.snowice.xui_lib.widget.flowlayout.FlowLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:horizontalGravity="left">

            <Button
                android:id="@+id/btn_setting_gravity_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="5dp"
                android:text="left" />

        ...
        </com.snowice.xui_lib.widget.flowlayout.FlowLayout>

实现过程：

1.自定义属性，只有两个，水平和竖直方向的Gravity

    <declare-styleable name="FlowLayout">
        <attr name="horizontalGravity" format="enum">
            <enum name="left" value="1" />
            <enum name="right" value="2" />
            <enum name="center" value="3" />
            <enum name="both" value="4" /><!--左右两端对齐，中间间隔相同 [0 0 0 0]-->
            <enum name="gap" value="5" /><!--间隔相同 [ 0 0 0 0 ]-->
            <enum name="margin" value="6" /><!--view平分空间，[ 0  0  0  0 ]-->
        </attr>

        <attr name="verticalGravity" format="enum">
            <enum name="top" value="1" />
            <enum name="center" value="2" />
            <enum name="bottom" value="3" />
        </attr>
    </declare-styleable>

2.代码

package com.snowice.xui_lib.widget.flowlayout;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import com.snowice.xui_lib.R;

import java.util.ArrayList;

public class FlowLayout extends ViewGroup {
    //水平方向的Gravity
    public static final int GRAVITY_H_LEFT = 1;
    public static final int GRAVITY_H_RIGHT = 2;
    public static final int GRAVITY_H_CENTER = 3;
    public static final int GRAVITY_H_BOTH = 4;
    public static final int GRAVITY_H_GAP = 5;
    public static final int GRAVITY_H_MARGIN = 6;
    //竖直方向的Gravity
    public static final int GRAVITY_V_TOP = 1;
    public static final int GRAVITY_V_CENTER = 2;
    public static final int GRAVITY_V_BOTTOM = 3;


    private int mHorGravity;
    private int mVerGravity;

    public FlowLayout(Context context) {
        this(context, null);
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.FlowLayoutStyle);
    }

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    /**
     * @param context      上下文
     * @param attrs        xml定义的属性集合，包含（key-value）
     * @param defStyleAttr 系统当前Theme下默认的属性集合（包含key-value）
     * @param defStyleRes  备用的style（包含key-value）
     */
    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
        mHorGravity = typedArray.getInt(R.styleable.FlowLayout_horizontalGravity, GRAVITY_H_LEFT);
        mVerGravity = typedArray.getInt(R.styleable.FlowLayout_verticalGravity, GRAVITY_V_TOP);
        typedArray.recycle();
    }

    @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);

        Log.e("onMeasure", "sizeWidth: " + sizeWidth + ", sizeHeight: " + sizeHeight);

        //最终的宽高
        int finalWidth = 0;
        int finalHeight = 0;

        int lineWidth = 0;
        int lineHeight = 0;

        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);

            measureChild(child, widthMeasureSpec, heightMeasureSpec);

            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
            int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();

            if (childRealWidth + lineWidth <= sizeWidth - getPaddingLeft() - getPaddingRight()) {
                //不换行
                lineWidth += childRealWidth;
                lineHeight = Math.max(lineHeight, childRealHeight);
            } else {
                //换行时，会获得上一行的宽高
                //宽度取最大值
                finalWidth = Math.max(finalWidth, lineWidth);
                //高度累加
                finalHeight += lineHeight;
                //重置行宽和行高
                lineWidth = childRealWidth;
                lineHeight = childRealHeight;
            }

            //如果只有一行或循环到了末尾一行，则该行高度得不到统计，需要另外计算
            if (i == getChildCount() - 1) {
                finalHeight += lineHeight;
            }
        }
        Log.e("onMeasure", "finalWidth: " + finalWidth + ", finalHeight: " + finalHeight);
        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY ? sizeWidth : finalWidth + getPaddingLeft() + getPaddingRight()),
                (modeHeight == MeasureSpec.EXACTLY ? sizeHeight : finalHeight + getPaddingTop() + getPaddingBottom())
        );
    }

    //每一行的views，临时存储使用
    private ArrayList<View> lineViewsList;

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.e("onLayout", "width: " + (r - l));
        Log.e("onLayout", "height: " + (b - t));

        int width = r - l - getPaddingLeft() - getPaddingRight();
//        int height = getHeight() - getPaddingTop() - getPaddingBottom();

        int childCount = getChildCount();
        int countLineHeight = getPaddingTop();//对高度累加
        int lineWidth = 0;
        int lineHeight = 0;
        if (lineViewsList == null) {
            lineViewsList = new ArrayList<>();
        } else {
            lineViewsList.clear();
        }
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);

            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
            int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();

            if (childRealWidth + lineWidth <= width) {
                // 不换行
                // 将同一行的View添加到容器中
                lineViewsList.add(child);
                // 行宽累加，行高取最大的值
                lineWidth += childRealWidth;
                lineHeight = Math.max(lineHeight, childRealHeight);
            } else {
                // 换行
                // 计算上一行所有View的位置
                layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
                lineViewsList.clear();
                lineViewsList.add(child);
                //累加高度
                countLineHeight += lineHeight;
                child.layout(lp.leftMargin,
                        countLineHeight + lp.topMargin,
                        child.getMeasuredWidth() + lp.leftMargin,
                        countLineHeight + lp.topMargin + child.getMeasuredHeight());
                //重置行宽和行高
                lineWidth = childRealWidth;
                lineHeight = childRealHeight;
            }
            //如果只有一行或循环到了末尾一行，则该行高度得不到统计，需要另外计算
            if (i == childCount - 1) {
                layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
                lineViewsList.clear();
            }
        }
    }

    /**
     * 为一行内所有的View执行layout方法
     *
     * @param totalWidth 一行可用的总宽度，已经减去了paddingLeft和paddingRight
     * @param top        这一行的最顶部位置
     * @param offset     偏移位置，即据左端的距离，为paddingLeft
     * @param lineWidth  所有View宽度相加（包含marginLeft和marginRight）
     * @param lineHeight 这一行所有View的高度最大值，该值作为该行的行高
     * @param viewsList  所有View的集合
     */
    private void layoutChildren(int totalWidth, int top, int offset, int lineWidth, int lineHeight, ArrayList<View> viewsList) {
        /*
        gravity的意思大致如下图所示：
        left:   [0000 ]
        right:  [ 0000]
        center: [ 0000 ]
        both:   [0 0 0 0]
        gap:    [ 0 0 0 0 ]
        margin: [ 0  0  0  0 ]
         */
        //只要确定第一个View的位置，以及View之间的间隔，就能确定每一个View的位置
        //start：第一个View的起始位置
        //gap：View之间的间隔
        int start = 0;
        int gap = 0;
        if (mHorGravity == GRAVITY_H_LEFT) {
            start = 0;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_RIGHT) {
            start = totalWidth - lineWidth;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_CENTER) {
            start = (totalWidth - lineWidth) / 2;
            gap = 0;
        } else if (mHorGravity == GRAVITY_H_BOTH) {
            start = 0;
            if (viewsList.size() == 1) {
                //只有一个View时，和GRAVITY_LEFT一样
                gap = 0;
            } else {
                gap = (totalWidth - lineWidth) / (viewsList.size() - 1);
            }
        } else if (mHorGravity == GRAVITY_H_GAP) {
            int i = (totalWidth - lineWidth) / (viewsList.size() + 1);
            start = i;
            gap = i;
        } else if (mHorGravity == GRAVITY_H_MARGIN) {
            int i = (totalWidth - lineWidth) / viewsList.size();
            start = i / 2;
            gap = i;
        }

        start += offset;

        //startX：这一行每一个View的水平方向的起始位置
        int startX = start;
        for (int i = 0; i < viewsList.size(); i++) {
            View child = viewsList.get(i);
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int realHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
            //竖直方向上不同Gravity对应的起始位置不同
            int layoutTop = 0;
            if (mVerGravity == GRAVITY_V_TOP) {
                layoutTop = top + lp.topMargin;
            } else if (mVerGravity == GRAVITY_V_CENTER) {
                layoutTop = top + lp.topMargin + (lineHeight - realHeight) / 2;
            } else if (mVerGravity == GRAVITY_V_BOTTOM) {
                layoutTop = top + lp.topMargin + (lineHeight - realHeight);
            }
            child.layout(startX + lp.leftMargin,
                    layoutTop,
                    startX + lp.leftMargin + child.getMeasuredWidth(),
                    layoutTop + child.getMeasuredHeight());
            //计算下一个View的起始位置
            startX += lp.leftMargin + lp.rightMargin + child.getMeasuredWidth() + gap;
        }
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    public int getHorGravity() {
        return mHorGravity;
    }

    public void setHorGravity(int horGravity) {
        if (this.mHorGravity != horGravity) {
            this.mHorGravity = horGravity;
            requestLayout();
        }
    }

    public int getVerGravity() {
        return mVerGravity;
    }

    public void setVerGravity(int verGravity) {
        if (this.mVerGravity != verGravity) {
            this.mVerGravity = verGravity;
            requestLayout();
        }
    }
}

其中的注释比较详细，不难理解。
难点1：在于测量和布局时，需要循环遍历所有子View，累加子View的宽度，再和控件的宽度做比较，当控件宽度不足时，需要换行，换行时又需要将高度累加。
难点2：布局时，针对不同的Gravity，不论是水平方向还是竖直方向，都需要分别计算其开始位置，不通的布局策略影响布局时子View的位置。