Android自定义View使用详细分析与绘制流程全解

目录

目录.png

1. 自定义View基础

1.1 分类

自定义View的实现方式有以下几种

类型	定义
自定义组合控件	多个控件组合成为一个新的控件，方便多处复用
继承系统View控件	继承自TextView等系统控件，在系统控件的基础功能上进行扩展
继承View	不复用系统控件逻辑，继承View进行功能定义
继承系统ViewGroup	继承自LinearLayout等系统控件，在系统控件的基础功能上进行扩展
继承ViewViewGroup	不复用系统控件逻辑，继承ViewGroup进行功能定义

1.2 View绘制流程

View的绘制基本由measure()、layout()、draw()这个三个函数完成

函数	作用	相关方法
measure()	测量View的宽高	measure(),setMeasuredDimension(),onMeasure()
layout()	计算当前View以及子View的位置	layout(),onLayout(),setFrame()
draw()	视图的绘制工作	draw(),onDraw()

1.3 坐标系

在Android坐标系中，以屏幕左上角作为原点，这个原点向右是X轴的正轴，向下是Y轴正轴。如下所示：

Android坐标系.png

除了Android坐标系，还存在View坐标系，View坐标系内部关系如图所示。

视图坐标系.png

View获取自身高度

由上图可算出View的高度：

• width = getRight() - getLeft();
• height = getBottom() - getTop();

View的源码当中提供了getWidth()和getHeight()方法用来获取View的宽度和高度，其内部方法和上文所示是相同的，我们可以直接调用来获取View得宽高。

View自身的坐标

通过如下方法可以获取View到其父控件的距离。

getRawX：获取的是真实X坐标，相对于屏幕左上角
getRawY：获取的是真实Y坐标，相对于屏幕左上角
getLeft：获取的是View自身的左边距离父布局的左边的距离
getBottom：获取的是View自身的底部距离父布局的顶部的距离
getRight：获取的是View自身的右边距离父布局的左边的距离
getTop：获取的是View自身的顶部到父布局顶部的距离
getX：获取的是点击事件距离控件左边的距离
getY：获取的是点击事件距离控件顶边的距离
 

1.4 构造函数

无论是我们继承系统View还是直接继承View，都需要对构造函数进行重写，构造函数有多个，至少要重写其中一个才行。如我们新建TestView，

1. public class TestView extends View {

2. /**

3. * 在java代码里new的时候会用到

4. * @param context

5. */

6. public TestView(Context context) {

7. super(context);

8. }

10. /**

11. * 在xml布局文件中使用时自动调用

12. * @param context

13. */

14. public TestView(Context context, @Nullable AttributeSet attrs) {

15. super(context, attrs);

16. }

18. /**

19. * 不会自动调用，如果有默认style时，在第二个构造函数中调用

20. * @param context

21. * @param attrs

22. * @param defStyleAttr

23. */

24. public TestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

25. super(context, attrs, defStyleAttr);

26. }

29. /**

30. * 只有在API版本>21时才会用到

31. * 不会自动调用，如果有默认style时，在第二个构造函数中调用

32. * @param context

33. * @param attrs

34. * @param defStyleAttr

35. * @param defStyleRes

36. */

37. @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)

38. public TestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {

39. super(context, attrs, defStyleAttr, defStyleRes);

40. }

41. }

1.5 自定义属性

Android系统的控件以android开头的都是系统自带的属性。为了方便配置自定义View的属性，我们也可以自定义属性值。
Android自定义属性可分为以下几步:

1. 自定义一个View
2. 编写values/attrs.xml，在其中编写styleable和item等标签元素
3. 在布局文件中View使用自定义的属性（注意namespace）
4. 在View的构造方法中通过TypedArray获取

实例说明

• 自定义属性的声明文件

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <declare-styleable name="test">

4. <attr name="text" format="string" />

5. <attr name="testAttr" format="integer" />

6. </declare-styleable>

7. </resources>

• 自定义View类

1. public class MyTextView extends View {

2. private static final String TAG = MyTextView.class.getSimpleName();

4. //在View的构造方法中通过TypedArray获取

5. public MyTextView(Context context, AttributeSet attrs) {

6. super(context, attrs);

7. TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.test);

8. String text = ta.getString(R.styleable.test_testAttr);

9. int textAttr = ta.getInteger(R.styleable.test_text, -1);

10. Log.e(TAG, "text = " + text + " , textAttr = " + textAttr);

11. ta.recycle();

12. }

13. }

• 布局文件中使用

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:tools="http://schemas.android.com/tools"

3. xmlns:app="http://schemas.android.com/apk/res/com.example.test"

4. android:layout_width="match_parent"

5. android:layout_height="match_parent" >

7. <com.example.test.MyTextView

8. android:layout_width="100dp"

9. android:layout_height="200dp"

10. app:testAttr="520"

11. app:text="helloworld" />

13. </RelativeLayout>

属性值的类型format

(1). reference：参考某一资源ID

• 属性定义：

1. <declare-styleable name = "名称">

2. <attr name = "background" format = "reference" />

3. </declare-styleable>

• 属性使用：

<ImageView android:background = "@drawable/图片ID"/>

(2). color：颜色值

• 属性定义：

<attr name = "textColor" format = "color" />

• 属性使用：

<TextView android:textColor = "#00FF00" />

(3). boolean：布尔值

• 属性定义：

<attr name = "focusable" format = "boolean" />

• 属性使用：

<Button android:focusable = "true"/>

(4). dimension：尺寸值

• 属性定义：

<attr name = "layout_width" format = "dimension" />

• 属性使用：

1. <Button android:layout_width = "42dip"/>

(5). float：浮点值

• 属性定义：

<attr name = "fromAlpha" format = "float" />

• 属性使用：

<alpha android:fromAlpha = "1.0"/>

(6). integer：整型值

