自定义View流式布局FlowLayoutView

流式布局FlowLayoutView
注：本文控件非博主原创，旨在一同学习提高

介绍：
在app的设计中，通常会遇到设计搜索、标签的情况，一般标签条目的长度都是不确定的，这种时候就需要用到流式布局去显示。

分析：
原理分析。对于该控件，无非就是获取到每一个子view的宽度，在显示时当一行剩余的空间不足以显示下一个条目时自动换行。主要是两点。

-在onMeasure()方法中，测量子控件的宽度，一行中需要多大的宽度，一行显示多少个子控件。以及当前控件的大小。

-在onLayout()中，对子控件进行布局。

实战：
首先是onMeasure()方法

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewLines.clear();
        //获取控件的宽度
        int width = MeasureSpec.getSize(widthMeasureSpec);
        //去除左右padding值，真实的子view容器的宽度
        int noPaddingWidth = width - getPaddingLeft() - getPaddingRight();
        int childCount = getChildCount();
        Line line=new Line();
        for (int i=0;i<childCount;i++){
            View childAt = getChildAt(i);
            /*
            只有在一个控件的 onMeasure()方法被执行过后，才能使用getMeasuredWidth()取得正确的值，
            child.measure(childWidthSpec, childHeightSpec); 这个方法里面会调用onMeasure()。
             */
            childAt.measure(0,0);
            //一行中的第一个view,没有判断是否超过了父控件的宽度
            if (line.getViews().size()==0){
                line.addLineView(childAt);
            }
            //超出范围后吧line添加到viewLines集合中，并创建新的Line对象，继续添加子view
            else if (line.getWidth()+horizontalSpacing+childAt.getMeasuredWidth()> noPaddingWidth){
                viewLines.add(line);

                line = new Line();
                line.addLineView(childAt);
            }else{
                line.addLineView(childAt);
            }
            //当前的子view为最后一个的时候，把这个line添加到viewLines中，否则最后一行不显示
            if(i==(getChildCount()-1)){
                viewLines.add(line);//保存最后的line对象
            }
        }
        int height = getPaddingTop() +getPaddingBottom();
        for (int i = 0;i<viewLines.size();i++){
            //此处getHeight为每个line中子view最大的height；
            height += viewLines.get(i).getHeight();
        }
        height += (viewLines.size()-1)*verticalSpacing;
        width += getPaddingLeft() + getPaddingRight();
        //设定控件大小
        setMeasuredDimension(width,height);
    }

再来是onLayout()方法

 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        //根据viewLines中的line数量进行布局
        for(int i = 0; i<viewLines.size();i++){
            Line line = viewLines.get(i);
            if (i>0){
                //每加一行paddingTop需要空出上一行的位置
                paddingTop += viewLines.get(i-1).getHeight()+verticalSpacing;
            }


            List<View> views = line.getViews();
            //1、留白的总宽度
            int lineRemainSpacing = getLineRemainSpacing(line);
            //2、单个item应添加的留白
            int itemRemainSpacing = lineRemainSpacing/views.size();

            for (int j = 0;j<views.size();j++){
                View view = views.get(j);
                //3、改变item的宽度
                int childWidth = MeasureSpec.makeMeasureSpec(view.getMeasuredWidth()+itemRemainSpacing, MeasureSpec.EXACTLY);
                view.measure(childWidth,0);
                //每一行的第一个放在最左边
                if (j==0){
                    view.layout(paddingLeft,paddingTop,paddingLeft+view.getMeasuredWidth(),
                            paddingTop+view.getMeasuredHeight());
                }else {
                    //剩余的view很据前一个view的位置来，确定自己的位置
                    View preView = views.get(j - 1);
                    int preLeft = preView.getRight()+horizontalSpacing;
                    view.layout(preLeft,paddingTop,preLeft+view.getMeasuredWidth(),
                            paddingTop+view.getMeasuredHeight());
                }
            }
        }
    }

    private int getLineRemainSpacing(Line line){
        return getMeasuredWidth()-getPaddingLeft()-getPaddingRight()-line.getWidth();
    }

另外还有Line对象的代码

private class Line {

        private List<View> views = new ArrayList<View>();
        private int width;
        private int height;

        public int getHeight() {
            return height;
        }

        public void setHeight(int height) {
            this.height = height;
        }

        public List<View> getViews() {
            return views;
        }

        public void setViews(List<View> views) {
            this.views = views;
        }

        public int getWidth() {
            return width;
        }

        public void setWidth(int width) {
            this.width = width;
        }

        public void addLineView(View childAt) {
            if (!views.contains(childAt)){
                views.add(childAt);

                if (views.size() == 1){
                    width = childAt.getMeasuredWidth();
                }else {
                    width += childAt.getMeasuredWidth()+horizontalSpacing;
                }
                height = Math.max(height,childAt.getMeasuredHeight());
            }
        }

好了 现在你可以自由添加view到这个控件中去了

希望能和大家一同提高，再见！