关于自定义ViewGroup

最新推荐文章于 2019-03-19 15:35:53 发布
最新推荐文章于 2019-03-19 15:35:53 发布
阅读量434 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pngfiwang/article/details/48609383
版权

本文是学习鸿洋大神的博文http://blog.csdn.net/lmj623565791/article/details/38339817之后加深理解。

为了真正理解鸿洋大神Demo中每一句代码的作用，进而理解onMeasure和onLayout的职能，以下将重新梳理代码。

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


 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);
        int widthMode=MeasureSpec.getMode(widthMeasureSpec);
        int heightSize=MeasureSpec.getSize(heightMeasureSpec);
        int heightMode=MeasureSpec.getMode(heightMeasureSpec);
        //计算出所有childView的宽和高
        measureChildren(widthMeasureSpec,heightMeasureSpec);
        Log.i(TAG,"onMeasure---heightSize:"+heightSize+",widthSize"+widthSize);

        setMeasuredDimension(widthSize,heightSize);
    }


    @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 = getChildAt(i);
            //不能调用getWidth和getHeight方法，此时这些值仍然为零
            /*int cWidth = child.getWidth();
            int cHeight=child.getHeight();*/
            //上面调用了memeasureChildren这里才能获得值
            int cWidth=child.getMeasuredWidth();
            int cHeight=child.getMeasuredHeight();
            Log.i(TAG,"childView-----"+cWidth+"----"+cHeight);
            MarginLayoutParams mp= (MarginLayoutParams) child.getLayoutParams();
            int cl=0,ct=0,cr=0,cb=0;
            switch (i){
                case 0:
                    cl=mp.leftMargin;
                    ct=mp.topMargin;
                    break;
                case 1:
                    cl=getWidth()-mp.rightMargin-cWidth;
                    ct=mp.topMargin;
                    break;
                case 2:
                    cl=mp.leftMargin;
                    ct=getHeight()-mp.bottomMargin-cHeight;
                    break;
                case 3:
                    cl=getWidth()-mp.rightMargin-cWidth;
                    ct=getHeight()-mp.bottomMargin-cHeight;
                    break;
            }
            cr=cWidth+cl;
            cb=cHeight+ct;
            child.layout(cl,ct,cr,cb);
        }
    }

去掉onMeasure方法中处理ViewGroup自身宽或者高为wrap_content时的代码。

这时候写一个布局文件如下，包括ViewGroup是wrap_content,math_parent和确定数值三种情况如下。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.pngfi.cvg.CustomViewGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#FF4444"
                android:gravity="center"
                android:text="0"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#00ff00"
                android:gravity="center"
                android:text="1"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000"
                android:gravity="center"
                android:text="2"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#0000ff"
                android:gravity="center"
                android:text="3"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />
        </com.pngfi.cvg.CustomViewGroup>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.pngfi.cvg.CustomViewGroup
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#FF4444"
                android:gravity="center"
                android:text="0"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#00ff00"
                android:gravity="center"
                android:text="1"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000"
                android:gravity="center"
                android:text="2"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#0000ff"
                android:gravity="center"
                android:text="3"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />
        </com.pngfi.cvg.CustomViewGroup>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.pngfi.cvg.CustomViewGroup
            android:layout_width="250dp"
            android:layout_height="130dp">

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#FF4444"
                android:gravity="center"
                android:text="0"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#00ff00"
                android:gravity="center"
                android:text="1"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#ff0000"
                android:gravity="center"
                android:text="2"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#0000ff"
                android:gravity="center"
                android:text="3"
                android:textColor="#FFFFFF"
                android:textSize="22sp"
                android:textStyle="bold" />
        </com.pngfi.cvg.CustomViewGroup>
    </LinearLayout>
</LinearLayout>

效果如下，可以看出wrap_content的情况当做math_parent来处理了
这里写图片描述

以及在AndroidStudio中打印的Log
这里写图片描述

另外measureChildren(widthMeasureSpec,heightMeasureSpec);方法如果不调用的话，界面时绘制不出来东西的。此时子View的getMeasureWidth和getMeasureHeight方法都返回0；

先来强调一下View的三种测量模式：

EXACTLY：表示设置了精确的值，一般当childView设置其宽、高为精确值、match_parent时，ViewGroup会将其设置为EXACTLY；

AT_MOST：表示子布局被限制在一个最大值内，一般当childView设置其宽、高为wrap_content时，ViewGroup会将其设置为AT_MOST；

UNSPECIFIED：表示子布局想要多大就多大，一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此种模式比较少见。

注：上面的每一行都有一个一般，意思上述不是绝对的，对于childView的mode的设置还会和ViewGroup的测量mode有一定的关系；当然了，这是第一篇自定义ViewGroup，而且绝大部分情况都是上面的规则，所以为了通俗易懂，暂不深入讨论其他内容。

