自定义ViewGroup练习一

学习目标

熟悉并掌握自定义ViewGroup控件流程与开发细节

概述

ViewGroup 是 View 的容器类，我们常用的 LinearLayout，RelativeLayout 等都是 ViewGroup 的子类。因为 ViewGroup 有很多子 View，所以它的整个绘制过程相对于 View 会复杂一点，但还是三个步骤 measure，layout，draw。

Measure

Measure 过程还是测量 ViewGroup 的大小。

如果 layout_width 和 layout_height 是 match_parent 或具体的 xxdp 就很简单了，直接调用 setMeasuredDimension() 方法，设置 ViewGroup 的宽高即可；

如果是 wrap_content，我们需要遍历所有的子 View，然后对每个子 View 进行测量，然后根据子 View 的排列规则，计算出最终 ViewGroup 的大小。

过程中用到 getChildCount() 方法，返回子 View 的数量，measureChild() 方法，调用子 View 的测量方法。

Layout

Layout 过程其实就是对子 View 的位置进行排列。

其中 child.layout（left,top,right,bottom）方法可以对子 View 的位置进行设置。

Draw

在该阶段，就是按照子 View 的排列顺序，调用子 View 的 onDraw()方法。

因为 ViewGroup 只是 View 的容器，本身一般不需要 draw 额外的修饰，所以在 onDraw() 方法里面，只需要调用 ViewGroup 的 onDraw() 默认实现方法即可。

还有一个很重要的概念 LayoutParams

LayoutParams 存储了子 View 在加入 ViewGroup 中时的一些参数信息。

在继承 ViewGroup 类时，一般也需要新建一个新的 LayoutParams 类，就想 SDK 中我们所熟悉的 LinearLayout.LayoutParams，RelativeLayout.LayoutParams 类等一样。

具体操作步骤如下

在自定义的 ViewGroup 子类中，新建一个 LayoutParams 类继承与 ViewGroup.LayoutParams。

 /***     *     * LayoutParams 存储了子 view 在加入 ViewGroup 中时的一些参数信息     * 在继承 ViewGroup 类时，一般也需要新建一个新的 LayoutParams 类     * */    class LayoutParams extends  ViewGroup.LayoutParams {        public int left = 0;        public int top = 0;        public LayoutParams(Context c, AttributeSet attrs) {            super(c, attrs);        }        public LayoutParams(int width, int height) {            super(width, height);        }        public LayoutParams(ViewGroup.LayoutParams source) {            super(source);        }    }

有了新的 LayoutParams，接下来就是如何让我们自定义的 ViewGroup 使用我们自定义的 LayoutParams 类来添加子 View。

ViewGroup 中同样提供了几个方法供我们重写，我们只要重写这些方法然后返回我们自定义的 LayoutParams 对象即可。

 /***     *     * 有了新的 LayoutParams 类，就要让新自定义的 ViewGroup 使用我们自定义的 LayoutParaams 类     * 来添加子 view ，ViewGroup 提供了下面几个方法，我们重写返回我们自己的 LayoutParams 对象即可     *     * */    @Override    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {        return new LayoutParams(getContext(),attrs);    }    @Override    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {        return new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT);    }    @Override    protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {        return new LayoutParams(p);    }    @Override    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {        return p instanceof LayoutParams;    }

应用实例

首先在 values/attrs 文件下定义新的自定义控件属性

这里随便定义了图片间的横向和竖向间隔

 <declare-styleable name="ninephotoview">        <attr name="ninephoto_hspace" format="dimension"/>        <attr name="ninephoto_vspace" format="dimension"/>    </declare-styleable>

