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,如需转载请自行联系原作者

相关文章
|
15天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
20天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2天前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
28 19
|
6天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
22天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
24天前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
【10月更文挑战第35天】在数字化时代,安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言,带领初学者了解安卓开发的基础知识,同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用,并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者,这篇文章都将为你提供有价值的指导和灵感。
|
22天前
|
存储 API 开发工具
探索安卓开发:从基础到进阶
【10月更文挑战第37天】在这篇文章中,我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始,逐步深入到更复杂的主题,如自定义组件、性能优化等。最后,我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧!
|
23天前
|
存储 XML JSON
探索安卓开发:从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中,我们将一起踏上一段激动人心的旅程,从零基础开始,逐步深入安卓开发的奥秘。无论你是编程新手,还是希望扩展技能的老手,这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释,我们将解锁安卓开发的关键技能,让你能够构建自己的应用程序,甚至贡献于开源社区。准备好了吗?让我们开始吧!
26 2
|
24天前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
3天前
|
Java Android开发 开发者
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!