• 属性定义：

<attr name = "framesCount" format="integer" />

• 属性使用：

<animated-rotate android:framesCount = "12"/>

(7). string：字符串

• 属性定义：

<attr name = "text" format = "string" />

• 属性使用：

<TextView android:text = "我是文本"/>

(8). fraction：百分数

• 属性定义：

<attr name = "pivotX" format = "fraction" />

• 属性使用：

<rotate android:pivotX = "200%"/>

(9). enum：枚举值

• 属性定义：

1. <declare-styleable name="名称">

2. <attr name="orientation">

3. <enum name="horizontal" value="0" />

4. <enum name="vertical" value="1" />

5. </attr>

6. </declare-styleable>

• 属性使用：

1. <LinearLayout

2. android:orientation = "vertical">

3. </LinearLayout>

注意：枚举类型的属性在使用的过程中只能同时使用其中一个，不能 android:orientation = “horizontal｜vertical"

(10). flag：位或运算

• 属性定义：

1. <declare-styleable name="名称">

2. <attr name="gravity">

3. <flag name="top" value="0x01" />

4. <flag name="bottom" value="0x02" />

5. <flag name="left" value="0x04" />

6. <flag name="right" value="0x08" />

7. <flag name="center_vertical" value="0x16" />

8. ...

9. </attr>

10. </declare-styleable>

• 属性使用：

<TextView android:gravity="bottom|left"/>

注意：位运算类型的属性在使用的过程中可以使用多个值

(11). 混合类型：属性定义时可以指定多种类型值

• 属性定义：

1. <declare-styleable name = "名称">

2. <attr name = "background" format = "reference|color" />

3. </declare-styleable>

• 属性使用：

1. <ImageView

2. android:background = "@drawable/图片ID" />

3. 或者：

4. <ImageView

5. android:background = "#00FF00" />

android控件获取属性值的优先顺序：

1.在XMl文件中直接定义；

2.在XMl文件引用的style;

3.就是从如上所说的defStyleAttr中取值；

4.从defStyleRes取值；

5.从Activity或者Application的Theme中取值；

2. View绘制流程

这一章节偏向于解释View绘制的源码实现，可以更好地帮助我们掌握整个绘制过程。

View的绘制基本由measure()、layout()、draw()这个三个函数完成

函数	作用	相关方法
measure()	测量View的宽高	measure(),setMeasuredDimension(),onMeasure()
layout()	计算当前View以及子View的位置	layout(),onLayout(),setFrame()
draw()	视图的绘制工作	draw(),onDraw()

2.1 Measure()

MeasureSpec

MeasureSpec是View的内部类，它封装了一个View的尺寸，在onMeasure()当中会根据这个MeasureSpec的值来确定View的宽高。

MeasureSpec的值保存在一个int值当中。一个int值有32位，前两位表示模式mode后30位表示大小size。即MeasureSpec = mode + size。

在MeasureSpec当中一共存在三种mode：UNSPECIFIED、EXACTLY 和
AT_MOST。

对于View来说，MeasureSpec的mode和Size有如下意义

模式	意义	对应
EXACTLY	精准模式，View需要一个精确值，这个值即为MeasureSpec当中的Size	match_parent
AT_MOST	最大模式，View的尺寸有一个最大值，View不可以超过MeasureSpec当中的Size值	wrap_content
UNSPECIFIED	无限制，View对尺寸没有任何限制，View设置为多大就应当为多大	一般系统内部使用

使用方式

1. // 获取测量模式（Mode）

2. int specMode = MeasureSpec.getMode(measureSpec)

4. // 获取测量大小（Size）

5. int specSize = MeasureSpec.getSize(measureSpec)

7. // 通过Mode 和 Size 生成新的SpecMode

8. int measureSpec=MeasureSpec.makeMeasureSpec(size, mode);

在View当中，MeasureSpace的测量代码如下：

1. public static int getChildMeasureSpec(int spec, int padding, int childDimension) {

2. int specMode = MeasureSpec.getMode(spec);

3. int specSize = MeasureSpec.getSize(spec);

5. int size = Math.max(0, specSize - padding);

7. int resultSize = 0;

8. int resultMode = 0;

10. switch (specMode) {

11. //当父View要求一个精确值时，为子View赋值

12. case MeasureSpec.EXACTLY:

13. //如果子view有自己的尺寸，则使用自己的尺寸

14. if (childDimension >= 0) {

15. resultSize = childDimension;

16. resultMode = MeasureSpec.EXACTLY;

17. //当子View是match_parent,将父View的大小赋值给子View

18. } else if (childDimension == LayoutParams.MATCH_PARENT) {

19. resultSize = size;

20. resultMode = MeasureSpec.EXACTLY;

21. //如果子View是wrap_content，设置子View的最大尺寸为父View

22. } else if (childDimension == LayoutParams.WRAP_CONTENT) {

23. resultSize = size;

24. resultMode = MeasureSpec.AT_MOST;

25. }

26. break;

28. // 父布局给子View了一个最大界限

29. case MeasureSpec.AT_MOST:

30. if (childDimension >= 0) {

31. //如果子view有自己的尺寸，则使用自己的尺寸

32. resultSize = childDimension;

33. resultMode = MeasureSpec.EXACTLY;

34. } else if (childDimension == LayoutParams.MATCH_PARENT) {

35. // 父View的尺寸为子View的最大尺寸

36. resultSize = size;

37. resultMode = MeasureSpec.AT_MOST;

38. } else if (childDimension == LayoutParams.WRAP_CONTENT) {

39. //父View的尺寸为子View的最大尺寸

40. resultSize = size;

41. resultMode = MeasureSpec.AT_MOST;

42. }

43. break;

45. // 父布局对子View没有做任何限制

46. case MeasureSpec.UNSPECIFIED:

47. if (childDimension >= 0) {

48. //如果子view有自己的尺寸，则使用自己的尺寸

49. resultSize = childDimension;

50. resultMode = MeasureSpec.EXACTLY;

51. } else if (childDimension == LayoutParams.MATCH_PARENT) {

52. //因父布局没有对子View做出限制，当子View为MATCH_PARENT时则大小为0

53. resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;

54. resultMode = MeasureSpec.UNSPECIFIED;

55. } else if (childDimension == LayoutParams.WRAP_CONTENT) {

56. //因父布局没有对子View做出限制，当子View为WRAP_CONTENT时则大小为0

57. resultSize = View.sUseZeroUnspecifiedMeasureSpec ? 0 : size;

58. resultMode = MeasureSpec.UNSPECIFIED;

59. }

60. break;

61. }

63. return MeasureSpec.makeMeasureSpec(resultSize, resultMode);

64. }

