最近一直在学习自定义View相关的知识，今天给大家带来的是QQ健康界面的实现。先看效果图：
可以设置数字颜色，字体颜色，运动步数，运动排名，运动平均步数，虚线下方的蓝色指示条的长度会随着平均步数改变而进行变化。整体效果还是和QQ运动健康界面很像的。
自定义View四部曲，一起来看看怎么实现的。
1.自定义view的属性：
<&＃63;xml version="1.0" encoding="utf-8"&＃63;>//自定义属性名,定义公共属性 //自定义View的属性
依次定义了字体颜色，线的颜色2个属性，format是该属性的取值类型。
然后就是在布局文件中申明我们的自定义view：
自定义view的属性我们可以自己进行设置，记得最后要引入我们的命名空间，
xmlns:app=”http://schemas.Android.com/apk/res-auto”
2.获取自定义view的属性：
public MyQQHealthView(Context context) {
this(context, null);
}
public MyQQHealthView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyQQHealthView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取我们自定义的样式属性
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyQQHealthView, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i
自定义View一般需要实现一下三个构造方法，这三个构造方法是一层调用一层的，属于递进关系。因此，我们只需要在最后一个构造方法中来获得View的属性了。
第一步通过theme.obtainStyledAttributes()方法获得自定义控件的主题样式数组；
第二步就是遍历每个属性来获得对应属性的值，也就是我们在xml布局文件中写的属性值；
第三步就是在循环结束之后记得调用array.recycle()来回收资源；
第四步就是进行一下必要的初始化，不建议在onDraw的过程中去实例化对象，因为这是一个频繁重复执行的过程，new是需要分配内存空间的，如果在一个频繁重复的过程中去大量地new对象会造成内存浪费的情况。
3.重写onMesure方法确定view大小：
当你没有重写onMeasure方法时候，系统调用默认的onMeasure方法：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
这个方法的作用是：测量控件的大小。其实Android系统在加载布局的时候是由系统测量各子View的大小来告诉父View我需要占多大空间，然后父View会根据自己的大小来决定分配多大空间给子View。MeasureSpec的specMode模式一共有三种：
MeasureSpec.EXACTLY：父视图希望子视图的大小是specSize中指定的大小；一般是设置了明确的值或者是MATCH_PARENT
MeasureSpec.AT_MOST：子视图的大小最多是specSize中的大小；表示子布局限制在一个最大值内，一般为WARP_CONTENT
MeasureSpec.UNSPECIFIED：父视图不对子视图施加任何限制，子视图可以得到任意想要的大小；表示子布局想要多大就多大，很少使用。
想要设置WARP_CONTENT，只要重写onMeasure方法:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
//如果布局里面设置的是固定值,这里取布局里面的固定值;如果设置的是match_parent,则取父布局的大小
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
//如果布局里面没有设置固定值,这里取布局的宽度的1/2
width = widthSize * 1 / 2;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
//如果布局里面没有设置固定值,这里取布局的高度的3/4
height = heightSize * 3 / 4;
}
widthBg = width;
heightBg = height;
setMeasuredDimension(width, height);
startAnim();
}
我这里为了不让布局显得过小，所以WARP_CONTENT分别取宽的1/2,高的3/4,具体情况因人而异。
4.重写onDraw方法进行绘画：
界面比较复杂，我们从上到下，一步一步来：
//绘制最底层的背景 radiusBg = widthBg / 20; pathBg.moveTo(0, heightBg); pathBg.lineTo(0, radiusBg); pathBg.quadTo(0, 0, radiusBg, 0); pathBg.lineTo(widthBg - radiusBg, 0); pathBg.quadTo(widthBg, 0, widthBg, radiusBg); pathBg.lineTo(widthBg, heightBg); pathBg.lineTo(0, heightBg); backgroundPaint.setColor(Color.WHITE); canvas.drawPath(pathBg, backgroundPaint);
整个自定义View的最底层是一个左上，右上有弧度，左下，右下为直角的白色背景。使用canvas.drawRoundRect实现的矩形是四个角都有弧度，达不到预期。但是一阶贝塞尔曲线加上二阶贝塞尔曲线就能很好的实现这种特殊的情况。
moveTo(x,y):不会进行绘制，只用于移动移动画笔，确定起点坐标，与其他方法配合使用；
lineTo(x,y):一阶贝塞尔曲线，坐标为终点坐标，配合moveTo方法用于进行直线绘制；
quadTo (x1,y1,x2,y2):二阶贝塞尔曲线，(x1,y1) 为控制点，(x2,y2)为结束点，用于绘制圆滑的曲线；
最后调用canvas.drawPath(path,paint)即可达到这种效果
//绘制圆弧 arcPaint.setStrokeWidth(widthBg / 20); //设置空心 arcPaint.setStyle(Paint.Style.STROKE); //防抖动 arcPaint.setDither(true); //连接处为圆弧 arcPaint.setStrokeJoin(Paint.Join.ROUND); //画笔的笔触为圆角 arcPaint.setStrokeCap(Paint.Cap.ROUND); arcPaint.setColor(lineColor); //圆弧范围 arcRect = new RectF(widthBg * 1 / 4, widthBg * 1 / 4, widthBg * 3 / 4, widthBg * 3 / 4); //绘制背景大圆弧 canvas.drawArc(arcRect, 120, 300, false, arcPaint); arcPaint.setColor(textColor); //绘制分数小圆弧 canvas.drawArc(arcRect, 120, arcNum, false, arcPaint);
绘制圆弧先确定圆弧的范围，传入的四个参数就是圆弧所在圆的外接矩形的坐标。canvas.drawArc的五个参数依次是圆弧范围；开始的角度；圆弧的角度；第四个为True时，在绘制圆弧时会将圆心包括在内，通常用来绘制扇形，我们这里选false；圆弧的画笔
//绘制圆圈内的数字
textPaint.setColor(textColor);
textPaint.setTextSize(widthBg / 10);
canvas.drawText(String.valueOf(walkNum), widthBg * 3 / 8, widthBg * 1 / 2 + 20, textPaint);
//绘制名次
textPaint.setTextSize(widthBg / 15);
canvas.drawText(String.valueOf(rankNum), widthBg * 1 / 2 - 15, widthBg * 3 / 4 + 10, textPaint);
//绘制其他文字
textPaint.setColor(lineColor);
textPaint.setTextSize(widthBg / 25);
canvas.drawText("截止13:45已走", widthBg * 3 / 8 - 10, widthBg * 5 / 12 - 10, textPaint);
canvas.drawText("好友平均2781步", widthBg * 3 / 8 - 10, widthBg * 2 / 3 - 20, textPaint);
canvas.drawText("第", widthBg * 1 / 2 - 50, widthBg * 3 / 4 + 10, textPaint);
canvas.drawText("名", widthBg * 1 / 2 + 30, widthBg * 3 / 4 + 10, textPaint);
//绘制圆圈外的文字
canvas.drawText("最近7天", widthBg * 1 / 15, widthBg, textPaint);
myaverageTxt = String.valueOf(averageSize);
canvas.drawText("平均", widthBg * 10 / 15 - 15, widthBg, textPaint);
canvas.drawText(myaverageTxt, widthBg * 11 / 15, widthBg, textPaint);
canvas.drawText("步/天", widthBg * 12 / 15 + 20, widthBg, textPaint);
绘制文字就稍微简单点，这里计算好各自的位置即可
京公网安备 11010802041100号