自定义ViewGroup

Posted zzfx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义ViewGroup相关的知识,希望对你有一定的参考价值。

(自定义ViewGroup)

自定义布局主要是重写两个方法:

  • onMeasure() 这个是写自定义容器的大小。
  • onLayout() 这个是写子元素的布局。 
    我自己写了一个自定义布局,是顺序填充会延对角线进行排列。

3.1onMeasure()

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /**
         * 获得此ViewGroup上级容器为其推荐的宽和高,以及计算模式
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

        // 计算出所有的childView的宽和高
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        /**
         * width和height是当wrap_content时使用的属性。
         */
        int width = 0;
        int height = 0;
        int cCount = getChildCount();
        int cWidth = 0;
        int cHeight = 0;
        /**
         * 在这里计算当wrap_content时,布局的大小。
         */
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            cWidth = childView.getMeasuredWidth();
            cHeight = childView.getMeasuredHeight();
            width += cWidth;
            height += cHeight;
        }
        /**
         * 如果是wrap_content设置为我们计算的值
         * 否则:直接设置为父容器计算的值
         */
        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth
                : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
                : height);

    }

首先要说一下布局计算模式,即最后的EXACTLY。一共有三种计算模式:

  • MeasureSpec.EXACTLY:精确尺寸,相当于具体数值和match_parent。
  • MeasureSpec.AT_MOST:最大尺寸,相当于 warp_content。
  • MeasureSpec.UNSPECIFIED:未指定尺寸,这种情况不多,一般用于AdapterView。

最后的设定大小时,如果是精确尺寸就是用sizeWidth即获取的尺寸,如果是最大尺寸就是要我们自己计算的那个尺寸了。 
onMeasure()最主要的功能就是计算wrap_content的尺寸设置尺寸。 
我将这个方法称为“建画布”,先建了画布才能在上面绘图嘛。

3.2 onLayout()

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cCount = getChildCount();

        /**
         * 遍历所有childView根据其宽和高,以及margin进行布局
         */
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            r = l + childView.getMeasuredWidth();
            b = t + childView.getMeasuredHeight();
            childView.layout(l, t, r, b);
            l += childView.getMeasuredWidth();
            t += childView.getMeasuredHeight();
        }
    }

这个方法的作用是设置摆放子元素的位置。其中onLayout()传入的l、t、r、b分别是这样 
技术分享图片

  • l,t分别对应子元素左上角的left,top坐标
  • r,b分别对应子元素右下角的right,bottom坐标

并且可以使用childview.getMeasuredWidth()和childView.getMeasureHeight()得到子元素的宽和高。 
这样就可以来对每个子元素进行布局了。 
我称这个方法为“定位置”。定完位置后那么子元素就被放到了我们想要的地方。 
这样一个自定义ViewGroup就可以使用了。 
xml文件如下:

<?xml version="1.0" encoding="utf-8"?>
<com.example.layoutdemo.MyLayout.MyLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#b2dfdb" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#80cbc4" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#4db6ac" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#26a69a" />

</com.example.layoutdemo.MyLayout.MyLayout>

最后效果如图: 
技术分享图片










以上是关于自定义ViewGroup的主要内容,如果未能解决你的问题,请参考以下文章

自定义ViewGroup获取子View参数

Android 自定义ViewGroup之实现FlowLayout-标签流容器

Android自定义 View 系列-ViewGroup

Android自定义 View 系列实战篇-ViewGroup

Android自定义 View 系列实战篇-ViewGroup

自定义控件自定义ViewGroup 在ViewGroup中显示TextView