这里需要注意，这段代码只是在为子View设置MeasureSpec参数而不是实际的设置子View的大小。子View的最终大小需要在View中具体设置。

从源码可以看出来，子View的测量模式是由自身LayoutParam和父View的MeasureSpec来决定的。

在测量子View大小时：

父View mode	子View
UNSPECIFIED	父布局没有做出限制，子View有自己的尺寸，则使用，如果没有则为0
EXACTLY	父布局采用精准模式，有确切的大小，如果有大小则直接使用，如果子View没有大小，子View不得超出父view的大小范围
AT_MOST	父布局采用最大模式，存在确切的大小，如果有大小则直接使用，如果子View没有大小，子View不得超出父view的大小范围

onMeasure()

整个测量过程的入口位于View的measure方法当中，该方法做了一些参数的初始化之后调用了onMeasure方法，这里我们主要分析onMeasure。

onMeasure方法的源码如下：

1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

3. setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),

4. getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));

5. }

很简单这里只有一行代码，涉及到了三个方法我们挨个分析。

• setMeasuredDimension(int measuredWidth, int measuredHeight) ：该方法用来设置View的宽高，在我们自定义View时也会经常用到。
• getDefaultSize(int size, int measureSpec)：该方法用来获取View默认的宽高，结合源码来看。

1. /**

2. * 有两个参数size和measureSpec

3. * 1、size表示View的默认大小，它的值是通过`getSuggestedMinimumWidth()方法来获取的，之后我们再分析。

4. * 2、measureSpec则是我们之前分析的MeasureSpec，里面存储了View的测量值以及测量模式

5. */

6. public static int getDefaultSize(int size, int measureSpec) {

7. int result = size;

8. int specMode = MeasureSpec.getMode(measureSpec);

9. int specSize = MeasureSpec.getSize(measureSpec);

11. //从这里我们看出，对于AT_MOST和EXACTLY在View当中的处理是完全相同的。所以在我们自定义View时要对这两种模式做出处理。

12. switch (specMode) {

13. case MeasureSpec.UNSPECIFIED:

14. result = size;

15. break;

16. case MeasureSpec.AT_MOST:

17. case MeasureSpec.EXACTLY:

18. result = specSize;

19. break;

20. }

21. return result;

22. }

• getSuggestedMinimumWidth()：getHeight和该方法原理是一样的，这里只分析这一个。

1. //当View没有设置背景时，默认大小就是mMinWidth，这个值对应Android:minWidth属性，如果没有设置时默认为0.

2. //如果有设置背景，则默认大小为mMinWidth和mBackground.getMinimumWidth()当中的较大值。

3. protected int getSuggestedMinimumWidth() {

4. return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth());

5. }

---

ViewGroup的测量过程与View有一点点区别，其本身是继承自View，它没有对View的measure方法以及onMeasure方法进行重写。

为什么没有重写onMeasure呢？ViewGroup除了要测量自身宽高外还需要测量各个子View的大小，而不同的布局测量方式也都不同（可参考LinearLayout以及FrameLayout），所以没有办法统一设置。因此它提供了测量子View的方法measureChildren()以及measureChild()帮助我们对子View进行测量。

measureChildren()以及measureChild()的源码这里不再分析，大致流程就是遍历所有的子View，然后调用View的measure()方法，让子View测量自身大小。具体测量流程上面也以及介绍过了

---

measure过程会因为布局的不同或者需求的不同而呈现不同的形式，使用时还是要根据业务场景来具体分析，如果想再深入研究可以看一下LinearLayout的onMeasure方法。

2.2 Layout()

要计算位置首先要对Android坐标系有所了解，前面的内容我们也有介绍过。

layout()过程，对于View来说用来计算View的位置参数,对于ViewGroup来说，除了要测量自身位置，还需要测量子View的位置。

layout()方法是整个Layout()流程的入口，看一下这部分源码

1. /**

2. * 这里的四个参数l、t、r、b分别代表View的左、上、右、下四个边界相对于其父View的距离。

3. *

4. */

5. public void layout(int l, int t, int r, int b) {

6. if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {

7. onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);

8. mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;

9. }

11. int oldL = mLeft;

12. int oldT = mTop;

13. int oldB = mBottom;

14. int oldR = mRight;

16. //这里通过setFrame或setOpticalFrame方法确定View在父容器当中的位置。

17. boolean changed = isLayoutModeOptical(mParent) ?

18. setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

20. //调用onLayout方法。onLayout方法是一个空实现，不同的布局会有不同的实现。

21. if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {

22. onLayout(changed, l, t, r, b);

24. }

26. }

从源码我们知道，在layout()方法中已经通过setOpticalFrame(l, t, r, b)或 setFrame(l, t, r, b)方法对View自身的位置进行了设置，所以onLayout(changed, l, t, r, b)方法主要是ViewGroup对子View的位置进行计算。

有兴趣的可以看一下LinearLayout的onLayout源码，可以帮助加深理解。

2.3 Draw()

