自定义View之流式布局FlowLayout

自定义View之流式布局FlowLayout

在我们往常的app设计中，对于一些搜索关键字的推荐，标签等，往往宽度都是不确定的，且当一行满之后会自动换行，类似下面这样，

那么今天我们就来实现这个效果。

首先是原理分析。对于该控件，无非就是我们需要获取到每一个子控件的宽，在显示的时候，当某一行的剩余宽度不足以显示下一个控件时，我们让其显示在下一行，继续提炼，主要就是一下两点。
- 在onMeasure()方法中，测量子控件，将其分类，一行显示多少控件，一行需要多大的高度。以及当前控件的大小。
- 在onLayout()中，对子控件进行布局。

那么，让我们开始吧。

首先看一下使用方式：

    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        setData();        /**         * 查找控件         */        mFlowLayout = ((FlowLayout) findViewById(R.id.fl));        /**         * 添加数据         */        mFlowLayout.addData(names);        /**         * 设置点击事件         */        mFlowLayout.setFlowLayoutListener(new FlowLayout.FlowLayoutListener() {            @Override            public void onItemClick(View view, int poition) {                Toast.makeText(getApplicationContext(),names.get(poition),Toast.LENGTH_SHORT).show();            }        });    }

根据我们的提炼的两点，分别实现，我们看一下字段，

 /**     * 所有子View，按行记录     */    private List<List<View>> mAllViews = new ArrayList<List<View>>();    /**     * 记录每一行的最大高度     */    private  List<Integer> mLineHeight = new ArrayList<>();    /**     * 标签点击的回调     */    private FlowLayoutListener mFlowLayoutListener;

总共两个字段，一个按行进行存储的所有View的集合，一个用来存储每一行的高度。

先看onMeasure()

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mAllViews.clear();        mLineHeight.clear();        // 获取当前父容器给当前控件的大小和模式        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);        //每一行的List        List<View> lineView = new ArrayList<>();        //   Log.e(TAG, sizeWidth + "," + sizeHeight);        // 如果是warp_content情况下，记录宽和高        int width = 0;        int height = 0;        /**         * 记录每一行的宽度，width不断取最大宽度         */        int lineWidth = 0;        /**         * 每一行的高度，累加至height         */        int lineHeight = 0;        /**         * 当前控件的宽度         */        int cCount = getChildCount();        // 遍历每个子元素        for (int i = 0; i < cCount; i++)        {            View child = getChildAt(i);            // 测量每一个child的宽和高            measureChild(child, widthMeasureSpec, heightMeasureSpec);            // 得到child的lp            MarginLayoutParams lp = (MarginLayoutParams) child                    .getLayoutParams();            // 当前子空间实际占据的宽度            int childWidth = child.getMeasuredWidth() + lp.leftMargin                    + lp.rightMargin;            // 当前子空间实际占据的高度            int childHeight = child.getMeasuredHeight() + lp.topMargin                    + lp.bottomMargin;            /**             * 如果加入当前child，则超出最大宽度，则的到目前最大宽度给width，类加height 然后开启新行             */            if (lineWidth + childWidth > sizeWidth)            {                width = Math.max(lineWidth,width);// 取最大的                lineWidth = childWidth; // 重新开启新行，开始记录                //记录View                mAllViews.add(lineView);                lineView = new ArrayList<>();                lineView.add(child);                // 叠加当前高度，                height += lineHeight;                mLineHeight.add(lineHeight);                // 开启记录下一行的高度                lineHeight = childHeight;            } else            // 否则累加值lineWidth,lineHeight取最大高度            {                lineView.add(child);                lineWidth += childWidth;                lineHeight = Math.max(lineHeight, childHeight);            }            // 如果是最后一个，则将当前记录的最大宽度和当前lineWidth做比较            if (i == cCount - 1)            {                width = Math.max(width, lineWidth);                height += lineHeight;                mAllViews.add(lineView);                mLineHeight.add(lineHeight);            }        }        //设置当前控件的宽高        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth                : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight                : height);    }

onMeasure中，我们首先清空我们两个字段中的内容，因为，在我之前的自定义View之垂直滑动的ViewPager中，发现onLayout和onMeasure()会多次被调用。所以，这一步必不可少。

其次，我们获取当前控件的大小模式，为什么呢，因为，当控件是固定值时，或者match_parent，我们无需管理其大小，但如果属性为wrap_content，我们需要根据，子控件所占位置的大小进行手动控制。（备注：如果为wrap_content，其获取的宽度仍然为屏幕的宽度，高度是当前可显示的最大大小）。

