Android自定义View仿支付宝芝麻信用分仪表盘

先看下iOS的芝麻信用分截图

这是我做的效果,还是有点差距的

支付宝9.9版本芝麻信用分的实现

首先初始化各种画笔,默认的sizepadding,小圆点.

(因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替)

//View的默认大小
defaultSize = dp2px(250);
//默认Padding大小
arcDistance = dp2px(14);

//外层圆环画笔
mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mMiddleArcPaint.setStrokeWidth(8);
mMiddleArcPaint.setColor(Color.WHITE);
mMiddleArcPaint.setStyle(Paint.Style.STROKE);
mMiddleArcPaint.setAlpha(80);

//内层圆环画笔
mInnerArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerArcPaint.setStrokeWidth(30);
mInnerArcPaint.setColor(Color.WHITE);
mInnerArcPaint.setAlpha(80);
mInnerArcPaint.setStyle(Paint.Style.STROKE);

//正中间字体画笔
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextAlign(Paint.Align.CENTER);

//圆环大刻度画笔
mCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationPaint.setStrokeWidth(4);
mCalibrationPaint.setStyle(Paint.Style.STROKE);
mCalibrationPaint.setColor(Color.WHITE);
mCalibrationPaint.setAlpha(120);

//圆环小刻度画笔
mSmallCalibrationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mSmallCalibrationPaint.setStrokeWidth(1);
mSmallCalibrationPaint.setStyle(Paint.Style.STROKE);
mSmallCalibrationPaint.setColor(Color.WHITE);
mSmallCalibrationPaint.setAlpha(130);

//圆环刻度文本画笔
mCalibrationTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCalibrationTextPaint.setTextSize(30);
mCalibrationTextPaint.setColor(Color.WHITE);

//外层进度画笔
mArcProgressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcProgressPaint.setStrokeWidth(8);
mArcProgressPaint.setColor(Color.WHITE);
mArcProgressPaint.setStyle(Paint.Style.STROKE);
mArcProgressPaint.setStrokeCap(Paint.Cap.ROUND);

//外层圆环上小圆点Bitmap画笔
mBitmapPaint = new Paint();
mBitmapPaint.setStyle(Paint.Style.FILL);
mBitmapPaint.setAntiAlias(true);

//初始化小圆点图片
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_circle);
//当前点的实际位置
pos = new float[2];
//当前点的tangent值
tan = new float[2];
matrix = new Matrix();

代码很简单,就是各种初始化,往下看.

View的测量,主要在给设置warp_content时候给定一个默认宽高值.

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
setMeasuredDimension(resolveMeasure(widthMeasureSpec, defaultSize),
  resolveMeasure(heightMeasureSpec, defaultSize));}

//根据传入的值进行测量
public int resolveMeasure(int measureSpec, int defaultSize){
int result = 0;
int specSize = MeasureSpec.getSize(measureSpec);
switch (MeasureSpec.getMode(measureSpec))
 {
 case MeasureSpec.UNSPECIFIED:
 result = defaultSize;
 break;
 case MeasureSpec.AT_MOST:
 //设置warp_content时设置默认值
 result = Math.min(specSize, defaultSize);
 break;
 case MeasureSpec.EXACTLY:
 //设置math_parent 和设置了固定宽高值
 break;
 default:
 result = defaultSize;
 }
 return result;}

然后确定View的宽高后的回调方法.

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh){
 super.onSizeChanged(w, h, oldw, oldh);
 width = w;
 height = h;
 radius = width / 2;
//外层圆环矩形
 mMiddleRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
//内层圆环矩形
 mInnerRect = new RectF(defaultPadding + arcDistance, defaultPadding + arcDistance,width - defaultPadding - arcDistance, height - defaultPadding - arcDistance);
// 外层进度矩形
 mMiddleProgressRect = new RectF(defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding);
}

这里就是初始化圆弧所需要的矩形实现,下边开始进行重点,绘制,

绘制外层的圆弧,很简单, 圆弧的起始角度,角度.

private void drawMiddleArc(Canvas canvas){
canvas.drawArc(mMiddleRect, mStartAngle, mEndAngle, false, mMiddleArcPaint);
}

绘制内层圆弧

private void drawInnerArc(Canvas canvas){
 canvas.drawArc(mInnerRect, mStartAngle, mEndAngle, false, mInnerArcPaint);
}

绘制内层圆弧上的小刻度,画布旋转到圆弧左下角起点,计算出每条刻度线的起始点后,整个圆弧是210度,

每6角度绘制一条刻度线.

private void drawSmallCalibration(Canvas canvas){
 //旋转画布
 canvas.save();
 canvas.rotate(-105, radius, radius);
 //计算刻度线的起点结束点
 int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
 int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
 for (int i = 0; i <= 35; i++) {
 //每旋转6度绘制一个小刻度
 canvas.drawLine(radius, startDst, radius, endDst, mSmallCalibrationPaint);
 canvas.rotate(6, radius, radius);
}
canvas.restore();
}

