Android开发做到了一定程度，多少都会用到自定义控件，一方面是更加灵活，另一方面在大数据量的情况下自定义控件的效率比写布局文件更高。

一个相对完善的自定义控件在布局文件中和java代码中都应能灵活设置属性。另外在普通的布局中和AdapterView中都应能正确绘制，这就要求合理设计onMeasure方法，下文中会做比较详细的讲解。

本文原创，如需转载，请注明转载地址：http://blog.csdn.net/carrey1989/article/details/11757409

接下来我就一步一步来讲解如何设计和编写一个比较完善的自定义控件。

首先要来设计好我们要完成的效果，我们今天来实现下图所示的这样一个控件：

用文字来描述一下：我们要定义的控件上方会显示一张图片，我们可以设置这张图片的内容，长宽比，透明度，伸缩模式，以及图片四周的填充空间大小。图片下方会显示一行文字，作为一级标题，我们可以设置文字的内容，大小，颜色，以及文字区域四周的填充空间的大小。一级标题下方显示一行二级标题，具体设置内容和一级标题相同。

我们不妨先来直接看一下完成后的效果，这样可以更直观的了解要实现的控件的样子。

左图的样子是在常规的布局中自定义控件的样子，右图则是在大数据量的情况下自定义控件作为AdapterView的item的时候绘制出来的样子。

上面我们大体完成了初步的控件设计，下面我们开始编写代码。

第一步，我们写好自定义属性，根据我们上面所做的设计，我们的自定义属性涉及到三个方面，分别是图片相关的属性，一级标题相关的属性，二级标题相关的属性。

按照惯例，我们首先在res/values文件目录下创建一个attrs.xml文件。

然后我们在attrs.xml文件中完成我们对属性的定义，代码片段如下：

[html]view plaincopy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <resources>
3. <attrname="imageSrc"format="reference"/>
4. <attrname="imageAspectRatio"format="float"/>
5. <attrname="imageAlpha"format="float"/>
6. <attrname="imagePaddingLeft"format="dimension"/>
7. <attrname="imagePaddingTop"format="dimension"/>
8. <attrname="imagePaddingRight"format="dimension"/>
9. <attrname="imagePaddingBottom"format="dimension"/>
10. <attrname="imageScaleType">
11. <enumname="fillXY"value="0"/>
12. <enumname="center"value="1"/>
13. </attr>
15. <attrname="titleText"format="string"/>
16. <attrname="titleTextSize"format="dimension"/>
17. <attrname="titleTextColor"format="color"/>
18. <attrname="titlePaddingLeft"format="dimension"/>
19. <attrname="titlePaddingTop"format="dimension"/>
20. <attrname="titlePaddingRight"format="dimension"/>
21. <attrname="titlePaddingBottom"format="dimension"/>
23. <attrname="subTitleText"format="string"/>
24. <attrname="subTitleTextSize"format="dimension"/>
25. <attrname="subTitleTextColor"format="color"/>
26. <attrname="subTitlePaddingLeft"format="dimension"/>
27. <attrname="subTitlePaddingTop"format="dimension"/>
28. <attrname="subTitlePaddingRight"format="dimension"/>
29. <attrname="subTitlePaddingBottom"format="dimension"/>
31. <declare-styleablename="CustomView">
32. <attrname="imageSrc"/>
33. <attrname="imageAspectRatio"/>
34. <attrname="imageAlpha"/>
35. <attrname="imagePaddingLeft"/>
36. <attrname="imagePaddingTop"/>
37. <attrname="imagePaddingRight"/>
38. <attrname="imagePaddingBottom"/>
39. <attrname="imageScaleType"/>
40. <attrname="titleText"/>
41. <attrname="titleTextSize"/>
42. <attrname="titleTextColor"/>
43. <attrname="titlePaddingLeft"/>
44. <attrname="titlePaddingTop"/>
45. <attrname="titlePaddingRight"/>
46. <attrname="titlePaddingBottom"/>
47. <attrname="subTitleText"/>
48. <attrname="subTitleTextSize"/>
49. <attrname="subTitleTextColor"/>
50. <attrname="subTitlePaddingLeft"/>
51. <attrname="subTitlePaddingTop"/>
52. <attrname="subTitlePaddingRight"/>
53. <attrname="subTitlePaddingBottom"/>
54. </declare-styleable>
55. </resources>

