Android自定义View/ViewGroup

一、基本步骤

1. 自定义属性；
2. 重写onMeasure()方法；
3. 重写onDraw()方法；
4. 重写onLayout()方法；
5. 选择和设置构造方法；
6. 重写其他事件的方法（滑动监听等）

二、常用到的View方法

View方法

实现一个自定义视图，通常要提供框架在所有视图上都会调用的标准方法的重写，这些标准方法有：

上面这么多方法，不一定要全部实现，如有时我们只需要实现onDraw()方法。

ViewGroup方法

ViewGroup是一个特殊的View，继承了View。它可以包含其他View。ViewGroup是布局容器和视图容器的基类。它也定义了 LayoutParams类，这个类作为布局参数来使用。

Paint方法

在自定义View中，我们还要使用Paint类的方法。Paint类是设置样式和颜色信息的，将会用于绘制几何图形、文本、位图，Paint类方法：

Canvas方法

自定义View / ViewGroup时调用的各种函数的顺序

这些方法中有三个很重要的方法，也是我们最有可能要去修改的：

• onMeasure()：主要负责测量，决定控件本身或其子控件所占的宽高。可以通过onMeasure()方法提供的参数widthMeasureSpec和heightMeasureSpec来分别获取控件宽度和高度的测量模式和测量值（测量 = 测量模式 + 测量值）。其中widthMeasureSpec和heightMeasureSpec是int类型的值，它们是通过MeasureSpec类进行了编码处理的，其中封装了测量模式和测量值，因此可以分别通过MeasureSpec.getMode(xMeasureSpec)和MeasureSpec. getSize(xMeasureSpec)来获取到控件或其子View的测量模式和测量值。
  测量模式分为三种情况：
  （１）EXACTLY：当宽高值设置为具体值时使用，如100dip、match_parent等，此时取出的size是精确的尺寸；
  （２）AT_MOST：当宽高值设置为wrap_content时使用，此时取出的size是控件最大可获得的空间；
  （３） UNSPECIFIED：当没有指定宽高值时使用，一般自定义View用不到。
  如果我们的自定义控件在布局文件中，只设置了指定的具体宽高，或者MATCH_PARENT，那么我们就可以不用重写onMeasure方法。但是，如果自定义控件设置了WRAP_CONTENT ，那么我们就需要重写onMeasure方法，为控件设置需要的尺寸；因为WRAP_CONTENT 默认情况下将填充整个父控件。onMeasure方法最后需要调用setMeasuredDimension方法来保存测量的宽高值。
  在有些情况下，需要多次测量(measure)才能够最终确定View的宽高（比如父视图MeasureSpec使用UNSPECIFIED模式等），在这种情况下，通过onMeasure方法获得的宽高很可能是不准确的，因此，建议在onLayout方法中去获取View的最终宽高。
  
• onLayout()：　负责布局，大多数情况是在自定义ViewGroup中才会重写，主要用来确定子View在这个布局空间中的摆放位置。 onLayout(boolean changed, int left, int top, int right, int bottom)方法有5个参数，其中changed表示这个控件是否有了新的尺寸或位置；left、top、right、bottom分别表示这个View相对于父布局的左/上/右/下方的位置。
• onDraw()：　负责绘制。如果Android原生控件中没有现在的支持，那么就需要自己绘制自定义控件的显示效果。在onDraw()方法中使用最多的两个类：Paint和Canvas。注意：每次自定义View/ViewGroup时都会调用onDraw()方法。

三、onMeasure、onLayout、onDraw方法中常用到的其他方法

onMeasure方法中常用的方法：

• getChildCount()：获取子View的数量（必须继承ViewGroup或它的子类）；
• getChildAt(i)：获取第i个子控件（必须继承ViewGroup或它的子类）；
• subView.getLayoutParams().width/height：设置或获取子控件的宽或高；
• measureChild(child, widthMeasureSpec, heightMeasureSpec)：测量子View的宽高；
• child.getMeasuredHeight/Width()：执行完measureChild()方法后就可以通过这种方式获取子View的宽高值；
• getPaddingLeft/Right/Top/Bottom()：获取控件的四周内边距；
• setMeasuredDimension(width, height)：重新设置控件的宽高。如果写了这句代码，就需要删除“super. onMeasure(widthMeasureSpec, heightMeasureSpec);”这行代码。