在新建的自定义 ViewGroup 子类中，这里贴出主要代码

    public NinePhotoView(Context context, AttributeSet attrs, int defStyleAttr) {        ......        // 初始状态新建一个子 view 作为添加图片的标识        addPhotoView = new View(context);        addView(addPhotoView);        // 记录 ViewGroup 容器中 view 的数量        mImageResArrayList.add(1);    }    /**     *  Measure 过程还是测量 ViewGroup 的大小     *  如果layout_widht和layout_height是match_parent或具体的xxxdp，就很简单了，直接调用     *  setMeasuredDimension()方法，设置ViewGroup的宽高即可     *     *  如果是 wrap_content，就比较麻烦了，我们需要遍历所有的子View，然后对每个子View进行测量，     *  然后根据子View的排列规则，计算出最终ViewGroup的大小。     *     *     *  子 view 四个一排，而且都是正方形，所以通过循环很好的得到所有子 view 的位置     *  把子 view 的左上角坐标存储到我们自定义的 LayoutParams 的 left 和 top 二个字段中，Layout 阶段会使用     *  最后算出整个 ViewGroup 的宽高     * */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        // 获取容器宽高 size        int rw = MeasureSpec.getSize(widthMeasureSpec);        int rh = MeasureSpec.getSize(heightMeasureSpec);        // 控制控件图片都在屏幕范围内显示完整        childWidth = rw / 5; // 5:也可以是其它值，自己调整看效果        childHeight = childWidth;        // 获得子 view 数量        int childCount = this.getChildCount();        // 遍历子 view, 将子 view 的left,top 存入子 view 的 LayoutParams        for (int i = 0; i < childCount; i++) {            View child = this.getChildAt(i);            NinePhotoView.LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();//            layoutParams.left = (i % 3) * (childWidth + hSpace);//            layoutParams.top = (i / 3) * (childWidth + vSpace);            // 以微信 3 行 4 列为例            // 设置每个子 view 的 left 和 top            // 横向排列的每列 left 扩大一倍            layoutParams.left = (i % 4) * childWidth;            // 竖直方向的每行 top 扩大一倍            layoutParams.top = (i / 4) * childHeight;            // 还可以加入图片间距等        }            // 这样就把每张图片的 left 和 top 位置保存到了 layoutParams            // 使用默认容器宽高//            setMeasuredDimension(widthMeasureSpec,heightMeasureSpec);            // 定义控件的宽高        int nineWidth = rw;        int nineHeight = rh;        Map<Integer,Integer> line = new HashMap<>();        for (int i = 1; i < 10; i++) {            if (i < 5) {                line.put(i,1);            } else if (i < 9) {                line.put(i,2);            } else {                line.put(i,3);            }        }        nineHeight = (line.get(childCount)) * childHeight;        setMeasuredDimension(nineWidth,nineHeight);    }   ......    // 对子 view 进行位置排列    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        // 获得子 view 数量        int childCount = this.getChildCount();        // 遍历子 view，取出存储在子 view 的 LayoutParams 中的 left 和 top        for (int i =0; i < childCount; i++) {            View child  = this.getChildAt(i);            NinePhotoView.LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();            // 对子 view 位置进行设置            child.layout(layoutParams.left,layoutParams.top,layoutParams.left + childWidth,                    layoutParams.top + childHeight);            if (i == mImageResArrayList.size() - 1 ) {                // 需要注意的是，当选到最大上传图片数的倒数第二张图片时，会继续产生添加图片的占位符，导致                // 子 view 数量已经达到最大上传图片数，这时点击最后的添加图片图标时，我们的操作不能再是生成子 view ，                // 而是将最后一张的上传图标换成我们的图片                // 如果不注意上面这个问题，会出现选择添加倒数第二张图片时，最后一张也被添加。因为                if (mImageResArrayList.size() > MAX_PHOTO_NUMBER) {                    child.setBackgroundResource(constImageIds[i]);                    child.setOnClickListener(null);                } else {                    child.setBackgroundResource(R.drawable.add);                    child.setOnClickListener(new OnClickListener() {                        @Override                        public void onClick(View v) {                            addPhotoBtnClick();                        }                    });                }            }            else {                child.setBackgroundResource(constImageIds[i]);                child.setOnClickListener(null);            }        }    }    private void addPhotoBtnClick() {        final CharSequence[] items = { "拍照", "从相册选择" };        AlertDialog.Builder builder = new AlertDialog.Builder(getContext());        builder.setItems(items, new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface arg0, int arg1) {                addPhoto();            }        });        builder.show();    }    private void addPhoto() {        // 在数量范围内添加图片        if (mImageResArrayList.size() < MAX_PHOTO_NUMBER) {            View newChild = new View(getContext());            addView(newChild);            // 每添加一个子 view ，计数加1        }        mImageResArrayList.add(1);        // 重新调用 onLayout() 进行重新排列        requestLayout();        // 重新绘制 View        invalidate();    }    /***     *     * 有了新的 LayoutParams 类，就要让新自定义的 ViewGroup 使用我们自定义的 LayoutParaams 类     * 来添加子 view ，ViewGroup 提供了下面几个方法，我们重写返回我们自己的 LayoutParams 对象即可     *     * */   ......    /***     *     * LayoutParams 存储了子 view 在加入 ViewGroup 中时的一些参数信息     * 在继承 ViewGroup 类时，一般也需要新建一个新的 LayoutParams 类     * */    class LayoutParams extends  ViewGroup.LayoutParams {        public int left = 0;        public int top = 0;        public LayoutParams(Context c, AttributeSet attrs) {            super(c, attrs);        }        public LayoutParams(int width, int height) {            super(width, height);        }        public LayoutParams(ViewGroup.LayoutParams source) {            super(source);        }    }}

过程中出现的问题

在添加图片点击到倒数第二张的添加图标的时候，最后一张也跟着出来了。

因为图片控制在 9 张，那么当成功添加 8 张图片的时候，ViewGroup 容器里已经有 9 个字 View（包括了图片添加图标），当在点击第 9 个子 View 时，不能再添加子 View ，我们要把 最后的图标换成我们的图片。这个逻辑主要是在 onLayout() 方法中我们需要注意。还是把代码单独贴出来重视一下

 // 对子 view 进行位置排列    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        // 获得子 view 数量        int childCount = this.getChildCount();        // 遍历子 view，取出存储在子 view 的 LayoutParams 中的 left 和 top        for (int i =0; i < childCount; i++) {            View child  = this.getChildAt(i);            NinePhotoView.LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();            // 对子 view 位置进行设置            child.layout(layoutParams.left,layoutParams.top,layoutParams.left + childWidth,                    layoutParams.top + childHeight);            if (i == mImageResArrayList.size() - 1 ) {                // 需要注意的是，当选到最大上传图片数的倒数第二张图片时，会继续产生添加图片的占位符，导致                // 子 view 数量已经达到最大上传图片数，这时点击最后的添加图片图标时，我们的操作不能再是生成子 view ，                // 而是将最后一张的上传图标换成我们的图片                // 如果不注意上面这个问题，会出现选择添加倒数第二张图片时，最后一张也被添加。因为                if (mImageResArrayList.size() > MAX_PHOTO_NUMBER) {                    child.setBackgroundResource(constImageIds[i]);                    child.setOnClickListener(null);                } else {                    child.setBackgroundResource(R.drawable.add);                    child.setOnClickListener(new OnClickListener() {                        @Override                        public void onClick(View v) {                            addPhotoBtnClick();                        }                    });                }            }            else {                child.setBackgroundResource(constImageIds[i]);                child.setOnClickListener(null);            }        }    }

还有在设置 ViewGroup 宽高的时候，要根据子 View 的宽高和具体要求来具体设置，还是单独拿出代码重视一下

// 定义控件的宽高        int nineWidth = rw;        int nineHeight = rh;        Map<Integer,Integer> line = new HashMap<>();        for (int i = 1; i < 10; i++) {            if (i < 5) {                line.put(i,1);            } else if (i < 9) {                line.put(i,2);            } else {                line.put(i,3);            }        }        nineHeight = (line.get(childCount)) * childHeight;        setMeasuredDimension(nineWidth,nineHeight);

Github 源码下载

重要参考：

教你搞定Android自定义ViewGroup