绘制内层圆弧上的大刻度,350, 550, 600,650, 700, 950,对应的信用分值,

一样旋转画布,计算刻度线的起始点,计算出每次旋转的角度,每35度旋转一次,依次绘制对应的大刻度线,

然后绘制对应的文本内容,使用paintmeasureText方法测量出文本的长度,依次绘制对应的文本内容.

private void drawCalibrationAndText(Canvas canvas){
 //旋转画布进行绘制对应的刻度
 canvas.save();
 canvas.rotate(-105, radius, radius);
 //计算刻度线的起点结束点
 int startDst = (int) (defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth() / 2 - 1);
 int endDst = (int) (startDst + mInnerArcPaint.getStrokeWidth());
 //刻度旋转的角度
 int rotateAngle = 210 / 10;
 for (int i = 1; i < 12; i++) {
 if (i % 2 != 0)
 {
 canvas.drawLine(radius, startDst, radius, endDst, mCalibrationPaint);
 }
 // 测量文本的长度
float textLen = mCalibrationTextPaint.measureText(sesameStr[i - 1]);
canvas.drawText(sesameStr[i - 1], radius - textLen / 2, endDst + 40, mCalibrationTextPaint);
canvas.rotate(rotateAngle, radius, radius);
}
canvas.restore();}

绘制中间的信用分值,信用等级,评估时间等文本,这个比较简单,直接drawText,依次高低排列绘制即可.

private void drawCenterText(Canvas canvas){
 //绘制Logo
 mTextPaint.setTextSize(30);
 canvas.drawText("BETA", radius, radius - 130, mTextPaint);
 //绘制信用分数
 mTextPaint.setTextSize(200);
 mTextPaint.setStyle(Paint.Style.STROKE);
 canvas.drawText(String.valueOf(mMinNum), radius, radius + 70, mTextPaint);
 //绘制信用级别
 mTextPaint.setTextSize(80);
 canvas.drawText(sesameLevel, radius, radius + 160, mTextPaint);
 //绘制评估时间
 mTextPaint.setTextSize(30);
 canvas.drawText(evaluationTime, radius, radius + 205, mTextPaint);
}

绘制最外层的进度,这里使用的Path添加要绘制的圆弧,因为需要去不断的计算坐标点,主要用到了PathMeasure这个类,将绘制的圆弧加入到path中,

当前点的实际位置

private float[] pos;

当前的tangent值

private float[] tan;

获取路径的终点的正切值和坐标,然后根据坐标点绘制小圆点

PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
private void drawRingProgress(Canvas canvas){ 

 Path path = new Path();
 path.addArc(mMiddleProgressRect, mStartAngle, mCurrentAngle);
 PathMeasure pathMeasure = new PathMeasure(path, false);
 pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
 matrix.reset();
 matrix.postTranslate(pos[0] - bitmap.getWidth() / 2, pos[1] - bitmap.getHeight() / 2);
 canvas.drawPath(path, mArcProgressPaint);
 //起始角度不为0时候才进行绘制小圆点
 if (mCurrentAngle == 0)
  return;
 canvas.drawBitmap(bitmap, matrix, mBitmapPaint);
 mBitmapPaint.setColor(Color.WHITE);
 canvas.drawCircle(pos[0], pos[1], 8, mBitmapPaint);
}

好了,到这里所有绘制完毕了,接下来让圆弧进度条动起来吧,使用ValueAnimator,进度条动画定义了圆弧进度条的开始角度mCurrentAngle,圆弧角度mTotalAngle,数值动画定义了初始化minNum=0maxNum根据传入的数值进行计算.

public void startAnim(){
 ValueAnimator mAngleAnim = ValueAnimator.ofFloat(mCurrentAngle, mTotalAngle);
 mAngleAnim.setInterpolator(new AccelerateDecelerateInterpolator());
 mAngleAnim.setDuration(3000);
 mAngleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
 @Override
 public void onAnimationUpdate(ValueAnimator valueAnimator){
 mCurrentAngle = (float) valueAnimator.getAnimatedValue();
 postInvalidate();  

}
});
 mAngleAnim.start(); 

 ValueAnimator mNumAnim = ValueAnimator.ofInt(mMinNum, mMaxNum);
 mNumAnim.setDuration(3000);
 mNumAnim.setInterpolator(new LinearInterpolator());
 mNumAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator valueAnimator){
 mMinNum = (int) valueAnimator.getAnimatedValue();
 postInvalidate();  

}
});
 mNumAnim.start();}

最后根据传入的信用分值计算圆弧进度条所到的角度.