onLayout方法中常用的方法：

• getChildCount()：获取子View的数量；
• getChildAt(i)：获取第i个子View
• getWidth/Height()：获取onMeasure()中返回的宽度和高度的测量值；
• child.getLayoutParams()：获取到子View的LayoutParams对象；
• child.getMeasuredWidth/Height()：获取onMeasure()方法中测量的子View的宽度和高度值；
• getPaddingLeft/Right/Top/Bottom()：获取控件的四周内边距；
• child.layout(l, t, r, b)：设置子View布局的左、上、右、下的坐标。

onDraw方法中常用的方法：
在onDraw()方法中使用最多的两个类：Paint和Canvas，它们的方法请参考文章前面部分。

四、自定义View的分类

各自的应用场景

自定义单一View

自定义ViewGroup

五、实例

(1)实例一：自定义View
　第一步：自定义属性
　我们平时在编写xml布局时，看到的所有的系统定义的属性都定义在各自平台下一个叫attrs.xml的文件中，路径为：Sdk/platforms/android-28/data/res/values/attrs.xml。我们继承的View现有的属性不足以实现我们的功能，因此我们需要自定义一些属性，我们在app/src/main/res/values/attrs.xml加入：

 <declare-styleable name="CustomCircleView"> <!-- 半径 --> <attr name="radius" format="integer"/> <!-- 边的颜色 --> <attr name="stroke_color" format="color"/> <!-- 边的宽度 --> <attr name="stroke_width" format="dimension"/> <!-- 填充的颜色 --> <attr name="fill_color" format="color"/> <!-- 文本 --> <attr name="text" format="string"/> <!-- 文本大小 --> <attr name="text_size" format="integer"/> <!-- 文本的颜色 --> <attr name="text_color" format="color"/> </declare-styleable>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

format的属性值：

1. string：字符串类型；
2. integer：整数类型；
3. float：浮点型；
4. dimension：尺寸，后面必须跟dp、dip、px、sp等单位；
5. boolean：布尔值；
6. reference：引用类型，传入的是某一资源的ID，必须以“@”符号开头；
7. color：颜色，必须是“#”符号开头；
8. fraction：百分比，必须是“%”符号结尾；
9. enum：枚举类
10. flags：位或运算

第二步：写一个继承View的子类
重写onDraw()方法。

package com.wong.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Picture;
import android.graphics.Rect;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import com.wong.view.utils.FontUtils;