这里需要说明几点：<attr>标签的format属性值代表属性的类型，这个类型值一共有10种，分别是：reference,float,color,dimension,boolean,string,enum,integer,fraction,flag

。但是我们作为开发者常用的基本上只有reference,float,color,dimension,boolean,string,enum这7种。在attrs.xml文件中的<declare-styleable>标签的name属性的值，按照惯例我们都是写成自定义控件类的名字。一个同名的<attr>在attrs.xml中只可以定义一次。

除此之外，上面的代码都是针对前面的设计来定义了各种属性，相信各位同学都能看懂。

第二步就是编写我们自定义控件的java类了，我们首先将之前做的自定义属性在自定义控件类中做好声明：

[java]view plaincopy

1. /**图片Bitmap*/
2. privateBitmapimageBitmap;
3. /**图片的长宽比*/
4. privatefloatimageAspectRatio;
5. /**图片的透明度*/
6. privatefloatimageAlpha;
7. /**图片的左padding*/
8. privateintimagePaddingLeft;
9. /**图片的上padding*/
10. privateintimagePaddingTop;
11. /**图片的右padding*/
12. privateintimagePaddingRight;
13. /**图片的下padding*/
14. privateintimagePaddingBottom;
15. /**图片伸缩模式*/
16. privateintimageScaleType;
17. /**图片伸缩模式常量fillXY*/
18. privatestaticfinalintSCALE_TYPE_FILLXY=0;
19. /**图片伸缩模式常量center*/
20. privatestaticfinalintSCALE_TYPE_CENTER=1;
22. /**标题文本内容*/
23. privateStringtitleText;
24. /**标题文本字体大小*/
25. privateinttitleTextSize;
26. /**标题文本字体颜色*/
27. privateinttitleTextColor;
28. /**标题文本区域左padding*/
29. privateinttitlePaddingLeft;
30. /**标题文本区域上padding*/
31. privateinttitlePaddingTop;
32. /**标题文本区域右padding*/
33. privateinttitlePaddingRight;
34. /**标题文本区域下padding*/
35. privateinttitlePaddingBottom;
37. /**子标题文本内容*/
38. privateStringsubTitleText;
39. /**子标题文本字体大小*/
40. privateintsubTitleTextSize;
41. /**子标题文本字体颜色*/
42. privateintsubTitleTextColor;
43. /**子标题文本区域左padding*/
44. privateintsubTitlePaddingLeft;
45. /**子标题文本区域上padding*/
46. privateintsubTitlePaddingTop;
47. /**子标题文本区域右padding*/
48. privateintsubTitlePaddingRight;
49. /**子标题文本区域下padding*/
50. privateintsubTitlePaddingBottom;
52. /**控件用的paint*/
53. privatePaintpaint;
54. privateTextPainttextPaint;
55. /**用来界定控件中不同部分的绘制区域*/
56. privateRectrect;
57. /**宽度和高度的最小值*/
58. privatestaticfinalintMIN_SIZE=12;
59. /**控件的宽度*/
60. privateintmViewWidth;
61. /**控件的高度*/
62. privateintmViewHeight;

然后我们要在构造方法中，将从布局文件中读取的自定义属性解析出来。

[java]view plaincopy

