前两个月刚刚写了一篇关于支付宝芝麻信用页面自定义View的总结,感觉写的不太好,链接如下:
http://blog.csdn.net/anny_lin/article/details/49474555
当时写的时候没有考虑到布局的问题,当移动View的时候,view就出现绘图错乱了,还好有个哥们看了给我提醒了一下,最近刚好比较闲,就寻思重新记录一下写自定义View的过程,算是对自定义View的一个小的总结吧,顺便把遇到过的坑记录一下,提醒一下自己。
注意:这篇文章针对http://blog.csdn.net/anny_lin/article/details/49474555
出现的布局问题作修改,其他实现参考上面链接
废话不多说,首先看看,人家支付宝芝麻信用的页面吧:
上图展示的就是一个支付宝信用的一个页面,我们从页面的构造开始分析:
最上面的视图我们并不需要自定义,直接使用textView即可,主要需要自定义的模块就只有中间那一部分,我们把它单独拿出来分析一下:
我们可以看到它是由两个半圆环,即外面的半圈圈构成,思考一下,在使用
canvas.drawArc(rectF,165, 210,false,outArcPaint);
这个api就可以搞定了,我们还能发现在第二个圆圈里面有刻度线着写小东东,同样视图最内层还有刻度线的说明,这个我们需要怎么做呢?思考一下,我们可以通过不断地旋转画布定点绘制,当画布旋转完成我们刻度线和刻度线下方的字体就可以完成啦。
接下来就是要写中间的字了,调用
canvas.drawText(numString,centerX-textWidth/2,centerY,textPaint);
即可,还是很容易的,我们的静态效果到这就分析完成了,我们看看代码的实现方式:
重写的onMeasure()方法:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int wrap_Len = DensityUtil.dip2px(context, 300);
int width = measureDimension(wrap_Len, widthMeasureSpec);
int height = measureDimension(wrap_Len, heightMeasureSpec);
len=Math.min(width,height);
//保证他是一个正方形
setMeasuredDimension(len,len);
}
public int measureDimension(int defaultSize, int measureSpec){