draw流程也就是的View绘制到屏幕上的过程，整个流程的入口在View的draw()方法之中，而源码注释也写的很明白，整个过程可以分为6个步骤。

1. 如果需要，绘制背景。
2. 有过有必要，保存当前canvas。
3. 绘制View的内容。
4. 绘制子View。
5. 如果有必要，绘制边缘、阴影等效果。
6. 绘制装饰，如滚动条等等。

通过各个步骤的源码再做分析：

1. public void draw(Canvas canvas) {

4. int saveCount;

5. // 1. 如果需要，绘制背景

6. if (!dirtyOpaque) {

7. drawBackground(canvas);

8. }

10. // 2. 有过有必要，保存当前canvas。

11. final int viewFlags = mViewFlags;

13. if (!verticalEdges && !horizontalEdges) {

14. // 3. 绘制View的内容。

15. if (!dirtyOpaque) onDraw(canvas);

17. // 4. 绘制子View。

18. dispatchDraw(canvas);

20. drawAutofilledHighlight(canvas);

22. // Overlay is part of the content and draws beneath Foreground

23. if (mOverlay != null && !mOverlay.isEmpty()) {

24. mOverlay.getOverlayView().dispatchDraw(canvas);

25. }

27. // 6. 绘制装饰，如滚动条等等。

28. onDrawForeground(canvas);

30. // we're done...

31. return;

32. }

33. }

35. /**

36. * 1.绘制View背景

37. */

38. private void drawBackground(Canvas canvas) {

39. //获取背景

40. final Drawable background = mBackground;

41. if (background == null) {

42. return;

43. }

45. setBackgroundBounds();

47. //获取便宜值scrollX和scrollY，如果scrollX和scrollY都不等于0，则会在平移后的canvas上面绘制背景。

48. final int scrollX = mScrollX;

49. final int scrollY = mScrollY;

50. if ((scrollX | scrollY) == 0) {

51. background.draw(canvas);

52. } else {

53. canvas.translate(scrollX, scrollY);

54. background.draw(canvas);

55. canvas.translate(-scrollX, -scrollY);

56. }

57. }

59. /**

60. * 3.绘制View的内容,该方法是一个空的实现，在各个业务当中自行处理。

61. */

62. protected void onDraw(Canvas canvas) {

63. }

65. /**

66. * 4. 绘制子View。该方法在View当中是一个空的实现，在各个业务当中自行处理。

67. * 在ViewGroup当中对dispatchDraw方法做了实现，主要是遍历子View，并调用子类的draw方法，一般我们不需要自己重写该方法。

68. */

69. protected void dispatchDraw(Canvas canvas) {

71. }

3. 自定义组合控件

自定义组合控件就是将多个控件组合成为一个新的控件，主要解决多次重复使用同一类型的布局。如我们顶部的HeaderView以及dailog等，我们都可以把他们组合成一个新的控件。

我们通过一个自定义HeaderView实例来了解自定义组合控件的用法。

1. 编写布局文件

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:layout_width="match_parent"

3. android:id="@+id/header_root_layout"

4. android:layout_height="45dp"

5. android:background="#827192">

7. <ImageView

8. android:id="@+id/header_left_img"

9. android:layout_width="45dp"

10. android:layout_height="45dp"

11. android:layout_alignParentLeft="true"

12. android:paddingLeft="12dp"

13. android:paddingRight="12dp"

14. android:src="@drawable/back"

15. android:scaleType="fitCenter"/>

17. <TextView

18. android:id="@+id/header_center_text"

19. android:layout_width="wrap_content"

20. android:layout_height="wrap_content"

21. android:layout_centerInParent="true"

22. android:lines="1"

23. android:maxLines="11"

24. android:ellipsize="end"

25. android:text="title"

26. android:textStyle="bold"

27. android:textColor="#ffffff"/>

29. <ImageView

30. android:id="@+id/header_right_img"

31. android:layout_width="45dp"

32. android:layout_height="45dp"

33. android:layout_alignParentRight="true"

34. android:src="@drawable/add"

35. android:scaleType="fitCenter"

36. android:paddingRight="12dp"

37. android:paddingLeft="12dp"/>

39. </RelativeLayout>

布局很简单，中间是title的文字，左边是返回按钮，右边是一个添加按钮。

2. 实现构造方法

1. //因为我们的布局采用RelativeLayout，所以这里继承RelativeLayout。

2. //关于各个构造方法的介绍可以参考前面的内容

3. public class YFHeaderView extends RelativeLayout {

5. public YFHeaderView(Context context) {

6. super(context);

7. }

9. public YFHeaderView(Context context, AttributeSet attrs) {

10. super(context, attrs);

11. }

13. public YFHeaderView(Context context, AttributeSet attrs, int defStyleAttr) {

14. super(context, attrs, defStyleAttr);

15. }

17. }

3. 初始化UI

1. //初始化UI，可根据业务需求设置默认值。

2. private void initView(Context context) {

3. LayoutInflater.from(context).inflate(R.layout.view_header, this, true);

4. img_left = (ImageView) findViewById(R.id.header_left_img);

5. img_right = (ImageView) findViewById(R.id.header_right_img);

6. text_center = (TextView) findViewById(R.id.header_center_text);

7. layout_root = (RelativeLayout) findViewById(R.id.header_root_layout);

8. layout_root.setBackgroundColor(Color.BLACK);

9. text_center.setTextColor(Color.WHITE);

11. }

4. 提供对外的方法

可以根据业务需求对外暴露一些方法。

1. //设置标题文字的方法

2. private void setTitle(String title) {

3. if (!TextUtils.isEmpty(title)) {

4. text_center.setText(title);

5. }

6. }

7. //对左边按钮设置事件的方法

8. private void setLeftListener(OnClickListener onClickListener) {

9. img_left.setOnClickListener(onClickListener);

10. }

