（四）UI绘制流程-瀑布流布局

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一.前言

上一篇给出了流式布局，这里再来一篇瀑布流布局练手，同时代码稍微简洁一些。不再利用封装类来保存数据，直接把子 View 的四个边沿保存在对应的 LayoutParams 中。

二、分析

1.generateLayoutParams（）获取封装子 View 的左上右下四个边沿的自定义 WaterfallLayoutParams。
2.onMeasure（） 测量自身宽高的同时把在子 View 的 LayoutParams 存储该子 View 对应的四个边沿值。
3.onLayout（）把每行 View 进行摆放。

三、实现

1.自定义的 LayoutParams

    //WaterfallLayout 下的子控件的布局，保存该控件的左上右下四个边沿值    public static class WaterfallLayoutParams extends ViewGroup.LayoutParams {        public int left = 0;        public int top = 0;        public int right = 0;        public int bottom = 0;        public WaterfallLayoutParams(Context context, AttributeSet attrs) {            super(context, attrs);        }        public WaterfallLayoutParams(int width, int height) {            super(width, height);        }        public WaterfallLayoutParams(android.view.ViewGroup.LayoutParams params) {            super(params);        }    }

二、generateLayoutParams（）

由于使用了自定义的 LayoutParams，这里必须全部写出以下方法，不然会报强转错误，这边只是展示有这么个用法，自定义 LayoutParams 就暂时不在这边记录。

    @Override    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {        return new WaterfallLayoutParams(getContext(), attrs);    }    @Override    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {        return new WaterfallLayoutParams(WaterfallLayoutParams.WRAP_CONTENT, WaterfallLayoutParams.WRAP_CONTENT);    }    @Override    protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {        return new WaterfallLayoutParams(p);    }    @Override    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {        return p instanceof WaterfallLayoutParams;    }

三、onMeasure（）

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        //获取父容器为 WaterfallLayout 设置的测量模式和大小的建议值        int iWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);        int iHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);        int iWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);        int iHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);        //记录测量的宽高        int measuredWith = 0;        int measuredHeight = 0;        //计算列的宽度        columnWidth = (iWidthSpecSize - mVerticalSpace * (columnCount - 1)) / columnCount;        //获取子 View 的数量        int childCount = getChildCount();        //如果不满一排，测量宽度为一排的实际宽度        if (childCount < columnCount) {            measuredWith = childCount * (columnWidth + mHorizontalSpace) - mHorizontalSpace;        } else {            measuredWith = iWidthSpecSize;        }        //循环遍历子 View，进行子 View 的测量以及 WaterfallLayout 宽高的计算        for (int i=0; i<childCount; i++) {            View childView = getChildAt(i);            //对当前获取的子 View 进行测量            measureChild(childView, widthMeasureSpec, heightMeasureSpec);            //按比例计算子 View 的高度            int childViewHeight = childView.getMeasuredHeight() * columnWidth / childView.getMeasuredWidth();            //获取最小高度的列            int minHeightColumn = getMinHeightColumn();            //获取子 View 的 LayoutParams，并强转为 WaterfallLayoutParams，记录子 View 的左上右下四个边沿            WaterfallLayoutParams layoutParams = (WaterfallLayoutParams) childView.getLayoutParams();            layoutParams.left = minHeightColumn * (columnWidth + mHorizontalSpace);            layoutParams.top = columnHeight[minHeightColumn];            layoutParams.right = layoutParams.left + columnWidth;            layoutParams.bottom = layoutParams.top + childViewHeight;            //添加图片后把高度加进去            columnHeight[minHeightColumn] = layoutParams.bottom + mVerticalSpace;        }        //测量高度为最高度的列的高度        measuredHeight = columnHeight[getMaxHeightColumn()];        //测量的最终目的 setMeasuredDimension        setMeasuredDimension(iWidthSpecMode == MeasureSpec.EXACTLY ? iWidthSpecSize : measuredWith,                 iHeightSpecMode == MeasureSpec.EXACTLY ? iHeightSpecSize : measuredHeight);    }

四、onLayout（）

这样 onLayout（） 方法就变得简洁了很多。

      @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        int childCount = getChildCount();        for (int i = 0; i < childCount; i++) {            View child = this.getChildAt(i);            WaterfallLayoutParams lParams = (WaterfallLayoutParams)child.getLayoutParams();            child.layout(lParams.left, lParams.top, lParams.right, lParams.bottom);        }        //由于程序会多次调用测量布局，所以布局完清空数据        //不清空数据，同一个 View 会被多次引用布局，以最后一次布局为主，        //可能导致所有子 View 的布局都在 FlowLayout 高度之外，导致界面没有东西        clearTop();    }

五、监听

监听还是一样，没有改变

    //监听类接口    public interface OnItemClickListener{        void onItemClick (View v, int index);    }    //监听类的实现    public void setOnItemClickListener(final OnItemClickListener listener){        int childCount = getChildCount();        for(int i = 0 ; i < childCount ; i++){            View childView = getChildAt(i);            final int finalI = i;            childView.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    listener.onItemClick(v, finalI);                }            });        }    }

六、三个业务方法

    //获取当前高度最小的列    private int getMinHeightColumn() {        int minHeightColumn = 0;        for (int i=0; i<columnCount; i++) {            if (columnHeight[i] < columnHeight[minHeightColumn]) {                minHeightColumn = i;            }        }        return minHeightColumn;    }    //获取当前高度最大的列    private int getMaxHeightColumn() {        int minHeightColumn = 0;        for (int i=0; i<columnCount; i++) {            if (columnHeight[i] > columnHeight[minHeightColumn]) {                minHeightColumn = i;            }        }        return minHeightColumn;    }    //初始化没列高度    private void clearTop() {        for (int i=0; i<columnCount; i++) {            columnHeight[i] = 0;        }    }

七、附

代码链接：http://download.csdn.net/detail/qq_18983205/9849283
这里引用 v7 包，报错的可以参考 http://blog.csdn.net/qq_18983205/article/details/60874618