Android自定义View

移动开发 Android
Android自定义View的详细步骤是我们每一个Android开发人员都必须掌握的技能,因为在开发中总会遇到自定义View的需求。为了提高自己的技术水平,自己就系统的去研究了一下,在这里写下一点心得,有不足之处希望大家及时指出。

前言

Android自定义View的详细步骤是我们每一个Android开发人员都必须掌握的技能,因为在开发中总会遇到自定义View的需求。为了提高自己的技术水平,自己就系统的去研究了一下,在这里写下一点心得,有不足之处希望大家及时指出。

流程

在Android中对于布局的请求绘制是在Android framework层开始处理的。绘制是从根节点开始,对布局树进行measure与draw。在RootViewImpl中的performTraversals展开。它所做的就是对需要的视图进行measure(测量视图大小)、layout(确定视图的位置)与draw(绘制视图)。下面的图能很好的展现视图的绘制流程:   

 

当用户调用requestLayout时,只会触发measure与layout,但系统开始调用时还会触发draw

下面来详细介绍这几个流程。

measure

measure是View中的final型方法不可以进行重写。它是对视图的大小进行测量计算,但它会回调onMeasure方法,所以我们在自定义View的时候可以重写onMeasure方法来对View进行我们所需要的测量。它有两个参数widthMeasureSpec与heightMeasureSpec。其实这两个参数都包含两部分,分别为size与mode。size为测量的大小而mode为视图布局的模式

我们可以通过以下代码分别获取:

  1. int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
  2. int heightSize = MeasureSpec.getSize(heightMeasureSpec); 
  3. int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
  4. int heightMode = MeasureSpec.getMode(heightMeasureSpec);  

获取到的mode种类分为以下三种:

MODE EXPLAIN
UNSPECIFiED 父视图不对子视图进行约束,子视图大小可以是任意大小,一般是对ListViewScrollView等进行自定义,一般用不到
EXACTLY 父视图对子视图设定了一个精确的尺寸,子视图不超过该尺寸,一般为精确的值例如200dp或者使用了match_parent
AT_MOST 父视图对子视图指定了一***的尺寸,确保子视图的所以内容都刚好能在该尺寸中显示出来,一般为wrap_content,这种父视图不能获取子视图的大小,只能由子视图自己去计算尺寸,这也是我们测量要实现的逻辑情况

setMeasuredDimension

通过以上逻辑获取视图的宽高,***要调用setMeasuredDimension方法将测量好的宽高进行传递出去。其实最终是调用setMeasuredDimensionRaw方法对传过来的值进行属性赋值。调用super.onMeasure()的调用逻辑也是一样的。

下面以自定义一个验证码的View为例,它的onMeasure方法如下:

  1. @Override 
  2.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  3.         int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
  4.         int heightSize = MeasureSpec.getSize(heightMeasureSpec); 
  5.         int widthMode = MeasureSpec.getMode(widthMeasureSpec); 
  6.         int heightMode = MeasureSpec.getMode(heightMeasureSpec); 
  7.         if (widthMode == MeasureSpec.EXACTLY) { 
  8.             //直接获取精确的宽度 
  9.             width = widthSize; 
  10.         } else if (widthMode == MeasureSpec.AT_MOST) { 
  11.             //计算出宽度(文本的宽度+padding的大小) 
  12.             width = bounds.width() + getPaddingLeft() + getPaddingRight(); 
  13.         } 
  14.         if (heightMode == MeasureSpec.EXACTLY) { 
  15.             //直接获取精确的高度 
  16.             height = heightSize; 
  17.         } else if (heightMode == MeasureSpec.AT_MOST) { 
  18.             //计算出高度(文本的高度+padding的大小) 
  19.             height = bounds.height() + getPaddingBottom() + getPaddingTop(); 
  20.         } 
  21.         //设置获取的宽高 
  22.         setMeasuredDimension(width, height); 
  23.     }  

可以对自定义View的layout_width与layout_height进行设置不同的属性,达到不同的mode类型,就可以看到不同的效果

measureChildren

如果你是对继承ViewGroup的自定义View那么在进行测量自身的大小时还要测量子视图的大小。一般通过measureChildren(int widthMeasureSpec, int heightMeasureSpec)方法来测量子视图的大小。

  1. protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) { 
  2.         final int size = mChildrenCount; 
  3.         final View[] children = mChildren; 
  4.         for (int i = 0; i < size; ++i) { 
  5.             final View child = children[i]; 
  6.             if ((child.mViewFlags & VISIBILITY_MASK) != GONE) { 
  7.                 measureChild(child, widthMeasureSpec, heightMeasureSpec); 
  8.             } 
  9.         } 
  10.     }  