12. //对右边按钮设置事件的方法

13. private void setRightListener(OnClickListener onClickListener) {

14. img_right.setOnClickListener(onClickListener);

15. }

5. 在布局当中引用该控件

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:app="http://schemas.android.com/apk/res-auto"

3. android:orientation="vertical"

4. android:layout_width="match_parent"

5. android:layout_height="match_parent">

7. <com.example.yf.view.YFHeaderView

8. android:layout_width="match_parent"

9. android:layout_height="45dp">

11. </com.example.yf.view.YFHeaderView>

13. </LinearLayout>

到这里基本的功能已经有了。除了这些基础功能外，我们还可以做一些功能扩展，比如可以在布局时设置我的View显示的元素，因为可能有些需求并不需要右边的按钮。这时候就需要用到自定义属性来解决了。

前面已经简单介绍过自定义属性的相关知识，我们之间看代码

1.首先在values目录下创建attrs.xml

内容如下：

1. <resources>

3. <declare-styleable name="HeaderBar">

4. <attr name="title_text_clolor" format="color"></attr>

5. <attr name="title_text" format="string"></attr>

6. <attr name="show_views">

7. <flag name="left_text" value="0x01" />

8. <flag name="left_img" value="0x02" />

9. <flag name="right_text" value="0x04" />

10. <flag name="right_img" value="0x08" />

11. <flag name="center_text" value="0x10" />

12. <flag name="center_img" value="0x20" />

13. </attr>

14. </declare-styleable>

15. </resources>

这里我们定义了三个属性，文字内容、颜色以及要显示的元素。

2.在java代码中进行设置

1. private void initAttrs(Context context, AttributeSet attrs) {

2. TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HeaderBar);

3. //获取title_text属性

4. String title = mTypedArray.getString(R.styleable.HeaderBar_title_text);

5. if (!TextUtils.isEmpty(title)) {

6. text_center.setText(title);

7. }

8. //获取show_views属性，如果没有设置时默认为0x26

9. showView = mTypedArray.getInt(R.styleable.HeaderBar_show_views, 0x26);

10. text_center.setTextColor(mTypedArray.getColor(R.styleable.HeaderBar_title_text_clolor, Color.WHITE));

11. mTypedArray.recycle();

12. showView(showView);

14. }

16. private void showView(int showView) {

17. //将showView转换为二进制数，根据不同位置上的值设置对应View的显示或者隐藏。

18. Long data = Long.valueOf(Integer.toBinaryString(showView));

19. element = String.format("%06d", data);

20. for (int i = 0; i < element.length(); i++) {

21. if(i == 0) ;

22. if(i == 1) text_center.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

23. if(i == 2) img_right.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

24. if(i == 3) ;

25. if(i == 4) img_left.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

26. if(i == 5) ;

27. }

29. }

3.在布局文件中进行设置

1. <com.example.yf.view.YFHeaderView

2. android:layout_width="match_parent"

3. android:layout_height="45dp"

4. app:title_text="标题"

5. app:show_views="center_text|left_img|right_img">

7. </com.example.yf.view.YFHeaderView>

OK，到这里整个View基本定义完成。整个YFHeaderView的代码如下

1. public class YFHeaderView extends RelativeLayout {

3. private ImageView img_left;

4. private TextView text_center;

5. private ImageView img_right;

6. private RelativeLayout layout_root;

7. private Context context;

8. String element;

10. private int showView;

12. public YFHeaderView(Context context) {

13. super(context);

14. this.context = context;

15. initView(context);

16. }

18. public YFHeaderView(Context context, AttributeSet attrs) {

19. super(context, attrs);

20. this.context = context;

21. initView(context);

22. initAttrs(context, attrs);

23. }

25. public YFHeaderView(Context context, AttributeSet attrs, int defStyleAttr) {

26. super(context, attrs, defStyleAttr);

27. this.context = context;

28. initView(context);

29. initAttrs(context, attrs);

30. }

32. private void initAttrs(Context context, AttributeSet attrs) {

33. TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.HeaderBar);

34. String title = mTypedArray.getString(R.styleable.HeaderBar_title_text);

35. if (!TextUtils.isEmpty(title)) {

36. text_center.setText(title);

37. }

38. showView = mTypedArray.getInt(R.styleable.HeaderBar_show_views, 0x26);

39. text_center.setTextColor(mTypedArray.getColor(R.styleable.HeaderBar_title_text_clolor, Color.WHITE));

40. mTypedArray.recycle();

41. showView(showView);

43. }

45. private void showView(int showView) {

46. Long data = Long.valueOf(Integer.toBinaryString(showView));

47. element = String.format("%06d", data);

48. for (int i = 0; i < element.length(); i++) {

49. if(i == 0) ;

50. if(i == 1) text_center.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

51. if(i == 2) img_right.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

52. if(i == 3) ;

53. if(i == 4) img_left.setVisibility(element.substring(i,i+1).equals("1")? View.VISIBLE:View.GONE);

54. if(i == 5) ;

55. }

57. }

59. private void initView(final Context context) {

60. LayoutInflater.from(context).inflate(R.layout.view_header, this, true);

61. img_left = (ImageView) findViewById(R.id.header_left_img);

62. img_right = (ImageView) findViewById(R.id.header_right_img);

63. text_center = (TextView) findViewById(R.id.header_center_text);

64. layout_root = (RelativeLayout) findViewById(R.id.header_root_layout);

65. layout_root.setBackgroundColor(Color.BLACK);

66. text_center.setTextColor(Color.WHITE);

68. img_left.setOnClickListener(new OnClickListener() {

69. @Override

70. public void onClick(View view) {

71. Toast.makeText(context, element + "", Toast.LENGTH_SHORT).show();

72. }

73. });

74. }