public void setSesameValues(int values){
 if (values <= 350){
 mMaxNum = values;
 mTotalAngle = 0f;
 sesameLevel = "信用较差";
 evaluationTime = "评估时间:" + getCurrentTime();
 } else if (values <= 550){
 mMaxNum = values;
 mTotalAngle = (values - 350) * 80 / 400f + 2;
 sesameLevel = "信用较差";
 evaluationTime = "评估时间:" + getCurrentTime();
 } else if (values <= 700)
 {
 mMaxNum = values;
 if (values > 550 && values <= 600){
 sesameLevel = "信用中等";
 } else if (values > 600 && values <= 650){
 sesameLevel = "信用良好";
 } else {
 sesameLevel = "信用优秀";
 }
 mTotalAngle = (values - 550) * 120 / 150f + 43;
 evaluationTime = "评估时间:" + getCurrentTime();
 } else if (values <= 950){
 mMaxNum = values;
 mTotalAngle = (values - 700) * 40 / 250f + 170;
 sesameLevel = "信用极好";
 evaluationTime = "评估时间:" + getCurrentTime();
 } else{
 mTotalAngle = 240f;
 }
 startAnim();
}

总结

这篇文章只分析了新版的实现过程,旧版的的实现思路也差不多,代码也不复杂。希望这篇文章对大家开发Android能有所帮助,如果有疑问可以留言交流。

(0)

相关推荐

  • Android自定义View制作仪表盘界面

    前言 最近我跟自定义View杠上了,甚至说有点上瘾到走火入魔了.身为菜鸟的我自然要查阅大量的资料,学习大神们的代码,这不,前两天正好在郭神在微信公众号里推送一片自定义控件的文章--一步步实现精美的钟表界面.正适合我这种菜鸟来学习,闲着没事,我就差不多依葫芦画瓢也写了一个自定义表盘View,现在纯粹最为笔记记录下来.先展示下效果图: 下面进入正题 自定义表盘属性 老规矩,先在attrs文件里添加表盘自定义属性 <declare-styleable name="WatchView"&

  • Android自定义SurfaceView实现画板功能

    接触了这么久的View,总不能一直停留在View里,现在开始呢,就要学习一个新的知识点:SurfaceView,实际上SurfaceView与View的原理都差不多,只是效率和渲染方式上,SurfaceView要优于View,这也是我们写这个的原因.今天就看看这个SurfaceView,好了,下面就是今天要说的效果. 界面很简单,就是一个按钮以及一个画板,先看看界面的代码吧 <LinearLayout xmlns:android="http://schemas.android.com/ap

  • Android中自定义一个View的方法详解

    本文实例讲述了Android中自定义一个View的方法.分享给大家供大家参考,具体如下: Android中自定义View的实现比较简单,无非就是继承父类,然后重载方法,即便如此,在实际编码中难免会遇到一些坑,我把自己遇到的一些问题和解决方法总结一下,希望对广大码友们有所帮助. 注意点① 用xml定义Layout时,Root element 最好使用merge 当我们需要继承一个布局比较复杂的ViewGroup(比较多的是LinearLayout.RelativeLayout)时,通常会用xml来

  • Android自定义View仿支付宝芝麻信用分仪表盘

    先看下iOS的芝麻信用分截图 这是我做的效果,还是有点差距的 支付宝9.9版本芝麻信用分的实现 首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替) //View的默认大小 defaultSize = dp2px(250); //默认Padding大小 arcDistance = dp2px(14); //外层圆环画笔 mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLA

  • js canvas仿支付宝芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score,分数区间[400, 900] --> 唉,总感觉不像.这个是G

  • Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 自定义view仿支付宝咻一咻功能

    支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会说我还要继承容器view去onLayout()方法中这些子view添加在某个特定的区域,当然

  • iOS仿支付宝芝麻信用分数仪表盘动画效果

    先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

  • Android自定义view之仿支付宝芝麻信用仪表盘示例

    自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="RoundIndicatorView"> <!--最大数值--> <attr name="maxNum" form

  • Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

    本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

  • Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

  • Android自定义View仿IOS圆盘时间选择器

    通过自定义view实现仿iOS实现滑动两端的点选择时间的效果 效果图 自定义的view代码 public class Ring_Slide2 extends View { private static final double RADIAN = 180 / Math.PI; private int max_progress; // 设置最大进度 private int cur_progress; //设置锚点1当前进度 private int cur_progress2; //设置锚点2进度 p

  • Android自定义view仿iOS弹出框效果

    本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码,供大家参考,具体内容如下 运行效果图 自定义对话框的使用,仿照ios.从底部弹出,类似pop窗口.包括消息.图片.列表及对话框. 好了,用法都会,直接贴上代码 1.layout布局文件 view_actionsheet.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

随机推荐