通过上面的源码会发现,它其实是遍历每一个子视图,如果该子视图不是隐藏的就调用measureChild方法,那么来看下measureChild源码:

  1. protected void measureChild(View child, int parentWidthMeasureSpec, 
  2.             int parentHeightMeasureSpec) { 
  3.         final LayoutParams lp = child.getLayoutParams(); 
  4.         final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec, 
  5.                 mPaddingLeft + mPaddingRight, lp.width); 
  6.         final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec, 
  7.                 mPaddingTop + mPaddingBottom, lp.height); 
  8.         child.measure(childWidthMeasureSpec, childHeightMeasureSpec); 
  9.     }  

会发现它首先调用了getChildMeasureSpec方法来分别获取宽高,***再调用的就是View的measure方法,而通过前面的分析我们已经知道它做的就是对视图大小的计算。而对于measure中的参数是通过getChildMeasureSpec获取,再来看下其源码:

  1. public static int getChildMeasureSpec(int spec, int padding, int childDimension) { 
  2.         int specMode = MeasureSpec.getMode(spec); 
  3.         int specSize = MeasureSpec.getSize(spec); 
  4.   
  5.         int size = Math.max(0, specSize - padding); 
  6.   
  7.         int resultSize = 0; 
  8.         int resultMode = 0; 
  9.   
  10.         switch (specMode) { 
  11.         // Parent has imposed an exact size on us 
  12.         case MeasureSpec.EXACTLY: 
  13.             if (childDimension >= 0) { 
  14.                 resultSize = childDimension; 
  15.                 resultMode = MeasureSpec.EXACTLY; 
  16.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  17.                 // Child wants to be our size. So be it. 
  18.                 resultSize = size
  19.                 resultMode = MeasureSpec.EXACTLY; 
  20.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  21.                 // Child wants to determine its own size. It can't be 
  22.                 // bigger than us. 
  23.                 resultSize = size
  24.                 resultMode = MeasureSpec.AT_MOST; 
  25.             } 
  26.             break; 
  27.   
  28.         // Parent has imposed a maximum size on us 
  29.         case MeasureSpec.AT_MOST: 
  30.             if (childDimension >= 0) { 
  31.                 // Child wants a specific size... so be it 
  32.                 resultSize = childDimension; 
  33.                 resultMode = MeasureSpec.EXACTLY; 
  34.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  35.                 // Child wants to be our size, but our size is not fixed. 
  36.                 // Constrain child to not be bigger than us. 
  37.                 resultSize = size
  38.                 resultMode = MeasureSpec.AT_MOST; 
  39.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  40.                 // Child wants to determine its own size. It can't be 
  41.                 // bigger than us. 
  42.                 resultSize = size
  43.                 resultMode = MeasureSpec.AT_MOST; 
  44.             } 
  45.             break; 
  46.   
  47.         // Parent asked to see how big we want to be 
  48.         case MeasureSpec.UNSPECIFIED: 
  49.             if (childDimension >= 0) { 
  50.                 // Child wants a specific size... let him have it 
  51.                 resultSize = childDimension; 
  52.                 resultMode = MeasureSpec.EXACTLY; 
  53.             } else if (childDimension == LayoutParams.MATCH_PARENT) { 
  54.                 // Child wants to be our size... find out how big it should 
  55.                 // be 
  56.                 resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size
  57.                 resultMode = MeasureSpec.UNSPECIFIED; 
  58.             } else if (childDimension == LayoutParams.WRAP_CONTENT) { 
  59.                 // Child wants to determine its own size.... find out how 
  60.                 // big it should be 
  61.                 resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size
  62.                 resultMode = MeasureSpec.UNSPECIFIED; 
  63.             } 
  64.             break; 
  65.         } 
  66.         //noinspection ResourceType 
  67.         return MeasureSpec.makeMeasureSpec(resultSize, resultMode); 
  68.     }  

是不是容易理解了点呢。它做的就是前面所说的根据mode的类型,获取相应的size。根据父视图的mode类型与子视图的LayoutParams类型来决定子视图所属的mode,***再将获取的size与mode通过MeasureSpec.makeMeasureSpec方法整合返回。***传递到measure中,这就是前面所说的widthMeasureSpec与heightMeasureSpec中包含的两部分的值。整个过程为measureChildren->measureChild->getChildMeasureSpec->measure->onMeasure->setMeasuredDimension,所以通过measureChildren就可以对子视图进行测量计算。