76. private void setTitle(String title) {

77. if (!TextUtils.isEmpty(title)) {

78. text_center.setText(title);

79. }

80. }

83. private void setLeftListener(OnClickListener onClickListener) {

84. img_left.setOnClickListener(onClickListener);

85. }

87. private void setRightListener(OnClickListener onClickListener) {

88. img_right.setOnClickListener(onClickListener);

89. }

91. }

4. 继承系统控件

继承系统的控件可以分为继承View子类（如TextVIew等）和继承ViewGroup子类(如LinearLayout等)，根据业务需求的不同，实现的方式也会有比较大的差异。这里介绍一个比较简单的，继承自View的实现方式。

业务需求：为文字设置背景，并在布局中间添加一条横线。

因为这种实现方式会复用系统的逻辑，大多数情况下我们希望复用系统的onMeaseur和onLayout流程，所以我们只需要重写onDraw方法 。实现非常简单，话不多说，直接上代码。

1. public class LineTextView extends TextView {

3. //定义画笔，用来绘制中心曲线

4. private Paint mPaint;

6. /**

7. * 创建构造方法

8. * @param context

9. */

10. public LineTextView(Context context) {

11. super(context);

12. init();

13. }

15. public LineTextView(Context context, @Nullable AttributeSet attrs) {

16. super(context, attrs);

17. init();

18. }

20. public LineTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

21. super(context, attrs, defStyleAttr);

22. init();

23. }

25. private void init() {

26. mPaint = new Paint();

27. mPaint.setColor(Color.BLACK);

28. }

30. //重写draw方法，绘制我们需要的中间线以及背景

31. @Override

32. protected void onDraw(Canvas canvas) {

33. super.onDraw(canvas);

34. int width = getWidth();

35. int height = getHeight();

36. mPaint.setColor(Color.BLUE);

37. //绘制方形背景

38. RectF rectF = new RectF(0,0,width,height);

39. canvas.drawRect(rectF,mPaint);

40. mPaint.setColor(Color.BLACK);

41. //绘制中心曲线，起点坐标（0,height/2），终点坐标（width,height/2）

42. canvas.drawLine(0,height/2,width,height/2,mPaint);

43. }

44. }

对于View的绘制还需要对Paint()、canvas以及Path的使用有所了解，不清楚的可以稍微了解一下。

这里的实现比较简单，因为具体实现会与业务环境密切相关，这里只是做一个参考。

5. 直接继承View

直接继承View会比上一种实现方复杂一些，这种方法的使用情景下，完全不需要复用系统控件的逻辑，除了要重写onDraw外还需要对onMeasure方法进行重写。

我们用自定义View来绘制一个正方形。

• 首先定义构造方法，以及做一些初始化操作

1. ublic class RectView extends View{

2. //定义画笔

3. private Paint mPaint = new Paint();

5. /**

6. * 实现构造方法

7. * @param context

8. */

9. public RectView(Context context) {

10. super(context);

11. init();

12. }

14. public RectView(Context context, @Nullable AttributeSet attrs) {

15. super(context, attrs);

16. init();

17. }

19. public RectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

20. super(context, attrs, defStyleAttr);

21. init();

22. }

24. private void init() {

25. mPaint.setColor(Color.BLUE);

27. }

29. }

• 重写draw方法，绘制正方形，注意对padding属性进行设置

1. /**

2. * 重写draw方法

3. * @param canvas

4. */

5. @Override

6. protected void onDraw(Canvas canvas) {

7. super.onDraw(canvas);

8. //获取各个编剧的padding值

9. int paddingLeft = getPaddingLeft();

10. int paddingRight = getPaddingRight();

11. int paddingTop = getPaddingTop();

12. int paddingBottom = getPaddingBottom();

13. //获取绘制的View的宽度

14. int width = getWidth()-paddingLeft-paddingRight;

15. //获取绘制的View的高度

16. int height = getHeight()-paddingTop-paddingBottom;

17. //绘制View，左上角坐标（0+paddingLeft,0+paddingTop），右下角坐标（width+paddingLeft,height+paddingTop）

18. canvas.drawRect(0+paddingLeft,0+paddingTop,width+paddingLeft,height+paddingTop,mPaint);

19. }

之前我们讲到过View的measure过程，再看一下源码对这一步的处理

1. public static int getDefaultSize(int size, int measureSpec) {

2. int result = size;

3. int specMode = MeasureSpec.getMode(measureSpec);

4. int specSize = MeasureSpec.getSize(measureSpec);

6. switch (specMode) {

7. case MeasureSpec.UNSPECIFIED:

8. result = size;

9. break;

10. case MeasureSpec.AT_MOST:

11. case MeasureSpec.EXACTLY:

12. result = specSize;

13. break;

14. }

15. return result;

16. }

在View的源码当中并没有对AT_MOST和EXACTLY两个模式做出区分，也就是说View在wrap_content和match_parent两个模式下是完全相同的，都会是match_parent，显然这与我们平时用的View不同，所以我们要重写onMeasure方法。

• 重写onMeasure方法

1. /**

2. * 重写onMeasure方法

3. *

4. * @param widthMeasureSpec

5. * @param heightMeasureSpec

6. */

7. @Override

8. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

9. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

10. int widthSize = MeasureSpec.getSize(widthMeasureSpec);

11. int widthMode = MeasureSpec.getMode(widthMeasureSpec);

12. int heightSize = MeasureSpec.getSize(heightMeasureSpec);

13. int heightMode = MeasureSpec.getMode(heightMeasureSpec);

15. //处理wrap_contentde情况

16. if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {

17. setMeasuredDimension(300, 300);

18. } else if (widthMode == MeasureSpec.AT_MOST) {

19. setMeasuredDimension(300, heightSize);

20. } else if (heightMode == MeasureSpec.AT_MOST) {

21. setMeasuredDimension(widthSize, 300);

22. }