public class CustomCircleView extends View { /*边的颜色*/ private int strokeColor = Color.BLACK; /*边的宽度*/ private float strokeWidth = 1; /*填充颜色*/ private int fillColor = Color.WHITE; /*文本*/ private String text=""; /*文本大小*/ private float textSize = 16; /*文本的颜色*/ private int textColor = Color.BLACK; private Paint mPaintText = new Paint(); private Paint mPaintCircle = new Paint(); private Paint mPaintCircleSide = new Paint(); public CustomCircleView(Context context) { super(context); } public CustomCircleView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(context,attrs); } private void init(Context context,AttributeSet attrs){ /** * 加载自定义属性集合CircleView * 要在styles.xml中添加配置： * <declare-styleable name="CustomCircleView"> * <!-- 边的颜色 --> * <attr name="stroke_color" format="color"/> * <!-- 边的宽度 --> * <attr name="stroke_width" format="dimension"/> * <!-- 填充的颜色 --> * <attr name="fill_color" format="color"/> * <!-- 文本 --> * <attr name="text" format="string"/> * <!-- 文本大小 --> * <attr name="text_size" format="integer"/> * <!-- 文本的颜色 --> * <attr name="text_color" format="color"/> * </declare-styleable> * */ TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomCircleView); strokeColor = typedArray.getColor(R.styleable.CustomCircleView_stroke_color, strokeColor); strokeWidth = typedArray.getDimension(R.styleable.CustomCircleView_stroke_width,strokeWidth); fillColor = typedArray.getColor(R.styleable.CustomCircleView_fill_color,fillColor); text = typedArray.getString(R.styleable.CustomCircleView_text); textSize = typedArray.getDimension(R.styleable.CustomCircleView_text_size,textSize); textColor = typedArray.getColor(R.styleable.CustomCircleView_text_color,textColor); typedArray.recycle(); } /** * 1)  {@link Canvas#save()}：把当前绘制的图像保存起来，让后续的操作相当于是在一个新图层上绘制； * 2)  {@link Canvas#restore()}：把当前画布调整到上一个save()之前的状态； * 3)  {@link Canvas#translate(float, float)}：把当前画布的原点移到(dx, dy)点，后续操作都以(dx, dy)点作为参照； * 4)  {@link Canvas#scale(float, float)}：将当前画布在水平方向上缩放x倍，竖直方向上缩放y倍； * 5)  {@link Canvas#rotate(float)}：将当前画布顺时针旋转angle度. * * 6)  {@link Canvas#drawArc(RectF, float, float, boolean, Paint)}：绘制圆弧； * 7)  {@link Canvas#drawBitmap(Bitmap, Matrix, Paint)}：绘制Bitmap图像； * 8)  {@link Canvas#drawCircle(float, float, float, Paint)}：绘制圆圈； * 9)  {@link Canvas#drawLine(float, float, float, float, Paint)}：绘制线条； * 10) {@link Canvas#drawOval(RectF, Paint)}：绘制椭圆； * 11) {@link Canvas#drawPath(Path, Paint)}：绘制Path路径； * 12) {@link Canvas#drawPicture(Picture)}：绘制Picture图片； * 13) {@link Canvas#drawRect(Rect, Paint)}：绘制矩形； * 14) {@link Canvas#drawRoundRect(RectF, float, float, Paint)}：绘制圆角矩形； * 15) {@link Canvas#drawText(String, float, float, Paint)}：绘制文本； * 16) {@link Canvas#drawVertices(Canvas.VertexMode, int, float[], int, float[], int, int[], int, short[], int, int, Paint)}：绘制顶点。 * @param canvas */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 设置画布的颜色，否则会出现黑色的背景 canvas.drawRGB(255,255,255); mPaintCircle.setColor(fillColor); mPaintCircle.setAntiAlias(true); mPaintCircle.setStyle(Paint.Style.FILL); mPaintText.setTextSize(textSize); mPaintText.setColor(textColor); mPaintText.setTextAlign(Paint.Align.CENTER); mPaintCircleSide.setColor(strokeColor); mPaintCircleSide.setStrokeWidth(strokeWidth); mPaintCircleSide.setStyle(Paint.Style.STROKE); // 获取控件的高度和宽度 int width = getWidth(); int height = getHeight(); // 设置圆的半径 = 宽,高最小值的2分之1 int r = Math.min(width, height)/2-(int)strokeWidth; // 画出圆 // 圆心 = 控件的中央,半径 = 宽,高最小值的2分之1 canvas.drawCircle(width/2,height/2,r,mPaintCircle); // 画出圈 canvas.drawCircle(width/2,height/2,r,mPaintCircleSide); // 文字 if(!TextUtils.isEmpty(text)) { // TODO 换行，日后再添加　 float textH = FontUtils.getFontHeight(mPaintText)/2; canvas.drawText(text, width / 2, height / 2 + (int)textH, mPaintText); } }
}

  

 

  
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
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
  
123
  
124
  
125
  
126
  
127
  
128
  
129
  
130
  
131
  
132
  
133
  
134
  
135
  
136
  
137
 

第三步：在布局文件中使用

<com.wong.view.CustomCircleView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/colorPrimaryDark" app:text="ＡＢＣ" app:text_size="18sp" app:text_color="@android:color/holo_red_dark" app:stroke_color="@android:color/holo_blue_dark" app:stroke_width="4dp" app:fill_color="@android:color/holo_orange_light"/>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

效果图：

demo

（２）自定义ViewGroup
自定义ViewGroup和自定义View的步骤差不多，区别在于ViewGroup是容器，用来包含其他控件，而View是控件看得见的。ViewGroup需要重写onMeasure方法测量子控件的宽高和自己的宽高，然后实现onLayout方法摆放子控件。而 View则是需要重写onMeasure根据测量模式和父控件给出的建议的宽高值计算自己的宽高，然后在父控件为其指定的区域绘制自己的图形。
具体参考：

《自定义ViewGroup—实现自定义ViewPager》
《自定义ViewGroup——自定义布局》

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/103945636