此时差不多能够理清OnMeasure方法中需要做的事情：

  1. 根据widthMeasureSpec和heightMeasureSpec来获得ViewGroup宽和高的尺寸值以及测量模式。
  2. 为子View计算大小。

  3. 处理ViewGroup的大小为wrap_content的情况

    此时我们为onMeasure方法增加处理wrap_content的部分。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //计算出所有childView的宽和高
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        //处理wrap_content部分
        if (widthMode == MeasureSpec.AT_MOST) {
            widthSize = getWrapWidth();
        }
        if (heightMode== MeasureSpec.AT_MOST) {
            heightSize = getWrapHeight();
        }

        //这个方法在OnMeasure中必须调用，用来储存测量的值，否则会抛出异常
        setMeasuredDimension(widthSize, heightSize);
    }



 private int getWrapWidth() {
        int width = 0;
        int cCount = getChildCount();

        int cWidth = 0;
        MarginLayoutParams cParams = null;


        // 用于计算上边两个childView的宽度
        int tWidth = 0;
        // 用于计算下面两个childiew的宽度，最终宽度取二者之间大值
        int bWidth = 0;

        // 根据childView计算的出的宽和高，以及设置的margin计算容器的宽和高，主要用于容器是warp_content时
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            cWidth = childView.getMeasuredWidth();
            cParams = (MarginLayoutParams) childView.getLayoutParams();
            // 上面两个childView
            if (i == 0 || i == 1) {
                tWidth += cWidth + cParams.leftMargin + cParams.rightMargin;
            }

            if (i == 2 || i == 3) {
                bWidth += cWidth + cParams.leftMargin + cParams.rightMargin;
            }

        }
        width = Math.max(tWidth, bWidth);
        return width;
    }


    private int getWrapHeight() {

        int height = 0;
        int cCount = getChildCount();
        int cHeight = 0;
        MarginLayoutParams cParams = null;

        // 用于计算左边两个childView的高度
        int lHeight = 0;
        // 用于计算右边两个childView的高度，最终高度取二者之间大值
        int rHeight = 0;

        // 根据childView计算的出的宽和高，以及设置的margin计算容器的宽和高，主要用于容器是warp_content时
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            cHeight = childView.getMeasuredHeight();
            cParams = (MarginLayoutParams) childView.getLayoutParams();

            if (i == 0 || i == 2) {
                lHeight += cHeight + cParams.topMargin + cParams.bottomMargin;
            }

            if (i == 1 || i == 3) {
                rHeight += cHeight + cParams.topMargin + cParams.bottomMargin;
            }
        }
        height = Math.max(lHeight, rHeight);
        return height;
    }

此时wrap_content的效果就正常了，如下图

这里写图片描述

到此我们再说一下onLayout方法，这个方法比较简单主要就是给每个字View定位，调用子View的layout方法。传入左上角的坐标l，t和右下角的坐标r，b；计算坐标时可能会用到测量的宽度，需先调用过measureChildren(widthMeasureSpec, heightMeasureSpec);

你死到临头了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义ViewGroup
12-07
模仿ViewPager的效果，自定义继承Linerlayout，学习的例子。
Android 手把手教您自定义ViewGroup（一）
810364804
08-02 1447
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/38339817， 本文出自:【张鸿洋的博客】 最近由于工作的变动，导致的博客的更新计划有点被打乱，希望可以尽快脉动回来~ 今天给大家带来一篇自定义ViewGroup的教程，说白了，就是教大家如何自定义ViewGroup，如果你对自定义ViewGroup还不是很了解，或者正想学习如何...
自定义viewgroup
jackzhouyu的专栏
03-19 380
自定义viewgroup 多个控件组合在一起，集成viewgroup，核心在于如何将你想要的组件引入到viewgroup中去？ 有两种方法 方法一 自定义viewgroup，在内部完成自己的业务逻辑处理，测量、布局等其他逻辑；最后在java代码中用你自定义的viewgroup.addview(view)方法逐一添加进去 方法二 在自定义viewgroup的构造方法中引入，用findviewbyID...
Android自定义View深度解析（四、自定义ViewGroup打造自己的布局容器）
热门推荐
openXu的专栏
05-25 2万+
转载请标明出处： http://blog.csdn.net/xmxkf/article/details/51490283 本文出自:【openXu的博客】 目录：简单实现水平排列效果 自定义LayoutParams 大致明确布局容器的需求初步定义布局属性 继承LayoutParams定义布局参数类 重写generateLayoutParams 在布局文件中使用布局属性 在o
自定义ViewGroup组合控件
10-08
在Android开发中，自定义ViewGroup是创建复杂布局和交互式控件的重要手段。自定义ViewGroup意味着扩展Android的 ViewGroup 类或其子类，如 LinearLayout、RelativeLayout 或 FrameLayout，以实现特定的功能或视觉...
Android自定义ViewGroup实现标签流容器FlowLayout
09-01
在Android开发中，自定义ViewGroup是实现特定布局需求的重要手段。本文主要讲解如何自定义一个名为FlowLayout的标签流容器，适用于展示类似热门标签的自动换行布局。Flow Layout是一种布局方式，它允许子视图根据...
Android自定义ViewGroup实现弹性滑动效果
08-28
在Android开发中，自定义ViewGroup是实现特定交互效果或界面布局的重要手段。本文将详细介绍如何利用自定义ViewGroup来实现一种弹性滑动效果。这种效果使得用户在滑动时，视图会有一定的弹性，增加了用户体验的趣味...
Android自定义ViewGroup
07-12
在Android开发中，自定义ViewGroup是实现复杂布局和交互效果的重要手段。本文将深入探讨如何在Android中创建自定义的ViewGroup，并结合滑动功能进行详细解析。 首先，我们来理解什么是ViewGroup。在Android UI层次...
Android 自定义viewgroup
最新发布
07-28
Android自定义ViewGroup是指在Android开发中，通过继承ViewGroup类来创建自定义的布局容器。自定义ViewGroup可以用于实现一些特殊的布局效果，比如侧滑菜单、滑动卡片等等。通过自定义ViewGroup，我们可以更灵活地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值