1. TypedArraya=context.getTheme().obtainStyledAttributes(
2. attrs,R.styleable.CustomView,defStyle,0);
3. intn=a.getIndexCount();
4. for(inti=0;i<n;i++){
5. intattr=a.getIndex(i);
6. switch(attr){
7. caseR.styleable.CustomView_imageSrc:
8. imageBitmap=BitmapFactory.decodeResource(
9. getResources(),a.getResourceId(attr,0));
10. break;
11. caseR.styleable.CustomView_imageAspectRatio:
12. imageAspectRatio=a.getFloat(attr,1.0f);//默认长宽相等
13. break;
14. caseR.styleable.CustomView_imageAlpha:
15. imageAlpha=a.getFloat(attr,1.0f);//默认不透明
16. if(imageAlpha>1.0f)imageAlpha=1.0f;
17. if(imageAlpha<0.0f)imageAlpha=0.0f;
18. break;
19. caseR.styleable.CustomView_imagePaddingLeft:
20. imagePaddingLeft=a.getDimensionPixelSize(attr,0);
21. break;
22. caseR.styleable.CustomView_imagePaddingTop:
23. imagePaddingTop=a.getDimensionPixelSize(attr,0);
24. break;
25. caseR.styleable.CustomView_imagePaddingRight:
26. imagePaddingRight=a.getDimensionPixelSize(attr,0);
27. break;
28. caseR.styleable.CustomView_imagePaddingBottom:
29. imagePaddingBottom=a.getDimensionPixelSize(attr,0);
30. break;
31. caseR.styleable.CustomView_imageScaleType:
32. imageScaleType=a.getInt(attr,0);
33. break;
34. caseR.styleable.CustomView_titleText:
35. titleText=a.getString(attr);
36. break;
37. caseR.styleable.CustomView_titleTextSize:
38. titleTextSize=a.getDimensionPixelSize(
39. attr,(int)TypedValue.applyDimension(
40. TypedValue.COMPLEX_UNIT_SP,25,getResources().getDisplayMetrics()));//默认标题字体大小25sp
41. break;
42. caseR.styleable.CustomView_titleTextColor:
43. titleTextColor=a.getColor(attr,0x00000000);//默认黑色字体
44. break;
45. caseR.styleable.CustomView_titlePaddingLeft:
46. titlePaddingLeft=a.getDimensionPixelSize(attr,0);
47. break;
48. caseR.styleable.CustomView_titlePaddingTop:
49. titlePaddingTop=a.getDimensionPixelSize(attr,0);
50. break;
51. caseR.styleable.CustomView_titlePaddingRight:
52. titlePaddingRight=a.getDimensionPixelSize(attr,0);
53. break;
54. caseR.styleable.CustomView_titlePaddingBottom:
55. titlePaddingBottom=a.getDimensionPixelSize(attr,0);
56. break;
57. caseR.styleable.CustomView_subTitleText:
58. subTitleText=a.getString(attr);
59. break;
60. caseR.styleable.CustomView_subTitleTextSize:
61. subTitleTextSize=a.getDimensionPixelSize(attr,
62. (int)TypedValue.applyDimension(
63. 20,TypedValue.COMPLEX_UNIT_SP,getResources().getDisplayMetrics()));//默认子标题字体大小20sp
64. break;
65. caseR.styleable.CustomView_subTitleTextColor:
66. subTitleTextColor=a.getColor(attr,0x00000000);
67. break;
68. caseR.styleable.CustomView_subTitlePaddingLeft:
69. subTitlePaddingLeft=a.getDimensionPixelSize(attr,0);
70. break;
71. caseR.styleable.CustomView_subTitlePaddingTop:
72. subTitlePaddingTop=a.getDimensionPixelSize(attr,0);
73. break;
74. caseR.styleable.CustomView_subTitlePaddingRight:
75. subTitlePaddingRight=a.getDimensionPixelSize(attr,0);
76. break;
77. caseR.styleable.CustomView_subTitlePaddingBottom:
78. subTitlePaddingBottom=a.getDimensionPixelSize(attr,0);
79. break;
80. }
81. }
82. a.recycle();