layout

layout也是一样的内部会回调onLayout方法,该方法是用来确定子视图的绘制位置,但这个方法在ViewGroup中是个抽象方法,所以如果要自定义的View是继承ViewGroup的话就必须实现该方法。但如果是继承View的话就不需要了,View中有一个空实现。而对子视图位置的设置是通过View的layout方法通过传递计算出来的left、top、right与bottom值,而这些值一般都要借助View的宽高来计算,视图的宽高则可以通过getMeasureWidth与getMeasureHeight方法获取,这两个方法获取的值就是上面onMeasure中setMeasuredDimension传递的值,即子视图测量的宽高。

getWidth、getHeight与getMeasureWidth、getMeasureHeight是不同的,前者是在onLayout之后才能获取到的值,分别为left-right与top-bottom;而后者是在onMeasure之后才能获取到的值。只不过这两种获取的值一般都是相同的,所以要注意调用的时机。

下面以定义一个把子视图放置于父视图的四个角的View为例:

  1. @Override 
  2.     protected void onLayout(boolean changed, int l, int t, int r, int b) { 
  3.         int count = getChildCount(); 
  4.         MarginLayoutParams params; 
  5.          
  6.         int cl; 
  7.         int ct; 
  8.         int cr; 
  9.         int cb; 
  10.              
  11.         for (int i = 0; i < count; i++) { 
  12.             View child = getChildAt(i); 
  13.             params = (MarginLayoutParams) child.getLayoutParams(); 
  14.                  
  15.             if (i == 0) { 
  16.                 //左上角 
  17.                 cl = params.leftMargin; 
  18.                 ct = params.topMargin; 
  19.             } else if (i == 1) { 
  20.                 //右上角 
  21.                 cl = getMeasuredWidth() - params.rightMargin - child.getMeasuredWidth(); 
  22.                 ct = params.topMargin; 
  23.             } else if (i == 2) { 
  24.                 //左下角 
  25.                 cl = params.leftMargin; 
  26.                 ct = getMeasuredHeight() - params.bottomMargin - child.getMeasuredHeight() 
  27.                  - params.topMargin; 
  28.             } else { 
  29.                 //右下角 
  30.                 cl = getMeasuredWidth() - params.rightMargin - child.getMeasuredWidth(); 
  31.                 ct = getMeasuredHeight() - params.bottomMargin - child.getMeasuredHeight() 
  32.                  - params.topMargin; 
  33.             } 
  34.             cr = cl + child.getMeasuredWidth(); 
  35.             cb = ct + child.getMeasuredHeight(); 
  36.             //确定子视图在父视图中放置的位置 
  37.             child.layout(cl, ct, cr, cb); 
  38.         } 
  39.     }  

至于onMeasure的实现源码我后面会给链接,如果要看效果图的话,我后面也会贴出来,前面的那个验证码的也是一样

draw

draw是由dispatchDraw发动的,dispatchDraw是ViewGroup中的方法,在View是空实现。自定义View时不需要去管理该方法。而draw方法只在View中存在,ViewGoup做的只是在dispatchDraw中调用drawChild方法,而drawChild中调用的就是View的draw方法。那么我们来看下draw的源码:

  1. public void draw(Canvas canvas) { 
  2.         final int privateFlags = mPrivateFlags; 
  3.         final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE && 
  4.                 (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState); 
  5.         mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN; 
  6.           
  7.         /* 
  8.          * Draw traversal performs several drawing steps which must be executed 
  9.          * in the appropriate order
  10.          * 
  11.          *      1. Draw the background 
  12.          *      2. If necessary, save the canvas' layers to prepare for fading 
  13.          *      3. Draw view's content 
  14.          *      4. Draw children 
  15.          *      5. If necessary, draw the fading edges and restore layers 
  16.          *      6. Draw decorations (scrollbars for instance) 
  17.          */ 
  18.            
  19.         // Step 1, draw the background, if needed 
  20.         int saveCount; 
  21.   
  22.         if (!dirtyOpaque) { 
  23.             drawBackground(canvas); 
  24.         } 
  25.           
  26.         // skip step 2 & 5 if possible (common case
  27.         final int viewFlags = mViewFlags; 
  28.         boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0; 
  29.         boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0; 
  30.         if (!verticalEdges && !horizontalEdges) { 
  31.             // Step 3, draw the content 
  32.             if (!dirtyOpaque) onDraw(canvas); 
  33.               
  34.             // Step 4, draw the children 
  35.             dispatchDraw(canvas); 
  36.               
  37.             // Overlay is part of the content and draws beneath Foreground 
  38.             if (mOverlay != null && !mOverlay.isEmpty()) { 
  39.                             mOverlay.getOverlayView().dispatchDraw(canvas); 
  40.             } 
  41.                           
  42.             // Step 6, draw decorations (foreground, scrollbars) 
  43.             onDrawForeground(canvas); 
  44.                         
  45.             // we're done... 
  46.             return
  47.         } 
  48.         //省略2&5的情况 
  49.         .... 
  50. }     

