【Android 界面效果15】Android UI 之一步步教你自定义控件(自定义属性、合理设计onMeasure、合理设计onDraw等)

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

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

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

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

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

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

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

                   

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

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

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

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

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

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <attr name="imageSrc" format="reference"/>
4. <attr name="imageAspectRatio" format="float"/>
5. <attr name="imageAlpha" format="float"/>
6. <attr name="imagePaddingLeft" format="dimension"/>
7. <attr name="imagePaddingTop" format="dimension"/>
8. <attr name="imagePaddingRight" format="dimension"/>
9. <attr name="imagePaddingBottom" format="dimension"/>
10. <attr name="imageScaleType">
11. <enum name="fillXY" value="0"/>
12. <enum name="center" value="1"/>
13. </attr>
14. <attr name="titleText" format="string"/>
15. <attr name="titleTextSize" format="dimension"/>
16. <attr name="titleTextColor" format="color"/>
17. <attr name="titlePaddingLeft" format="dimension"/>
18. <attr name="titlePaddingTop" format="dimension"/>
19. <attr name="titlePaddingRight" format="dimension"/>
20. <attr name="titlePaddingBottom" format="dimension"/>
21. <attr name="subTitleText" format="string"/>
22. <attr name="subTitleTextSize" format="dimension"/>
23. <attr name="subTitleTextColor" format="color"/>
24. <attr name="subTitlePaddingLeft" format="dimension"/>
25. <attr name="subTitlePaddingTop" format="dimension"/>
26. <attr name="subTitlePaddingRight" format="dimension"/>
27. <attr name="subTitlePaddingBottom" format="dimension"/>
28. <declare-styleable name="CustomView">
29. <attr name="imageSrc"/>
30. <attr name="imageAspectRatio" />
31. <attr name="imageAlpha" />
32. <attr name="imagePaddingLeft" />
33. <attr name="imagePaddingTop" />
34. <attr name="imagePaddingRight" />
35. <attr name="imagePaddingBottom" />
36. <attr name="imageScaleType" />
37. <attr name="titleText" />
38. <attr name="titleTextSize" />
39. <attr name="titleTextColor" />
40. <attr name="titlePaddingLeft" />
41. <attr name="titlePaddingTop" />
42. <attr name="titlePaddingRight" />
43. <attr name="titlePaddingBottom" />
44. <attr name="subTitleText" />
45. <attr name="subTitleTextSize" />
46. <attr name="subTitleTextColor" />
47. <attr name="subTitlePaddingLeft" />
48. <attr name="subTitlePaddingTop" />
49. <attr name="subTitlePaddingRight" />
50. <attr name="subTitlePaddingBottom" />
51. </declare-styleable>
52. </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. private Bitmap imageBitmap;
3. /** 图片的长宽比 */
4. private float imageAspectRatio;
5. /** 图片的透明度 */
6. private float imageAlpha;
7. /** 图片的左padding*/
8. private int imagePaddingLeft;
9. /** 图片的上padding */
10. private int imagePaddingTop;
11. /** 图片的右padding */
12. private int imagePaddingRight;
13. /** 图片的下padding */
14. private int imagePaddingBottom;
15. /** 图片伸缩模式 */
16. private int imageScaleType;
17. /** 图片伸缩模式常量 fillXY */
18. private static final int SCALE_TYPE_FILLXY = 0;
19. /** 图片伸缩模式常量 center */
20. private static final int SCALE_TYPE_CENTER = 1;
21. /** 标题文本内容 */
22. private String titleText;
23. /** 标题文本字体大小 */
24. private int titleTextSize;
25. /** 标题文本字体颜色 */
26. private int titleTextColor;
27. /** 标题文本区域左padding */
28. private int titlePaddingLeft;
29. /** 标题文本区域上padding */
30. private int titlePaddingTop;
31. /** 标题文本区域右padding */
32. private int titlePaddingRight;
33. /** 标题文本区域下padding */
34. private int titlePaddingBottom;
35. /** 子标题文本内容 */
36. private String subTitleText;
37. /** 子标题文本字体大小 */
38. private int subTitleTextSize;
39. /** 子标题文本字体颜色 */
40. private int subTitleTextColor;
41. /** 子标题文本区域左padding */
42. private int subTitlePaddingLeft;
43. /** 子标题文本区域上padding */
44. private int subTitlePaddingTop;
45. /** 子标题文本区域右padding */
46. private int subTitlePaddingRight;
47. /** 子标题文本区域下padding */
48. private int subTitlePaddingBottom;
49. /** 控件用的paint */
50. private Paint paint;
51. private TextPaint textPaint;
52. /** 用来界定控件中不同部分的绘制区域 */
53. private Rect rect;
54. /** 宽度和高度的最小值 */
55. private static final int MIN_SIZE = 12;
56. /** 控件的宽度 */
57. private int mViewWidth;
58. /** 控件的高度 */
59. private int mViewHeight;

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