这里需要说明几点，TypedArray对象在使用完毕后一定要调用recycle()方法。我之前曾在一篇文章中总结过在java代码中进行px与dip(dp)、px与sp单位值的转换。实际上，android中也提供了单位转换的函数，我们也可以使用TypedValue.applyDimension(int unit, float value,DisplayMetrics metrics)方法来进行单位的互换，其中，第一个参数是你想要得到的单位，第二个参数是你想得到的单位的数值，比如：我要得到一个25sp，那么我就用TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 25,getResources().getDisplayMetrics())，返回的就是25sp对应的px数值了。

接下来我们要开始设计onMeasure方法，再设计onMeasure之前我们简单了解几个概念。

MeasureSpec的三种模式：

EXACTLY:表示我们设置了MATCH_PARENT或者一个准确的数值，含义是父布局要给子布局一个确切的大小。

AT_MOST:表示子布局将被限制在一个最大值之内，通常是子布局设置了wrap_content。

UNSPECIFIED:表示子布局想要多大就可以要多大，通常出现在AdapterView中item的heightMode中。

了解了上面几个概念，我们就可以开始设计onMeasure了，具体代码如下：

[java]view plaincopy

1. @Override
2. protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
3. intwidthMode=MeasureSpec.getMode(widthMeasureSpec);
4. intwidthSize=MeasureSpec.getSize(widthMeasureSpec);
5. intheightMode=MeasureSpec.getMode(heightMeasureSpec);
6. intheightSize=MeasureSpec.getSize(heightMeasureSpec);
8. intwidth;
9. intheight;
11. if(widthMode==MeasureSpec.EXACTLY){
12. width=widthSize;
13. }else{
14. intdesired=getPaddingLeft()+getPaddingRight()+
15. imagePaddingLeft+imagePaddingRight;
16. desired+=(imageBitmap!=null)?imageBitmap.getWidth():0;
17. width=Math.max(MIN_SIZE,desired);
18. if(widthMode==MeasureSpec.AT_MOST){
19. width=Math.min(desired,widthSize);
20. }
21. }
23. if(heightMode==MeasureSpec.EXACTLY){
24. height=heightSize;
25. }else{
26. intrawWidth=width-getPaddingLeft()-getPaddingRight();
27. intdesired=(int)(getPaddingTop()+getPaddingBottom()+imageAspectRatio*rawWidth);
29. if(titleText!=null){
30. paint.setTextSize(titleTextSize);
31. FontMetricsfm=paint.getFontMetrics();
32. inttextHeight=(int)Math.ceil(fm.descent-fm.ascent);
33. desired+=(textHeight+titlePaddingTop+titlePaddingBottom);
34. }
36. if(subTitleText!=null){
37. paint.setTextSize(subTitleTextSize);
38. FontMetricsfm=paint.getFontMetrics();
39. inttextHeight=(int)Math.ceil(fm.descent-fm.ascent);
40. desired+=(textHeight+subTitlePaddingTop+subTitlePaddingBottom);
41. }
43. height=Math.max(MIN_SIZE,desired);
44. if(heightMode==MeasureSpec.AT_MOST){
45. height=Math.min(desired,heightSize);
46. }
47. }
49. setMeasuredDimension(width,height);
50. }

思路是这样的：我们首先判断是不是EXACTLY模式，如果是，那就可以直接设置值了，如果不是，我们先按照UNSPECIFIED模式处理，让子布局得到自己想要的最大值，然后判断是否是AT_MOST模式，来做最后的限制。

完成onMeasure过程之后，我们需要开始onDraw的设计，在onDraw中我们需要考虑各个部分设置的padding值，然后对应做出坐标的处理，整体的思路是从下向上绘制。具体的代码如下：

[java]view plaincopy

