开发者社区> 技术小阿哥> 正文

Android开发实践:自定义ViewGroup的onLayout()分析

简介:
+关注继续查看

Android开发中,对于自定义View,分为两种,一种是自定义控件(继承View类),另一种是自定义布局容器(继承ViewGroup)。如果是自定义控件,则一般需要重载两个方法,一个是onMeasure(),用来测量控件尺寸,另一个是onDraw(),用来绘制控件的UI。而自定义布局容器,则一般需要实现/重载三个方法,一个是onMeasure(),也是用来测量尺寸;一个是onLayout(),用来布局子控件;还有一个是dispatchDraw(),用来绘制UI。


本文主要分析自定义ViewGroup的onLayout()方法的实现。


ViewGroup类的onLayout()函数是abstract型,继承者必须实现,由于ViewGroup的定位就是一个容器,用来盛放子控件的,所以就必须定义要以什么的方式来盛放,比如LinearLayout就是以横向或者纵向顺序存放,而RelativeLayout则以相对位置来摆放子控件,同样,我们的自定义ViewGroup也必须给出我们期望的布局方式,而这个定义就通过onLayout()函数来实现。


我们通过实现一个水平优先布局的视图容器来更加深入地了解onLayout()的实现吧,效果如图所示(黑色方块为子控件,白色部分为自定义布局容器)。该容器的布局方式是,首先水平方向上摆放子控件,水平方向放不下了,则另起一行继续水平摆放。


wKiom1PzLDGz5ifsAABxoQ3CRhg847.jpg


    1.  自定义ViewGroup的派生类


    第一步,则是自定ViewGroup的派生类,继承默认的构造函数。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class CustomViewGroup extends ViewGroup {
  
   public CustomViewGroup(Context context) {
       super(context);    
    }
  
   public CustomViewGroup(Context context, AttributeSet attrs) {
       super(context, attrs);     
    }
    
   public CustomViewGroup(Context context, AttributeSet attrs, intdefStyle) {
       super(context, attrs, defStyle);
    }
}


    2.  重载onMeasure()方法


    为什么要重载onMeasure()方法这里就不赘述了,上一篇文章已经讲过,这里需要注意的是,自定义ViewGroup的onMeasure()方法中,除了计算自身的尺寸外,还需要调用measureChildren()函数来计算子控件的尺寸


    onMeasure()的定义不是本文的讨论重点,因此这里我直接使用默认的onMeasure()定义,当然measureChildren()是必须得加的。


1
2
3
4
5
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    measureChildren(widthMeasureSpec, heightMeasureSpec);
}


    3.  实现onLayout()方法


    onLayout()函数的原型如下:


1
2
3
//@param changed 该参数指出当前ViewGroup的尺寸或者位置是否发生了改变
//@param left top right bottom 当前ViewGroup相对于其父控件的坐标位置
protected void onLayout(boolean changed,int left, int top, int right, int bottom);


    由于我们希望优先横向布局子控件,那么,首先,我们知道总宽度是多少,这个值可以通过getMeasuredWidth()来得到,当然子控件的宽度也可以通过子控件对象的getMeasuredWidth()来得到。


    这样,就不复杂了,具体的实现代码如下所示:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
     
    int mViewGroupWidth  = getMeasuredWidth();  //当前ViewGroup的总宽度       
 
    int mPainterPosX = left;  //当前绘图光标横坐标位置
    int mPainterPosY = top;  //当前绘图光标纵坐标位置  
     
    int childCount = getChildCount();        
    for int i = 0; i < childCount; i++ ) {
         
        View childView = getChildAt(i);
 
        int width  = childView.getMeasuredWidth();
        int height = childView.getMeasuredHeight();             
                     
        //如果剩余的空间不够,则移到下一行开始位置
        if( mPainterPosX + width > mViewGroupWidth ) {              
            mPainterPosX = left; 
            mPainterPosY += height;
        }                    
         
        //执行ChildView的绘制
        childView.layout(mPainterPosX,mPainterPosY,mPainterPosX+width, mPainterPosY+height);
         
        //记录当前已经绘制到的横坐标位置 
        mPainterPosX += width;
    }       
}


    4. 布局文件测试


    下面我们就尝试写一个简单的xml文件,来测试一下我们的自定义ViewGroup,我们把子View的背景颜色都设置为黑色,方便我们辨识。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<com.titcktick.customview.CustomViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@android:color/black"/>
     
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@android:color/black"/>    
         
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@android:color/black"/>
     
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:background="@android:color/black"/>    
 