23. }

整个自定义View的代码如下:

1. public class RectView extends View {

2. //定义画笔

3. private Paint mPaint = new Paint();

5. /**

6. * 实现构造方法

7. *

8. * @param context

9. */

10. public RectView(Context context) {

11. super(context);

12. init();

13. }

15. public RectView(Context context, @Nullable AttributeSet attrs) {

16. super(context, attrs);

17. init();

18. }

20. public RectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

21. super(context, attrs, defStyleAttr);

22. init();

23. }

25. private void init() {

26. mPaint.setColor(Color.BLUE);

28. }

30. /**

31. * 重写onMeasure方法

32. *

33. * @param widthMeasureSpec

34. * @param heightMeasureSpec

35. */

36. @Override

37. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

38. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

39. int widthSize = MeasureSpec.getSize(widthMeasureSpec);

40. int widthMode = MeasureSpec.getMode(widthMeasureSpec);

41. int heightSize = MeasureSpec.getSize(heightMeasureSpec);

42. int heightMode = MeasureSpec.getMode(heightMeasureSpec);

44. if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {

45. setMeasuredDimension(300, 300);

46. } else if (widthMode == MeasureSpec.AT_MOST) {

47. setMeasuredDimension(300, heightSize);

48. } else if (heightMode == MeasureSpec.AT_MOST) {

49. setMeasuredDimension(widthSize, 300);

50. }

51. }

53. /**

54. * 重写draw方法

55. *

56. * @param canvas

57. */

58. @Override

59. protected void onDraw(Canvas canvas) {

60. super.onDraw(canvas);

61. //获取各个编剧的padding值

62. int paddingLeft = getPaddingLeft();

63. int paddingRight = getPaddingRight();

64. int paddingTop = getPaddingTop();

65. int paddingBottom = getPaddingBottom();

66. //获取绘制的View的宽度

67. int width = getWidth() - paddingLeft - paddingRight;

68. //获取绘制的View的高度

69. int height = getHeight() - paddingTop - paddingBottom;

70. //绘制View，左上角坐标（0+paddingLeft,0+paddingTop），右下角坐标（width+paddingLeft,height+paddingTop）

71. canvas.drawRect(0 + paddingLeft, 0 + paddingTop, width + paddingLeft, height + paddingTop, mPaint);

72. }

73. }

整个过程大致如下，直接继承View时需要有几点注意：

1、在onDraw当中对padding属性进行处理。
2、在onMeasure过程中对wrap_content属性进行处理。
3、至少要有一个构造方法。

6. 继承ViewGroup

自定义ViewGroup的过程相对复杂一些，因为除了要对自身的大小和位置进行测量之外，还需要对子View的测量参数负责。

需求实例

实现一个类似于Viewpager的可左右滑动的布局。

代码比较多，我们结合注释分析。

1. public class HorizontaiView extends ViewGroup {

3. private int lastX;

4. private int lastY;

6. private int currentIndex = 0;

7. private int childWidth = 0;

8. private Scroller scroller;

9. private VelocityTracker tracker;

12. /**

13. * 1.创建View类，实现构造函数

14. * 实现构造方法

15. * @param context

16. */

17. public HorizontaiView(Context context) {

18. super(context);

19. init(context);

20. }

22. public HorizontaiView(Context context, AttributeSet attrs) {

23. super(context, attrs);

24. init(context);

25. }

27. public HorizontaiView(Context context, AttributeSet attrs, int defStyleAttr) {

28. super(context, attrs, defStyleAttr);

29. init(context);

30. }

32. private void init(Context context) {

33. scroller = new Scroller(context);

34. tracker = VelocityTracker.obtain();

35. }

37. /**

38. * 2、根据自定义View的绘制流程，重写`onMeasure`方法，注意对wrap_content的处理

39. * 重写onMeasure方法

40. * @param widthMeasureSpec

41. * @param heightMeasureSpec

42. */

43. @Override

44. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

45. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

46. //获取宽高的测量模式以及测量值

47. int widthMode = MeasureSpec.getMode(widthMeasureSpec);

48. int widthSize = MeasureSpec.getSize(widthMeasureSpec);

49. int heightMode = MeasureSpec.getMode(heightMeasureSpec);

50. int heightSize = MeasureSpec.getSize(heightMeasureSpec);

51. //测量所有子View

52. measureChildren(widthMeasureSpec, heightMeasureSpec);

53. //如果没有子View，则View大小为0，0

54. if (getChildCount() == 0) {

55. setMeasuredDimension(0, 0);

56. } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {

57. View childOne = getChildAt(0);

58. int childWidth = childOne.getMeasuredWidth();

59. int childHeight = childOne.getMeasuredHeight();

60. //View的宽度=单个子View宽度*子View个数，View的高度=子View高度

61. setMeasuredDimension(getChildCount() * childWidth, childHeight);

62. } else if (widthMode == MeasureSpec.AT_MOST) {

63. View childOne = getChildAt(0);

64. int childWidth = childOne.getMeasuredWidth();

65. //View的宽度=单个子View宽度*子View个数，View的高度=xml当中设置的高度

66. setMeasuredDimension(getChildCount() * childWidth, heightSize);

67. } else if (heightMode == MeasureSpec.AT_MOST) {

68. View childOne = getChildAt(0);

69. int childHeight = childOne.getMeasuredHeight();

70. //View的宽度=xml当中设置的宽度，View的高度=子View高度

71. setMeasuredDimension(widthSize, childHeight);

72. }

73. }

75. /**

76. * 3、接下来重写`onLayout`方法，对各个子View设置位置。

77. * 设置子View位置

78. * @param changed

79. * @param l

80. * @param t

81. * @param r

82. * @param b

83. */

84. @Override