1. @Override
2. protectedvoidonDraw(Canvascanvas){
3. rect.left=getPaddingLeft();
4. rect.top=getPaddingTop();
5. rect.right=mViewWidth-getPaddingRight();
6. rect.bottom=mViewHeight-getPaddingBottom();
8. paint.setAlpha(255);
9. if(subTitleText!=null){
10. paint.setTextSize(subTitleTextSize);
11. paint.setColor(subTitleTextColor);
12. paint.setTextAlign(Paint.Align.LEFT);
14. FontMetricsfm=paint.getFontMetrics();
15. inttextHeight=(int)Math.ceil(fm.descent-fm.ascent);
17. intleft=getPaddingLeft()+subTitlePaddingLeft;
18. intright=mViewWidth-getPaddingRight()-subTitlePaddingRight;
19. intbottom=mViewHeight-getPaddingBottom()-subTitlePaddingBottom;
21. Stringmsg=TextUtils.ellipsize(subTitleText,textPaint,right-left,TextUtils.TruncateAt.END).toString();
23. floattextWidth=paint.measureText(msg);
24. floatx=textWidth<(right-left)?left+(right-left-textWidth)/2:left;
25. canvas.drawText(msg,x,bottom-fm.descent,paint);
27. rect.bottom-=(textHeight+subTitlePaddingTop+subTitlePaddingBottom);
28. }
30. if(titleText!=null){
31. paint.setTextSize(titleTextSize);
32. paint.setColor(titleTextColor);
33. paint.setTextAlign(Paint.Align.LEFT);
35. FontMetricsfm=paint.getFontMetrics();
36. inttextHeight=(int)Math.ceil(fm.descent-fm.ascent);
38. floatleft=getPaddingLeft()+titlePaddingLeft;
39. floatright=mViewWidth-getPaddingRight()-titlePaddingRight;
40. floatbottom=rect.bottom-titlePaddingBottom;
42. Stringmsg=TextUtils.ellipsize(titleText,textPaint,right-left,TextUtils.TruncateAt.END).toString();
44. floattextWidth=paint.measureText(msg);
45. floatx=textWidth<right-left?left+(right-left-textWidth)/2:left;
46. canvas.drawText(msg,x,bottom-fm.descent,paint);
48. rect.bottom-=(textHeight+titlePaddingTop+titlePaddingBottom);
49. }
51. if(imageBitmap!=null){
52. paint.setAlpha((int)(255*imageAlpha));
53. rect.left+=imagePaddingLeft;
54. rect.top+=imagePaddingTop;
55. rect.right-=imagePaddingRight;
56. rect.bottom-=imagePaddingBottom;
57. if(imageScaleType==SCALE_TYPE_FILLXY){
58. canvas.drawBitmap(imageBitmap,null,rect,paint);
59. }elseif(imageScaleType==SCALE_TYPE_CENTER){
60. intbw=imageBitmap.getWidth();
61. intbh=imageBitmap.getHeight();
62. if(bw<rect.right-rect.left){
63. intdelta=(rect.right-rect.left-bw)/2;
64. rect.left+=delta;
65. rect.right-=delta;
66. }
67. if(bh<rect.bottom-rect.top){
68. intdelta=(rect.bottom-rect.top-bh)/2;
69. rect.top+=delta;
70. rect.bottom-=delta;
71. }
72. canvas.drawBitmap(imageBitmap,null,rect,paint);
73. }
74. }
75. }

当做完这一步的时候，我们的自定义控件已经能够在布局文件中进行使用了，但是我们还不能在AdapterView中用我们设计的布局文件，因为AdapterView中每一个item属性都是在java代码中动态设置的，因此我们就需要给我们的自定义控件开放属性设置的接口，我们这里暂时只开放了设置图片和文字内容的接口。

[java]view plaincopy

1. publicvoidsetImageBitmap(Bitmapbitmap){
2. imageBitmap=bitmap;
3. requestLayout();
4. invalidate();
5. }
7. publicvoidsetTitleText(Stringtext){
8. titleText=text;
9. requestLayout();
10. invalidate();
11. }
13. publicvoidsetSubTitleText(Stringtext){
14. subTitleText=text;
15. requestLayout();
16. invalidate();
17. }

