支付宝芝麻信用UI_(一)基本功能的实现

打开支付宝,发现芝麻信用的界面更换了,心血来潮 . 写一波 . 写完发现并没有什么难度,就是重复,啰嗦

计算的方法比较简单,学习完成基本把canvas的基本方法全部了解了一遍.

先说说绘制的过程

1:先绘制外圈的底色

2:绘制外圈的渐变色(渐变色,渐变色,渐变色),我的颜色差距看起来不大,在二中完善

3:绘制圆点底色

4:绘制圆点亮色

5:绘制指向的小图标

6:剩下的就是绘制文字了(这个是最简单的)

==================代码的分割线=========================

代码用的变量

private int progress = 150;String BETA = "BETA";String TEXT_TIME = "评估时间 : 2017-01-06";String CONTENT_TEXT = "信用极好";String CONTENT_NUM = "735";int COLOR_GREY = 0xff8f8f8f;int COLOR_WHITE = 0xffFFFFFF;float PROGRESS_WIDTH = 5;private int circleRadius = 200;/** 起始绘制的角度位置 */private int START_CANVAS = 130;/** 总数旋转的角度 */private int ROTATE_NUM = 280;

1:先绘制外圈的底色

private void drawBg(Canvas canvas) {mPaint.setColor(Color.GRAY);mPaint.setAlpha(255);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(PROGRESS_WIDTH);int width = getWidth();int height = getHeight();int left = width / 2 - circleRadius;int top = height / 2 - circleRadius;int right = width / 2 + circleRadius;int bottom = height / 2 + circleRadius;RectF oval1 = new RectF(left, top, right, bottom);canvas.drawArc(oval1, START_CANVAS, ROTATE_NUM, false, mPaint);// 小弧形}

2:绘制外圈的渐变色(渐变色,渐变色,渐变色),我的颜色差距看起来不大,在二中完善

// 外围渐变色private void drawBgChange(Canvas canvas) {changePaint.setStyle(Paint.Style.STROKE);changePaint.setStrokeWidth(PROGRESS_WIDTH);Shader mShader = new LinearGradient(getWidth() / 2 - circleRadius, getHeight() / 2,getWidth() / 2 + circleRadius, getHeight() / 2, COLOR_GREY, COLOR_WHITE, Shader.TileMode.MIRROR);changePaint.setShader(mShader);int width = getWidth();int height = getHeight();int left = width / 2 - circleRadius;int top = height / 2 - circleRadius;int right = width / 2 + circleRadius;int bottom = height / 2 + circleRadius;RectF oval1 = new RectF(left, top, right, bottom);canvas.drawArc(oval1, START_CANVAS, progress, false, changePaint);// 小弧形}

3:绘制圆点底色

/** * 绘制一圈的点 */int degree = 4;private void drawPoint(Canvas canvas) {canvas.save();mPaint.setColor(0xff3c3c3c);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;// 旋转的角度// 点的格式int piont_num = ROTATE_NUM / degree;canvas.rotate(START_CANVAS, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {canvas.drawCircle(startX + circleRadius - 20, startY, 3, mPaint);canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}

4:绘制圆点亮色

/** * 绘制指向点 */@SuppressLint("NewApi")private void drawPointLight(Canvas canvas) {canvas.save();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;int piont_num = ROTATE_NUM / degree;int changeCircle = progress * piont_num / ROTATE_NUM;canvas.rotate(START_CANVAS, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {if (i < changeCircle + 1) {canvas.drawCircle(startX + circleRadius - 20, startY, 3, mPaint);}canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}

5:绘制指向的小图标

/** * 绘制指向点 */@SuppressLint("NewApi")private void drawPointTo(Canvas canvas) {canvas.save();mPaint.setColor(COLOR_GREY);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;int piont_num = ROTATE_NUM / 4;int changeCircle = progress * piont_num / ROTATE_NUM;// 图片和圆点偏差3度的角度,这里少转3度canvas.rotate(START_CANVAS - 3, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {if (i == changeCircle) {Bitmap map = BitmapFactory.decodeResource(getResources(), R.drawable.ccc);canvas.drawBitmap(map, startX + circleRadius - 50, startY, mPaint);// canvas.drawCircle(startX + circleRadius - 50, startY, 7,// mPaint);}canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}

6:剩下的就是绘制文字了(这个是最简单的)

// 绘制735private void drawNum(Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(55);mPaint.setAlpha(250); // 透明度值在0~255之间mPaint.getTextBounds(CONTENT_NUM, 0, CONTENT_NUM.length(), bounds);canvas.drawText(CONTENT_NUM, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + 220, mPaint);}// 绘制信用很好private void drawContent(Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(35);mPaint.setAlpha(180); // 透明度值在0~255之间mPaint.getTextBounds(CONTENT_TEXT, 0, CONTENT_TEXT.length(), bounds);canvas.drawText(CONTENT_TEXT, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + 150, mPaint);}private void drawTitleText(int distance, String textD, Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(25);mPaint.setAlpha(130); // 透明度值在0~255之间mPaint.getTextBounds(textD, 0, textD.length(), bounds);canvas.drawText(textD, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + distance, mPaint);}

是不是看起来很简单,完全的叠代码,当然,我还没有优化代码,很多代码都是可以重复使用的,在版本2优化下布局,适配和一些特效的添加

先看看完整的代码.

package com.cdl.demo;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.BitmapFactory;import android.graphics.BlurMaskFilter;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.MaskFilter;import android.graphics.Paint;import android.graphics.Paint.Cap;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;public class PayView extends View {Paint mPaint;public PayView(Context context) {this(context, null);}public PayView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public PayView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);intiView();}Paint changePaint;private float haloWidthPx = 20;private void intiView() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setStrokeCap(Cap.ROUND);changePaint = new Paint();changePaint.setAntiAlias(true);changePaint.setDither(true);// 设置抖动,颜色过渡更均匀changePaint.setStrokeCap(Cap.ROUND);}protected void onDraw(Canvas canvas) {super.onDraw(canvas);drawBg(canvas); // 绘制外围的半圆drawPoint(canvas); // 绘制内圈的点drawTitleText(100, BETA, canvas); // 绘制betadrawContent(canvas); // 绘制主题文字drawNum(canvas); // 绘制735drawTitleText(270, TEXT_TIME, canvas); // 绘制betadrawBgChange(canvas); // 绘制外围变色区域drawPointLight(canvas); // 绘制亮点drawPointTo(canvas); // 指向点的位置}// 外围渐变色private void drawBgChange(Canvas canvas) {changePaint.setStyle(Paint.Style.STROKE);changePaint.setStrokeWidth(PROGRESS_WIDTH);Shader mShader = new LinearGradient(getWidth() / 2 - circleRadius, getHeight() / 2,getWidth() / 2 + circleRadius, getHeight() / 2, COLOR_GREY, COLOR_WHITE, Shader.TileMode.MIRROR);changePaint.setShader(mShader);int width = getWidth();int height = getHeight();int left = width / 2 - circleRadius;int top = height / 2 - circleRadius;int right = width / 2 + circleRadius;int bottom = height / 2 + circleRadius;RectF oval1 = new RectF(left, top, right, bottom);canvas.drawArc(oval1, START_CANVAS, progress, false, changePaint);// 小弧形}// 绘制735private void drawNum(Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(55);mPaint.setAlpha(250); // 透明度值在0~255之间mPaint.getTextBounds(CONTENT_NUM, 0, CONTENT_NUM.length(), bounds);canvas.drawText(CONTENT_NUM, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + 220, mPaint);}// 绘制信用很好private void drawContent(Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(35);mPaint.setAlpha(180); // 透明度值在0~255之间mPaint.getTextBounds(CONTENT_TEXT, 0, CONTENT_TEXT.length(), bounds);canvas.drawText(CONTENT_TEXT, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + 150, mPaint);}private void drawTitleText(int distance, String textD, Canvas canvas) {final int width = getWidth();final int height = getHeight();final Rect bounds = new Rect();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setTextSize(25);mPaint.setAlpha(130); // 透明度值在0~255之间mPaint.getTextBounds(textD, 0, textD.length(), bounds);canvas.drawText(textD, (width / 2) - (bounds.width() / 2), (height / 2) - circleRadius + distance, mPaint);}/** * 绘制指向点 */@SuppressLint("NewApi")private void drawPointTo(Canvas canvas) {canvas.save();mPaint.setColor(COLOR_GREY);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;int piont_num = ROTATE_NUM / 4;int changeCircle = progress * piont_num / ROTATE_NUM;// 图片和圆点偏差3度的角度,这里少转3度canvas.rotate(START_CANVAS - 3, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {if (i == changeCircle) {Bitmap map = BitmapFactory.decodeResource(getResources(), R.drawable.ccc);canvas.drawBitmap(map, startX + circleRadius - 50, startY, mPaint);// canvas.drawCircle(startX + circleRadius - 50, startY, 7,// mPaint);}canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}/** * 绘制指向点 */@SuppressLint("NewApi")private void drawPointLight(Canvas canvas) {canvas.save();mPaint.setColor(COLOR_WHITE);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;int piont_num = ROTATE_NUM / degree;int changeCircle = progress * piont_num / ROTATE_NUM;canvas.rotate(START_CANVAS, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {if (i < changeCircle + 1) {canvas.drawCircle(startX + circleRadius - 20, startY, 3, mPaint);}canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}/** * 绘制一圈的点 */int degree = 4;private void drawPoint(Canvas canvas) {canvas.save();mPaint.setColor(0xff3c3c3c);mPaint.setStyle(Paint.Style.FILL);int startX = getWidth() / 2;int startY = getHeight() / 2;// 旋转的角度// 点的格式int piont_num = ROTATE_NUM / degree;canvas.rotate(START_CANVAS, startX, startY);// 以圆中心进行旋转for (int i = 0; i < piont_num; i++) {canvas.drawCircle(startX + circleRadius - 20, startY, 3, mPaint);canvas.rotate(degree, startX, startY);// 以圆中心进行旋转}canvas.restore();}private int progress = 150;String BETA = "BETA";String TEXT_TIME = "评估时间 : 2017-01-06";String CONTENT_TEXT = "信用极好";String CONTENT_NUM = "735";int COLOR_GREY = 0xff8f8f8f;int COLOR_WHITE = 0xffFFFFFF;float PROGRESS_WIDTH = 5;private int circleRadius = 200;/** 起始绘制的角度位置 */private int START_CANVAS = 130;/** 总数旋转的角度 */private int ROTATE_NUM = 280;/*** * 绘制外围的线 *  * @param canvas */private void drawBg(Canvas canvas) {mPaint.setColor(Color.GRAY);mPaint.setAlpha(255);mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(PROGRESS_WIDTH);int width = getWidth();int height = getHeight();int left = width / 2 - circleRadius;int top = height / 2 - circleRadius;int right = width / 2 + circleRadius;int bottom = height / 2 + circleRadius;RectF oval1 = new RectF(left, top, right, bottom);canvas.drawArc(oval1, START_CANVAS, ROTATE_NUM, false, mPaint);// 小弧形}}