在for循环中，我们测量子类的大小，并获取到MarginLayoutParams用来获取该控件的上，下，左，右的间距。然后进行判断
- 如果当前控件加上其之前的控件的宽度，大于了屏幕的宽度，则我们将当前宽度和之前记录的每一行的宽度比较，去最大值。同时开启新行，添加当前控件的宽度。将保存一行View的list添加到总集合中，开启新的list，添加当前childView到list中。记录高度，因为高度是叠加的，不需要取最大值。同时记录当前childView的高度。
- 如果控件加上之前的控件的宽度仍然小于屏幕的宽度，则叠加这一行的宽度，添加到集合中，同时高度去最大值。

我们需要记录最后一行的高度，以及将控件添加到对应集合中。因为最后一行肯定不满足大于屏幕宽度的条件，但我们需要把他加入到我们数据集合中。

最后，设置当前的宽高，如果mode是EXACTLY,则表示宽高是确定的，我们无需设置。否则，设置为我们测量的值。

下面看一下onLayout()方法

  @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        // 存储每一行所有的childView        List<View> lineViews = new ArrayList<View>();        int lineHeight = 0;        int left = 0;        int top = 0;        // 得到总行数        int lineNums = mAllViews.size();        for (int i = 0; i < lineNums; i++)        {            // 每一行的所有的views            lineViews = mAllViews.get(i);            // 当前行的最大高度            lineHeight = mLineHeight.get(i);            // 遍历当前行所有的View            for (int j = 0; j < lineViews.size(); j++)            {                View child = lineViews.get(j);                if (child.getVisibility() == View.GONE)                {                    continue;                }                MarginLayoutParams lp = (MarginLayoutParams) child                        .getLayoutParams();                //计算childView的left,top,right,bottom                int lc = left + lp.leftMargin;                int tc = top + lp.topMargin;                int rc =lc + child.getMeasuredWidth();                int bc = tc + child.getMeasuredHeight();                child.layout(lc, tc, rc, bc);                left += child.getMeasuredWidth() + lp.rightMargin                        + lp.leftMargin;            }            left = 0;            top += lineHeight;        }    }

onLayout()方法就比较简单了，根据我们的mAllViews，共有多少行，for循环遍历每一行，利用layout方法遍历即可。

控件的显示已经搞定，下面就是点击事件的处理，如果我们把其交给调用者的话，无疑是一种很糟糕的行为，所以我们定义接口进行回调。

   /**     * 标签点击的回调     */    public interface  FlowLayoutListener{        void onItemClick(View view, int poition);    }

    public void setFlowLayoutListener(FlowLayoutListener flowLayoutListener){        mFlowLayoutListener = flowLayoutListener;        for (int i = 0;i<getChildCount();i++){            getChildAt(i).setOnClickListener(this);        }    }

我们在setFlowLayoutListener中，保存接口对象，同时遍历每一个View设置点击。

 @Override    public void onClick(View v) {        for (int i = 0;i<getChildCount();i++){            if(getChildAt(i)==v){                mFlowLayoutListener.onItemClick(v,i);                break;            }        }    }

在onClick方法中，我们利用遍历的方法，通过比对点击的View和childView是否是同一个对象，如果是，则返回第几个childView。

加入添加数据的方法

    /**     * 添加数据     */    public void addData(List<String> datas){        for(String data: datas){            addTextView(data);        }        requestLayout();    }   /**     * 动态添加布局     * @param str     */    private void addTextView(String str) {        TextView child = new TextView(getContext());        ViewGroup.MarginLayoutParams params = new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.WRAP_CONTENT, ViewGroup.MarginLayoutParams.WRAP_CONTENT);        params.setMargins(15, 15, 15, 15);        child.setLayoutParams(params);        child.setBackgroundResource(R.drawable.shape_text_border);        child.setText(str);        child.setTextSize(18);        child.setTextColor(Color.BLACK);        this.addView(child);    }

我们传入一个字符串集合调用addData方法。如果对于标签的显示模式需要自定义，可以修改addTextView方法。

最后，我们需要加入一个方法

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

因为，我们在onMeasure和onLayout中，利用MarginLayoutParams获取margin，但ViewGroup中，默认的是创建ViewGroup.LayoutParams,我们不实现此方法，则已xml文件的方式添加子控件时，会报出类型转换异常。该方法，在ViewGroup的构造方法中，会调用此方法。

使用方法，在最前面已经说明，当然，我们也可以直接在xml中进行添加子控件。

该项目已上传到github，有意者请移步FlowLayout