做到这一步的时候，这个自定义控件基本就算完成了，后续的工作就是一些完善和修补了。

接下来就是自定义控件的使用了，在布局文件中使用自定义控件的时候我们需要额外做一点工作，如下:

[java]view plaincopy

1. <RelativeLayout
2. xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:carrey="http://schemas.android.com/apk/res/com.carrey.customview"
4. xmlns:tools="http://schemas.android.com/tools"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. tools:context=".MainActivity">
9. <com.carrey.customview.customview.CustomView
10. android:id="@+id/customview"
11. android:layout_width="200dp"
12. android:layout_height="200dp"
13. android:layout_centerInParent="true"
14. android:background="#FFD700"
15. carrey:imageSrc="@drawable/clock"
16. carrey:imageAspectRatio="1.0"
17. carrey:imageAlpha="0.5"
18. carrey:imagePaddingLeft="5dp"
19. carrey:imagePaddingTop="5dp"
20. carrey:imagePaddingRight="5dp"
21. carrey:imagePaddingBottom="5dp"
22. carrey:imageScaleType="center"
23. carrey:titleText="这是一级标题"
24. carrey:titleTextSize="30sp"
25. carrey:titleTextColor="#1E90FF"
26. carrey:titlePaddingLeft="4dp"
27. carrey:titlePaddingTop="4dp"
28. carrey:titlePaddingRight="4dp"
29. carrey:titlePaddingBottom="4dp"
30. carrey:subTitleText="这是二级子标题"
31. carrey:subTitleTextSize="20sp"
32. carrey:subTitleTextColor="#00FF7F"
33. carrey:subTitlePaddingLeft="3dp"
34. carrey:subTitlePaddingTop="3dp"
35. carrey:subTitlePaddingRight="3dp"
36. carrey:subTitlePaddingBottom="3dp"/>
38. <Button
39. android:id="@+id/button"
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:text="nextpage"/>
43. </RelativeLayout>

我们需要添加一行xmlns:carrey="http://schemas.android.com/apk/res/com.carrey.customview"，其中carrey是一个前缀，你可以随意设置，com.carrey.customview是我们的应用的包名，如果拿不准的可以打开Manifest文件，在<manifest>节点中找到package属性值即可。
对于在AdapterView中的使用方法就和我们正常使用一个常用控件的方法是一样的，这里就不赘述了，如果说到了这里还有一些不明白的地方，可以下载我下面提供的源码，然后对照着博客的思路来看，或者给我留言进行交流。

源码下载

更多相关文章

1. Android控件之SlidingDrawer（滑动式抽屉）详解与实例
2. Android高手进阶教程(二十八)之---Android(安卓)ViewPager控件的
3. Toast（吐司提示）的曾经、现在与未来
4. Xamarin android 使用RecyclerView结合SwipeRefreshLayout下拉刷
5. Android关于Activity知识点总结（二）任务、返回栈与启动模式
6. Android(安卓)带你玩转实现游戏2048 其实2048只是个普通的控件
7. Activity 启动模式和 taskAffinity 属性详解
8. Android(安卓)画廊效果之ViewPager显示多个图片
9. Android(安卓)UI控件之Gallery(拖动效果) --拖动式图片浏览

随机推荐

1. 再放100分,问:你是如何备份大于5M的mysql
2. Visual C ++ 2010连接到MySQL
3. MySQL -如何在最小/最大日期差异超过3年
4. Yahoo,Msn,Skype,QQ,阿里旺旺在线聊天链
5. 如果条件按顺序，Mysql不能使用mysql
6. 利用TPC-H为MYSQL生成数据
7. 如何最好地处理重复日历事件的异常
8. mysql中逗号分隔字段的更好替代方案
9. Mysql--可用的 MySQL 产品和专业服务
10. mysql5.6.23安装 步骤