[java] view
plaincopy

1. TypedArray a = context.getTheme().obtainStyledAttributes(
2. attrs, R.styleable.CustomView, defStyle, 0);
3. int n = a.getIndexCount();
4. for (int i = 0; i < n; i++) {
5. int attr = a.getIndex(i);
6. switch (attr) {
7. case R.styleable.CustomView_imageSrc:
8. imageBitmap = BitmapFactory.decodeResource(
9. getResources(), a.getResourceId(attr, 0));
10. break;
11. case R.styleable.CustomView_imageAspectRatio:
12. imageAspectRatio = a.getFloat(attr, 1.0f);//默认长宽相等
13. break;
14. case R.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. case R.styleable.CustomView_imagePaddingLeft:
20. imagePaddingLeft = a.getDimensionPixelSize(attr, 0);
21. break;
22. case R.styleable.CustomView_imagePaddingTop:
23. imagePaddingTop = a.getDimensionPixelSize(attr, 0);
24. break;
25. case R.styleable.CustomView_imagePaddingRight:
26. imagePaddingRight = a.getDimensionPixelSize(attr, 0);
27. break;
28. case R.styleable.CustomView_imagePaddingBottom:
29. imagePaddingBottom = a.getDimensionPixelSize(attr, 0);
30. break;
31. case R.styleable.CustomView_imageScaleType:
32. imageScaleType = a.getInt(attr, 0);
33. break;
34. case R.styleable.CustomView_titleText:
35. titleText = a.getString(attr);
36. break;
37. case R.styleable.CustomView_titleTextSize:
38. titleTextSize = a.getDimensionPixelSize(
39. attr, (int) TypedValue.applyDimension(
40. TypedValue.COMPLEX_UNIT_SP, 25, getResources().getDisplayMetrics()));//默认标题字体大小25sp
41. break;
42. case R.styleable.CustomView_titleTextColor:
43. titleTextColor = a.getColor(attr, 0x00000000);//默认黑色字体
44. break;
45. case R.styleable.CustomView_titlePaddingLeft:
46. titlePaddingLeft = a.getDimensionPixelSize(attr, 0);
47. break;
48. case R.styleable.CustomView_titlePaddingTop:
49. titlePaddingTop = a.getDimensionPixelSize(attr, 0);
50. break;
51. case R.styleable.CustomView_titlePaddingRight:
52. titlePaddingRight = a.getDimensionPixelSize(attr, 0);
53. break;
54. case R.styleable.CustomView_titlePaddingBottom:
55. titlePaddingBottom = a.getDimensionPixelSize(attr, 0);
56. break;
57. case R.styleable.CustomView_subTitleText:
58. subTitleText = a.getString(attr);
59. break;
60. case R.styleable.CustomView_subTitleTextSize:
61. subTitleTextSize = a.getDimensionPixelSize(attr,
62. (int) TypedValue.applyDimension(
63. 20, TypedValue.COMPLEX_UNIT_SP, getResources().getDisplayMetrics()));//默认子标题字体大小20sp
64. break;
65. case R.styleable.CustomView_subTitleTextColor:
66. subTitleTextColor = a.getColor(attr, 0x00000000);
67. break;
68. case R.styleable.CustomView_subTitlePaddingLeft:
69. subTitlePaddingLeft = a.getDimensionPixelSize(attr, 0);
70. break;
71. case R.styleable.CustomView_subTitlePaddingTop:
72. subTitlePaddingTop = a.getDimensionPixelSize(attr, 0);
73. break;
74. case R.styleable.CustomView_subTitlePaddingRight:
75. subTitlePaddingRight = a.getDimensionPixelSize(attr, 0);
76. break;
77. case R.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. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
3. int widthMode = MeasureSpec.getMode(widthMeasureSpec);
4. int widthSize = MeasureSpec.getSize(widthMeasureSpec);
5. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
6. int heightSize = MeasureSpec.getSize(heightMeasureSpec);
7. int width;
8. int height;
9. if (widthMode == MeasureSpec.EXACTLY) {
10. width = widthSize;
11. } else {
12. int desired = getPaddingLeft() + getPaddingRight() +
13. imagePaddingLeft + imagePaddingRight;
14. desired += (imageBitmap != null) ? imageBitmap.getWidth() : 0;
15. width = Math.max(MIN_SIZE, desired);
16. if (widthMode == MeasureSpec.AT_MOST) {
17. width = Math.min(desired, widthSize);
18. }
19. }
20. if (heightMode == MeasureSpec.EXACTLY) {
21. height = heightSize;
22. } else {
23. int rawWidth = width - getPaddingLeft() - getPaddingRight();
24. int desired = (int) (getPaddingTop() + getPaddingBottom() + imageAspectRatio * rawWidth);
25. if (titleText != null) {
26. paint.setTextSize(titleTextSize);
27. FontMetrics fm = paint.getFontMetrics();
28. int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
29. desired += (textHeight + titlePaddingTop + titlePaddingBottom);
30. }
31. if (subTitleText != null) {
32. paint.setTextSize(subTitleTextSize);
33. FontMetrics fm = paint.getFontMetrics();
34. int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
35. desired += (textHeight + subTitlePaddingTop + subTitlePaddingBottom);
36. }
37. height = Math.max(MIN_SIZE, desired);
38. if (heightMode == MeasureSpec.AT_MOST) {
39. height = Math.min(desired, heightSize);
40. }
41. }
42. setMeasuredDimension(width, height);
43. }

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

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

[java] view
plaincopy

1. @Override
2. protected void onDraw(Canvas canvas) {
3. rect.left = getPaddingLeft();
4. rect.top = getPaddingTop();
5. rect.right = mViewWidth - getPaddingRight();
6. rect.bottom = mViewHeight - getPaddingBottom();
7. paint.setAlpha(255);
8. if (subTitleText != null) {
9. paint.setTextSize(subTitleTextSize);
10. paint.setColor(subTitleTextColor);
11. paint.setTextAlign(Paint.Align.LEFT);
12. FontMetrics fm = paint.getFontMetrics();
13. int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
14. int left = getPaddingLeft() + subTitlePaddingLeft;
15. int right = mViewWidth - getPaddingRight() - subTitlePaddingRight;
16. int bottom = mViewHeight - getPaddingBottom() - subTitlePaddingBottom;
17. String msg = TextUtils.ellipsize(subTitleText, textPaint, right - left, TextUtils.TruncateAt.END).toString();
18. float textWidth = paint.measureText(msg);
19. float x = textWidth < (right - left) ? left + (right - left - textWidth) / 2 : left;
20. canvas.drawText(msg, x, bottom - fm.descent, paint);
21. rect.bottom -= (textHeight + subTitlePaddingTop + subTitlePaddingBottom);
22. }
23. if (titleText != null) {
24. paint.setTextSize(titleTextSize);
25. paint.setColor(titleTextColor);
26. paint.setTextAlign(Paint.Align.LEFT);
27. FontMetrics fm = paint.getFontMetrics();
28. int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
29. float left = getPaddingLeft() + titlePaddingLeft;
30. float right = mViewWidth - getPaddingRight() - titlePaddingRight;
31. float bottom = rect.bottom - titlePaddingBottom;
32. String msg = TextUtils.ellipsize(titleText, textPaint, right - left, TextUtils.TruncateAt.END).toString();
33. float textWidth = paint.measureText(msg);
34. float x = textWidth < right - left ? left + (right - left - textWidth) / 2 : left;
35. canvas.drawText(msg, x, bottom - fm.descent, paint);
36. rect.bottom -= (textHeight + titlePaddingTop + titlePaddingBottom);
37. }
38. if (imageBitmap != null) {
39. paint.setAlpha((int) (255 * imageAlpha));
40. rect.left += imagePaddingLeft;
41. rect.top += imagePaddingTop;
42. rect.right -= imagePaddingRight;
43. rect.bottom -= imagePaddingBottom;
44. if (imageScaleType == SCALE_TYPE_FILLXY) {
45. canvas.drawBitmap(imageBitmap, null, rect, paint);
46. } else if (imageScaleType == SCALE_TYPE_CENTER) {
47. int bw = imageBitmap.getWidth();
48. int bh = imageBitmap.getHeight();
49. if (bw < rect.right - rect.left) {
50. int delta = (rect.right - rect.left - bw) / 2;
51. rect.left += delta;
52. rect.right -= delta;
53. }
54. if (bh < rect.bottom - rect.top) {
55. int delta = (rect.bottom - rect.top - bh) / 2;
56. rect.top += delta;
57. rect.bottom -= delta;
58. }
59. canvas.drawBitmap(imageBitmap, null, rect, paint);
60. }
61. }
62. }

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

[java] view
plaincopy

1. public void setImageBitmap(Bitmap bitmap) {
2. imageBitmap = bitmap;
3. requestLayout();
4. invalidate();
5. }
6. public void setTitleText(String text) {
7. titleText = text;
8. requestLayout();
9. invalidate();
10. }
11. public void setSubTitleText(String text) {
12. subTitleText = text;
13. requestLayout();
14. invalidate();
15. }

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

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

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

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

源码下载