源码已经非常清晰了draw总共分为6步;

  • 绘制背景
  • 如果需要的话,保存layers
  • 绘制自身文本
  • 绘制子视图
  • 如果需要的话,绘制fading edges
  • 绘制scrollbars

其中 第2步与第5步不是必须的。在第3步调用了onDraw方法来绘制自身的内容,在View中是空实现,这就是我们为什么在自定义View时必须要重写该方法。而第4步调用了dispatchDraw对子视图进行绘制。还是以验证码为例:

  1. @Override 
  2.     protected void onDraw(Canvas canvas) { 
  3.         //绘制背景 
  4.         mPaint.setColor(getResources().getColor(R.color.autoCodeBg)); 
  5.         canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint); 
  6.  
  7.         mPaint.getTextBounds(autoText, 0, autoText.length(), bounds); 
  8.         //绘制文本 
  9.         for (int i = 0; i < autoText.length(); i++) { 
  10.              mPaint.setColor(getResources().getColor(colorRes[random.nextInt(6)])); 
  11.             canvas.drawText(autoText, i, i + 1, getWidth() / 2 - bounds.width() / 2 + i * bounds.width() / autoNum 
  12.                     , bounds.height() + random.nextInt(getHeight() - bounds.height()) 
  13.                     , mPaint); 
  14.         } 
  15.   
  16.         //绘制干扰点 
  17.         for (int j = 0; j < 250; j++) { 
  18.              canvas.drawPoint(random.nextInt(getWidth()), random.nextInt(getHeight()), pointPaint); 
  19.         } 
  20.   
  21.         //绘制干扰线 
  22.         for (int k = 0; k < 20; k++) { 
  23.             int startX = random.nextInt(getWidth()); 
  24.             int startY = random.nextInt(getHeight()); 
  25.             int stopX = startX + random.nextInt(getWidth() - startX); 
  26.             int stopY = startY + random.nextInt(getHeight() - startY); 
  27.              linePaint.setColor(getResources().getColor(colorRes[random.nextInt(6)])); 
  28.             canvas.drawLine(startX, startY, stopX, stopY, linePaint); 
  29.         } 
  30.     }  

其实很简单,就是一些绘制的业务逻辑。好了基本就到这里了,下面上传一张示例的效果图,与源码链接

示例图 

 

 

对了还有自定义属性,这里简单说一下。自定义View时一般都要自定义属性,所以都会在res/values/attr.xml中定义attr与declare-styleable,***在自定义View中通过TypedArray获取。

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2016-12-26 15:25:59

Android自定义View

2016-04-12 10:07:55

AndroidViewList

2017-03-02 13:33:19

Android自定义View

2013-05-20 17:33:44

Android游戏开发自定义View

2012-05-18 10:52:20

TitaniumAndroid模块自定义View模块

2013-01-06 10:43:54

Android开发View特效

2017-03-14 15:09:18

AndroidView圆形进度条

2011-08-02 11:17:13

iOS开发 View

2021-10-26 10:07:02

鸿蒙HarmonyOS应用

2013-04-01 14:35:10

Android开发Android自定义x

2017-05-19 10:03:31

AndroidBaseAdapter实践

2010-02-07 14:02:16

Android 界面

2017-05-18 12:36:16

android万能适配器列表视图

2015-02-12 15:33:43

微信SDK

2013-01-09 17:22:38

Android开发Camera

2015-02-11 17:49:35

Android源码自定义控件

2013-05-02 14:08:18

2014-12-10 10:37:45

Android自定义布局

2011-08-18 17:32:55

iPhone开发Table Cell

2015-02-12 15:38:26

微信SDK
点赞
收藏

51CTO技术栈公众号