</com.titcktick.customview.CustomViewGroup>


    5. 添加layout_margin


    为了让核心逻辑更加清晰,上面的onLayout()实现我隐去了margin的计算,这样就会导致子控件的layout_margin不起效果,所以上述效果是子控件一个个紧挨着排列,中间没有空隙。那么,下面我们来研究下如何添加margin效果。


    其实,如果要自定义ViewGroup支持子控件的layout_margin参数,则自定义的ViewGroup类必须重载generateLayoutParams()函数,并且在该函数中返回一个ViewGroup.MarginLayoutParams派生类对象,这样才能使用margin参数


    ViewGroup.MarginLayoutParams的定义关键部分如下,它记录了子控件的layout_margin值:


1
2
3
4
5
6
public static class MarginLayoutParams extends ViewGroup.LayoutParams {        
    public int leftMargin;
    public int topMargin;
    public int rightMargin;
    public int bottomMargin;
}


    你可以跟踪源码看看,其实XML文件中View的layout_xxx参数都是被传递到了各种自定义ViewGroup.LayoutParams派生类对象中。例如LinearLayout的LayoutParams定义的关键部分如下:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class LinearLayout extends ViewGroup {
 
public static class LayoutParams extends ViewGroup.MarginLayoutParams {
 
    public float weight;
    public int gravity = -1;
 
    public LayoutParams(Context c, AttributeSet attrs) {
 
            super(c, attrs);
 
            TypedArray a = c.obtainStyledAttributes(attrs, com.android.internal.R.styleable.LinearLayout_Layout);
            weight = a.getFloat(com.android.internal.R.styleable.LinearLayout_Layout_layout_weight, 0);
            gravity = a.getInt(com.android.internal.R.styleable.LinearLayout_Layout_layout_gravity, -1);
 
            a.recycle();
        }
    }
 
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LinearLayout.LayoutParams(getContext(), attrs);
    }
}


    这样你大概就可以理解为什么LinearLayout的子控件支持weight和gravity的设置了吧,当然我们也可以这样自定义一些属于我们ViewGroup特有的params,这里就不详细讨论了,我们只继承MarginLayoutParams来获取子控件的margin值。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class CustomViewGroup extends ViewGroup {
 
    public static class LayoutParams extends ViewGroup.MarginLayoutParams {
        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);            
        }       
    }
 
    @Override  
    public LayoutParams generateLayoutParams(AttributeSet attrs) {  
        return new CustomViewGroup.LayoutParams(getContext(), attrs);  
    }
 
}


    这样修改之后,我们就可以在onLayout()函数中获取子控件的layout_margin值了,添加了layout_margin的onLayout()函数实现如下所示:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 
    int mViewGroupWidth  = getMeasuredWidth();  //当前ViewGroup的总宽度
    int mViewGroupHeight = getMeasuredHeight(); //当前ViewGroup的总高度
 
    int mPainterPosX = left; //当前绘图光标横坐标位置
    int mPainterPosY = top;  //当前绘图光标纵坐标位置  
     
    int childCount = getChildCount();        
    for int i = 0; i < childCount; i++ ) {
         
        View childView = getChildAt(i);
 
        int width  = childView.getMeasuredWidth();
        int height = childView.getMeasuredHeight();             
 
        CustomViewGroup.LayoutParams margins = (CustomViewGroup.LayoutParams)(childView.getLayoutParams());
         
        //ChildView占用的width  = width+leftMargin+rightMargin
        //ChildView占用的height = height+topMargin+bottomMargin
        //如果剩余的空间不够,则移到下一行开始位置
        if( mPainterPosX + width + margins.leftMargin + margins.rightMargin > mViewGroupWidth ) {               
            mPainterPosX = left; 
            mPainterPosY += height + margins.topMargin + margins.bottomMargin;
        }                    
         
        //执行ChildView的绘制
        childView.layout(mPainterPosX+margins.leftMargin, mPainterPosY+margins.topMargin,mPainterPosX+margins.leftMargin+width, mPainterPosY+margins.topMargin+height);
         
        mPainterPosX += width + margins.leftMargin + margins.rightMargin;
    }       
}


本文转自 Jhuster 51CTO博客,原文链接:http://blog.51cto.com/ticktick/1542200,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 二 | 准备参数 | 远程调用 mmap 函数 )
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 二 | 准备参数 | 远程调用 mmap 函数 )
35 0
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 获取 远程 目标进程 中的 /system/lib/libc.so 动态库中的 mmap 函数地址 )
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 获取 远程 目标进程 中的 /system/lib/libc.so 动态库中的 mmap 函数地址 )
33 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29079 0
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 调试进程 ATTACH 附着目标进程 | 读取目标函数寄存器值并存档 )
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 调试进程 ATTACH 附着目标进程 | 读取目标函数寄存器值并存档 )
40 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20687 0
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 二 | 准备参数 | 远程调用 mmap 函数 )
【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 二 | 准备参数 | 远程调用 mmap 函数 )
24 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23576 0
13689
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载