自定义ViewGroup做标签容器

先看一下效果吧

flow.gif

流式排列，这种应用场景还是很多的，当一行显示不下时，再切换到下一行。这里有两种实现方式：

第一种官方实现方式

使用谷歌新开源的FlexboxLayout，这种方式很简单，现成的直接拿来用就好，如下方式引用

compile 'com.google.android:flexbox:0.1.2'

xml文件当中这样写

第二种实现方式

使用自定义ViewGroup的方式，也是我要重点说的，因为我们可以学习到自定义的ViewGroup啊。一般来说，自定义ViewGroup的步骤就是onMeasure->onLayout->dispatchDraw这几个方法，也就是测量，定位，绘制这几个步骤。
这里还是借大神的话说吧

1、ViewGroup的职责是啥？
　　ViewGroup相当于一个放置View的容器，并且我们在写布局xml的时候，会告诉容器（凡是以layout为开头的属性，都是为用于告诉容器的），我们的宽度（layout_width）、高度（layout_height）、对齐方式（layout_gravity）等；当然还有margin等；于是乎，ViewGroup的职能为：给childView计算出建议的宽和高和测量模式 ；决定childView的位置；为什么只是建议的宽和高，而不是直接确定呢，别忘了childView宽和高可以设置为wrap_content，这样只有childView才能计算出自己的宽和高。
2、View的职责是啥？
　　View的职责，根据测量模式和ViewGroup给出的建议的宽和高，计算出自己的宽和高；同时还有个更重要的职责是：在ViewGroup为其指定的区域内绘制自己的形态。
3、ViewGroup和LayoutParams之间的关系？
　　大家可以回忆一下，当在LinearLayout中写childView的时候，可以写layout_gravity，layout_weight属性；在RelativeLayout中的childView有layout_centerInParent属性，却没有layout_gravity，layout_weight，这是为什么呢？这是因为每个ViewGroup需要指定一个LayoutParams，用于确定支持childView支持哪些属性，比如LinearLayout指定LinearLayout.LayoutParams等。如果大家去看LinearLayout的源码，会发现其内部定义了LinearLayout.LayoutParams，在此类中，你可以发现weight和gravity的身影。
2、View的3种测量模式
　　上面提到了ViewGroup会为childView指定测量模式，下面简单介绍下三种测量模式：
EXACTLY：表示设置了精确的值，一般当childView设置其宽、高为精确值、match_parent时，ViewGroup会将其设置为EXACTLY；
AT_MOST：表示子布局被限制在一个最大值内，一般当childView设置其宽、高为wrap_content时，ViewGroup会将其设置为AT_MOST；
UNSPECIFIED：表示子布局想要多大就多大，一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此种模式比较少见。
注：上面的每一行都有一个一般，意思上述不是绝对的，对于childView的mode的设置还会和ViewGroup的测量mode有一定的关系；当然了，这是第一篇自定义ViewGroup，而且绝大部分情况都是上面的规则，所以为了通俗易懂，暂不深入讨论其他内容。
3、从API角度进行浅析
　　上面叙述了ViewGroup和View的职责，下面从API角度进行浅析。
View的根据ViewGroup传人的测量值和模式，对自己宽高进行确定（onMeasure中完成），然后在onDraw中完成对自己的绘制。
ViewGroup需要给View传入view的测量值和模式（onMeasure中完成），而且对于此ViewGroup的父布局，自己也需要在onMeasure中完成对自己宽和高的确定。此外，需要在onLayout中完成对其childView的位置的指定。

下面就看实现方式吧，代码是最好的老师，就算照着打一遍其实也在不知不觉中学习了

//存储所有的子Viewprivate
 List> allViews = new ArrayList>();
//存储每一行的最高值
private List lineHeights = new ArrayList<>();
@Overrideprotected 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;
    int height = 0;
    int lineWidth = 0;
    int lineHeight = 0;
    int cCount = getChildCount();
    for (int i = 0; i < cCount; i++) {
        View child = getChildAt(i);
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        int childWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
        int childHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
        //判断是否要换行了
        if (lineWidth + childWidth > sizeWidth) {
            width = Math.max(lineWidth, childWidth);
            lineWidth = childWidth;
            height += lineHeight;
            lineHeight = childHeight;
        } else {
            lineWidth += childWidth;
            lineHeight = Math.max(lineHeight, childHeight);//每一行的高度是子view的最大值
        }
       //判断最后一行的高度和宽度加进去
        if (i == cCount - 1) {
            width = Math.max(width, lineWidth);
            height += lineHeight;
            lineHeights.add(lineHeight);
        }
    }
    setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
}

还有onLayout方法

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {
    allViews.clear();
    lineHeights.clear();
    List lineViews = new ArrayList();
    int left = 0;
    int top = 0;
    int lineHeight = 0;
    int width = getWidth();
    int cCount = getChildCount();
    int lineWidth = 0;
//这里就是为了取得每一行的view，每一行的适应高度，其他方式获得亦可
    for (int i = 0; i < cCount; i++) {
        View child = getChildAt(i);
        child.setTag(false);
        int childWidth = child.getMeasuredWidth();
        int childHeight = child.getMeasuredHeight();
        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) {
            lineHeights.add(lineHeight);
            allViews.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);
       //处理点击事件
        child.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean tag = !(boolean) v.getTag();
                if (tag) {
 v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg_select));
                } else {
                    v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg));
                }
                v.setTag(tag);
            }
        });
    }
    //最后一行的标签加进去
    lineHeights.add(lineHeight);
    allViews.add(lineViews);
    Log.e("xxx", "" + lineHeights.size() + "," + allViews.size());    int lines = allViews.size();
    //这里是为了对每一个子View根据left，top进行定位
    for (int i = 0; i < allViews.size(); i++) {
        lineViews = allViews.get(i);
        Log.e("xx", "-----" + lineViews.size());
        //遍历每一行子View
        lineHeight = lineHeights.get(i);
        for (int j = 0; j < lineViews.size(); j++) {
            View child = lineViews.get(j);
            if (child.getVisibility() == View.GONE) {
                continue;
            }
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int lc = left + lp.leftMargin;
            int tc = top + lp.topMargin;
            int rc = lc + child.getMeasuredWidth();
            int bc = tc + child.getMeasuredHeight();
            Logger.i("lines:" + lines + ",layout:" + lc + "," + tc + "," + rc + "," + bc);
            child.layout(lc, tc, rc, bc);
            left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
        }
        left = 0;
        top += lineHeight;
    }
}

真正的自己写下来，理解到每一行的操作，发现也没有那么难了，对自己的自定义ViewGroup的能力也是一种提升了。

github代码地址