85. protected void onLayout(boolean changed, int l, int t, int r, int b) {

86. int childCount = getChildCount();

87. int left = 0;

88. View child;

89. for (int i = 0; i < childCount; i++) {

90. child = getChildAt(i);

91. if (child.getVisibility() != View.GONE) {

92. childWidth = child.getMeasuredWidth();

93. child.layout(left, 0, left + childWidth, child.getMeasuredHeight());

94. left += childWidth;

95. }

96. }

97. }

98. }

到这里我们的View布局就已经基本结束了。但是要实现Viewpager的效果，还需要添加对事件的处理。事件的处理流程之前我们有分析过，在制作自定义View的时候也是会经常用到的，不了解的可以参考之前的文章Android Touch事件分发超详细解析。

1. /**

2. * 4、因为我们定义的是ViewGroup，从onInterceptTouchEvent开始。

3. * 重写onInterceptTouchEvent,对横向滑动事件进行拦截

4. * @param event

5. * @return

6. */

7. @Override

8. public boolean onInterceptTouchEvent(MotionEvent event) {

9. boolean intercrpt = false;

10. //记录当前点击的坐标

11. int x = (int) event.getX();

12. int y = (int) event.getY();

13. switch (event.getAction()) {

14. case MotionEvent.ACTION_MOVE:

15. int deltaX = x - lastX;

16. int delatY = y - lastY;

17. //当X轴移动的绝对值大于Y轴移动的绝对值时，表示用户进行了横向滑动，对事件进行拦截

18. if (Math.abs(deltaX) > Math.abs(delatY)) {

19. intercrpt = true;

20. }

21. break;

22. }

23. lastX = x;

24. lastY = y;

25. //intercrpt = true表示对事件进行拦截

26. return intercrpt;

27. }

29. /**

30. * 5、当ViewGroup拦截下用户的横向滑动事件以后，后续的Touch事件将交付给`onTouchEvent`进行处理。

31. * 重写onTouchEvent方法

32. * @param event

33. * @return

34. */

35. @Override

36. public boolean onTouchEvent(MotionEvent event) {

37. tracker.addMovement(event);

38. //获取事件坐标(x,y)

39. int x = (int) event.getX();

40. int y = (int) event.getY();

41. switch (event.getAction()) {

42. case MotionEvent.ACTION_MOVE:

43. int deltaX = x - lastX;

44. int delatY = y - lastY;

45. //scrollBy方法将对我们当前View的位置进行偏移

46. scrollBy(-deltaX, 0);

47. break;

48. //当产生ACTION_UP事件时，也就是我们抬起手指

49. case MotionEvent.ACTION_UP:

50. //getScrollX()为在X轴方向发生的便宜，childWidth * currentIndex表示当前View在滑动开始之前的X坐标

51. //distance存储的就是此次滑动的距离

52. int distance = getScrollX() - childWidth * currentIndex;

53. //当本次滑动距离>View宽度的1/2时，切换View

54. if (Math.abs(distance) > childWidth / 2) {

55. if (distance > 0) {

56. currentIndex++;

57. } else {

58. currentIndex--;

59. }

60. } else {

61. //获取X轴加速度，units为单位，默认为像素，这里为每秒1000个像素点

62. tracker.computeCurrentVelocity(1000);

63. float xV = tracker.getXVelocity();

64. //当X轴加速度>50时，也就是产生了快速滑动，也会切换View

65. if (Math.abs(xV) > 50) {

66. if (xV < 0) {

67. currentIndex++;

68. } else {

69. currentIndex--;

70. }

71. }

72. }

73. //对currentIndex做出限制其范围为【0，getChildCount() - 1】

74. currentIndex = currentIndex < 0 ? 0 : currentIndex > getChildCount() - 1 ? getChildCount() - 1 : currentIndex;

75. //滑动到下一个View

76. smoothScrollTo(currentIndex * childWidth, 0);

77. tracker.clear();

78. break;

79. }

80. lastX = x;

81. lastY = y;

82. return true;

83. }

86. private void smoothScrollTo(int destX, int destY) {

87. //startScroll方法将产生一系列偏移量，从（getScrollX(), getScrollY()），destX - getScrollX()和destY - getScrollY()为移动的距离

88. scroller.startScroll(getScrollX(), getScrollY(), destX - getScrollX(), destY - getScrollY(), 1000);

89. //invalidate方法会重绘View，也就是调用View的onDraw方法，而onDraw又会调用computeScroll()方法

90. invalidate();

91. }

93. //重写computeScroll方法

94. @Override

95. public void computeScroll() {

96. super.computeScroll();

97. //当scroller.computeScrollOffset()=true时表示滑动没有结束

98. if (scroller.computeScrollOffset()) {

99. //调用scrollTo方法进行滑动，滑动到scroller当中计算到的滑动位置

100. scrollTo(scroller.getCurrX(), scroller.getCurrY());

101. //没有滑动结束，继续刷新View

102. postInvalidate();

103. }

104. }

这部分代码比较多，为了方便阅读，在代码当中进行了注释。
之后就是在XML代码当中引入自定义View

1. <com.example.yf.view.HorizontaiView

2. android:id="@+id/test_layout"

3. android:layout_width="match_parent"

4. android:layout_height="400dp">

5. <ListView

6. android:id="@+id/list1"

7. android:layout_width="match_parent"

8. android:layout_height="match_parent">

10. </ListView>

12. <ListView

13. android:id="@+id/list2"

14. android:layout_width="match_parent"

15. android:layout_height="match_parent">

17. </ListView>

19. <ListView

20. android:id="@+id/list3"

21. android:layout_width="match_parent"

22. android:layout_height="match_parent">

24. </ListView>

26. </com.example.yf.view.HorizontaiView>

好了，可以运行看一下效果了。

总结

本篇文章对常用的自定义View的方式进行了总结，并简单分析了View的绘制流程。对各种实现方式写了简单的实现。