自定义View实现支付宝芝麻信用页面功能

此篇文章布局有些问题，调整后的请看这篇：http://blog.csdn.net/anny_lin/article/details/50507608

今天在使用支付宝的事后，突然发现了一个叫做芝麻信用的一个功能，打开看了一下，感觉效果挺好的，就想自己跟着实现一下，首先看支付宝的原图

，
这是支付宝中的原有界面，下面是我实现的效果，请不要吐槽我的审美好么，啊喂！

虽然有点差距，但是效果还是实现了的，主要就是中间那一坨的绘制，其他的根本不够我看的，哈哈哈（整理一下发型），好了下面开始重头戏了，如何绘制这样的一个图形以及实现动态的效果（想看效果的请直接拉到最底下好么）？

分析：
首先我们要画出这样的一个图案的一般思路是从简单到复杂，这个不会我们先画一个圆盘不就完了，圆盘画完不就是再画一个外圆环么，没难度，最后再标刻度以及写文字，好了我们一步一步来。

1.绘制圆环
初始化一个CustomView继承View并重写构造方法

public class CustomView extends View {Paint paint;int radius;String resultString="啊啊啊啊";int rateEnd=0;public CustomView(Context context) {super(context);init(context);}public CustomView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}

init()方法初始化一些作案工具

 int result;Paint paint1,paint2,paint3;Paint ratePaint;String[] stringArray=new String[]{"350","较差","550","中等","600","良好","650","优秀","700","极好","950"};private void init(Context context){paint=new Paint();//是否抗锯齿paint.setAntiAlias(true);paint.setColor(getResources().getColor(R.color.white));//实心还是空心paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(30);//0-255，越小越透明paint.setAlpha(60);//dp和px之间互转工具类result=DensityUtil.dip2px(context,300);//刻度画笔paint1 =new Paint(Paint.ANTI_ALIAS_FLAG);paint1.setColor(getResources().getColor(R.color.white));paint1.setStrokeWidth(6);//刻度字画笔paint2=new Paint(Paint.ANTI_ALIAS_FLAG);paint2.setTextSize(26);paint2.setColor(getResources().getColor(R.color.white));//正中间字体画笔paint3=new Paint(Paint.ANTI_ALIAS_FLAG);paint3.setTextSize(40);paint3.setColor(getResources().getColor(R.color.white));ratePaint=new Paint();ratePaint.setColor(getResources().getColor(R.color.rateColor));ratePaint.setStrokeWidth(4);ratePaint.setStyle(Paint.Style.STROKE);//背景渐变动画实现ValueAnimator coloranim= ObjectAnimator.ofInt(MainActivity.this, "backgroundColor", 0xFFFF8080, 0xFF8080FF);coloranim.setDuration(30 * 180);coloranim.setEvaluator(new ArgbEvaluator());coloranim.start();}

我在init()定义了一些需要用到的画笔，详细的可以看注释。

下面就是核心代码了：
onDraw方法：

int px,py;int rotateRadius=210/10;@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);px=getMeasuredWidth()/2;py=getMeasuredHeight()/2;//粗圆环RectF rectF=new RectF(getLeft()+60,getTop()+60,getRight()-60,getBottom()-60);canvas.drawArc(rectF, 165, 210, false, paint);//细圆环RectF rectFA=new RectF(getLeft()+20,getTop()+20,getRight()-20,getBottom()-20);paint.setStrokeWidth(4);canvas.drawArc(rectFA, 165, 210, false, paint);//动态通知变化的细圆环canvas.drawArc(rectFA,165,rateEnd,false,ratePaint);//正中间的字体if (!resultString.equals("")){float textWidth=paint3.measureText(resultString);canvas.drawText(resultString,px-textWidth/2,py,paint3);}//旋转到正中心。canvas.rotate(255,getMeasuredWidth()/2,getMeasuredHeight()/2);//刻度线起始和终止的两个值int lineStartY=getTop()+60-30/2;int lineEndY=getTop()+60-30/2+30;for (int i=1;i<12;i++){canvas.save();if (i%2!=0){//画明显的刻度paint1.setAlpha(160);canvas.drawLine(px, lineStartY, px, lineEndY, paint1);paint2.setAlpha(180);}else{paint1.setAlpha(100);canvas.drawLine(px, lineStartY, px, lineEndY, paint1);paint2.setAlpha(120);}float textLength=paint2.measureText(stringArray[i-1]);canvas.drawText(stringArray[i-1],px-textLength/2,lineEndY+30,paint2);canvas.restore();canvas.rotate(rotateRadius,px,py);}canvas.restore();paint.setStrokeWidth(30);//开线程刷新rateEnd的值new Thread(new Runnable() {@Overridepublic void run() {if (rateEnd<180){rateEnd++;postInvalidateDelayed(30);}}}).start();}

核心思想是通过旋转画布进行图案的绘制，并且在绘制的过程中绘制文字，比较麻烦的就是一系列的计算的问题，其他的并没有什么难度的，如果有什么问题，读者可以给我留言交流一下呀，我很欢迎的~

最后放效果图：

一些细节的东西可能没怎么处理，不过大体的功能就已经实现了~

自定义View实现支付宝芝麻信用页面功能相关推荐

android自定义表盘部件,Android自定义view仿支付宝芝麻信用表盘
演示效果实现步骤: 1.画不同宽度和半径的内外圆弧 2.通过循环旋转canvas,在固定位置绘制短线刻度,长线刻度,刻度文字 3.绘制view中心几个文本,并调整位置 4.实时更新当前旋转角度刷新小 ...
Android 仿芝麻信用进度条,自定义View仿支付宝芝麻信用分仪表盘效果
image 前言灵感来自几天前看到一位作者的仿芝麻信用自定义View的文章很不错,所以我换了一种方式来进行实现,写了旧版和新版芝麻信用分仪表盘的效果. 截图这是我做的效果,还是有点差距的,嘿嘿. ...
android 自定义中文加盘,Android自定义View仿支付宝芝麻信用分仪表盘
先看下iOS的芝麻信用分截图这是我做的效果,还是有点差距的支付宝9.9版本芝麻信用分的实现首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果 ...
自定义View仿支付宝芝麻信用分仪表盘效果
前言灵感来自几天前看到一位作者的仿芝麻信用自定义View的文章很不错,所以我换了一种方式来进行实现,写了旧版和新版芝麻信用分仪表盘的效果. Github地址: https://github.com/ ...
支付宝芝麻信用页面自定义View的简单制作(续)
前两个月刚刚写了一篇关于支付宝芝麻信用页面自定义View的总结,感觉写的不太好,链接如下: http://blog.csdn.net/anny_lin/article/details/49474555 ...
Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画还有就是这是好几 ...
android wear支付宝6,Android自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义 ...
自定义xy组 android,Android自定义view之仿支付宝芝麻信用仪表盘示例
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码接着在构造方法里初始化自定义属性和画笔: private void initAttr(At ...
Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
自定义view练习仿支付宝芝麻信用的仪表盘对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding=&qu ...

自定义View实现支付宝芝麻信用页面功能

此篇文章布局有些问题，调整后的请看这篇：http://blog.csdn.net/anny_lin/article/details/50507608

自定义View实现支付宝芝麻信用页面功能相关推荐

最新文章

热门文章