FlowLayout：Android自定义ViewGroup实现

需求

我们需要实现一个自定义的Layout，该Layout可以容纳若干个宽高不等的子元素，元素按照从左到右的顺序排列，当元素超出屏幕显示范围时，换一行继续显示，like this

View和ViewGroup

Android的界面都是由View、ViewGroup及其派生类组合而成，其中，View是ViewGroup及其他UI组件的基类。ViewGroup是放置View的容器，在编写xml布局文件的时候，View所有以layout开头的属性都是提供给ViewGroup的，ViewGroup根据这些属性来给childView计算出测量模式和建议的宽高，并将childView绘制在屏幕上的适当位置

UI是怎样被绘制出来的

UI组件渲染过程可分为三个阶段：测量、布局、绘制.

Measure过程

Measure过程的任务是根据ViewGroup给的参数计算出视图自身的大小，在View中与Measure过程相关的方法有measure()、onMeasure()和setMeasureDimension()，其中onMeasure()是我们需要在自定义视图的时候重写的方法，在measure()方法中，onMeasure()被调用，在onMeasure()计算完毕后，调用setMeasureDimension()设置自身大小。
自身大小的计算结果取决于视图本身所占区域的大小及ViewGroup传递过来的MeasureMode值，其中MeasureMode可能取值为UNSPECIFIED、EXACTLY和AT_MOST。

UNSPECIFIED

表示childView可将自身大小设置为自身想要的任意大值，一般出现于AdapterView的item的高度属性中

EXACTLY

表示childView应该将自身大小设置为ViewGroup指定的大小，当View指定了自身宽或高为精确的值或match_parent时，ViewGroup会传入该Mode

AT_MOST

表示childView可以在一个限定的最大值范围内设置自己的大小，当View指定自身宽或高为wrap_content时，ViewGroup会传入该Mode
Measure过程结束后，视图大小即被确定。

Layout过程

Layout过程的任务是决定视图的位置，framework调用View的layout()方法来计算位置，在layout()方法中，onLayout()方法会被调用，这个方法是需要View的派生类重写的，在此实现布局逻辑。
Layout是一个自顶向下递归的过程，先布局容器，再布局子视图，因此，ViewGroup的位置一定程度上决定了它的childView的位置。
Layout过程结束后，视图在屏幕上的位置即被确定。

Draw过程

Draw过程的任务是根据视图的尺寸和位置，在相应的区域内绘制自身样式。同样的，framework会调用onDraw()方法，我们需要重写onDraw()方法实现绘制逻辑，在View中，可以通过调用invalidate()方法触发视图重绘。

让View支持Padding和Margin

如上文所说，所有以layout开头的属性都是交由容器处理的，layout_margin就是这样一个属性，在自定义View中可通过getLayoutParams()返回的LayoutParams对象来获取到视图各个方向的margin值，容器只需在layout过程中将margin值作为偏移量加入即可实现将视图放置在正确位置。
Padding是视图的自有属性，描述其各个方向边界到内部内容的距离，在代码中可通过getPaddingTop(/Left/Right/Bottom)()来获取各个方向的padding值，在Measure过程中，需要注意View尺寸包含内容区域加上padding区域，padding区域内的内容将不会被绘制。

Step by Step实现需求

onMeasure

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int contentWidth = MeasureSpec.getSize(widthMeasureSpec);
        int contentHeight = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //Padding支持
        int topOffset = getPaddingTop();
        int leftOffset = getPaddingLeft();
        int selfWidth = 0, selfHeight = 0;
        int currentLineWidth = 0, currentLineHeight = 0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE)
                continue;
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
            int childWidth = Math.max(child.getMeasuredWidth(), getSuggestedMinimumWidth()) + layoutParams.leftMargin + layoutParams.rightMargin;
            int childHeight = Math.max(child.getMeasuredHeight(), getSuggestedMinimumHeight()) + layoutParams.topMargin + layoutParams.bottomMargin;
            if (currentLineWidth + childWidth > contentWidth  - getPaddingLeft() - getPaddingRight()) {
                //需要另起一行
                currentLineWidth = Math.max(currentLineWidth,childWidth);
                selfWidth = Math.max(selfWidth, currentLineWidth);
                currentLineWidth = childWidth;
                selfHeight += currentLineHeight;
                currentLineHeight = childHeight;
                //Measure的时候顺便把位置计算出来
                child.setTag(new Location(child, leftOffset, selfHeight + topOffset, childWidth + leftOffset, selfHeight + child.getMeasuredHeight() + topOffset));
            } else {
                //不需要换行
                child.setTag(new Location(child, currentLineWidth + leftOffset, selfHeight + topOffset, currentLineWidth + child.getMeasuredWidth() + topOffset, selfHeight + child.getMeasuredHeight() + topOffset));
                currentLineWidth += childWidth;
                currentLineHeight = Math.max(currentLineHeight, childHeight);
            }
            if (i == childCount - 1) {
                //到最后一个child的时候更新高度
                sselfWidth = Math.max(currentLineWidth, selfWidth) + getPaddingRight() + getPaddingLeft();
                selfHeight += currentLineHeight + getPaddingTop() + getPaddingBottom();
            }
        }
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? contentWidth : selfWidth,
                heightMode == MeasureSpec.EXACTLY ? contentHeight : selfHeight);
    }

经过如上处理，ViewGroup的尺寸和childView的位置便被计算出来，并且ViewGroup可根据childView排列情况自动调整自身宽高。

onLayout

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            if (child.getVisibility() != GONE) {
                Location location = (Location) child.getTag();
                child.layout(location.left, location.top, location.right, location.bottom);
            }
        }
    }

在onMeasure()中我们已经顺手计算出了各个childView的位置信息，所以在Layout步骤中只需将其按照位置摆放到相应区域即可。

draw

draw方法是由framework调用，在ViewGroup的onDraw()方法中绘制的内容最后会被作为ViewGroup的背景，所以如果需要更改背景内容可重写该方法。draw()中会递归调用childView的onDraw()方法，调用完毕后ViewGroup本身和childView都绘制完毕，一次渲染过程到此结束。

附加特性

可通过对ViewGroup设置LayoutAnimation来为childView显示的过程附加动画，一个简单的例子：

public FlowLayout(Context context) {
        super(context);
        setLayoutAnimation(
                new LayoutAnimationController(AnimationUtils.loadAnimation(
                        getContext(), R.anim.list_animation), 0.3f));
    }

可以重写addView()方法为动态添加的View附加动画，重写removeView()方法实现移除View时的附加动画。

实现效果