android开发自定义View(三)仿芝麻信用积分
2024-05-15 04:04:40
此文参考了https://github.com/HotBitmapGG/CreditSesameRingView
感谢作者的分享！！
首先看一下支付宝上显示的样子
然后看一下模仿的效果
代码
基础部分就不说了，直接说核心部分，不理解的可以去看
android开发自定义View(一)
android开发自定义View(二)自定义圆形进度条
1.测量控件大小
<cn.jiangzehui.www.myview3.MyViewandroid:id="@+id/mv"android:padding="5dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_centerHorizontal="true" />private int radus;//半径
private int defalutSize ;//默认大小
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int wMode = MeasureSpec.getMode(widthMeasureSpec);int wSize = MeasureSpec.getSize(widthMeasureSpec);int hMode = MeasureSpec.getMode(heightMeasureSpec);int hSize = MeasureSpec.getSize(heightMeasureSpec);int width,height;if(wMode == MeasureSpec.EXACTLY){width = wSize;}else{width=Math.min(wSize,defalutSize);}if(hMode == MeasureSpec.EXACTLY){height = hSize;}else{height=Math.min(hSize,defalutSize);}radus = width/2;setMeasuredDimension(width,height);}/*** dp转px** @param values* @return*/public int dp_px(int values){float density = getResources().getDisplayMetrics().density;return (int) (values * density + 0.5f);}如果在布局中没有设定指定的大小也就是wrap_content的时候，我们需要给控制设置一个默认值defalutSize。如果不设置控件会默认全屏显示。
2.绘制外层圆环
首先初始化一下外环画笔，各种属性可根据实际情况微调。
private Paint wPaint;//外环画笔
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);defalutSize = dp_px(defalutSize);wPaint=new Paint();wPaint.setAntiAlias(true);wPaint.setColor(Color.WHITE);wPaint.setAlpha(50);//透明度，取值范围为0~255，数值越小越透明wPaint.setStyle(Paint.Style.STROKE);wPaint.setStrokeWidth(10);}绘制
@Overrideprotected void onDraw(final Canvas canvas) {super.onDraw(canvas);final RectF rf=new RectF(getPaddingLeft(),getPaddingTop(),getWidth()-getPaddingRight(),getHeight()-getPaddingBottom());//绘制外环canvas.drawArc(rf,-195,210,false,wPaint);//总360}效果
3.绘制内层圆环
声明变量
private Paint nPaint;//内环画笔
private int distance = 30;//外环于内环的间距
在构造方法里初始化画笔
//初始化内环画笔distance = dp_px(distance);nPaint=new Paint();nPaint.setAntiAlias(true);nPaint.setColor(Color.WHITE);nPaint.setAlpha(50);nPaint.setStyle(Paint.Style.STROKE);nPaint.setStrokeWidth(30);
绘制
RectF n_rf=new RectF(getPaddingLeft()+distance,getPaddingTop()+distance,getWidth()-(getPaddingRight()+distance),getHeight()-(getPaddingBottom()+distance));//绘制内环canvas.drawArc(n_rf,-195,210,false,nPaint);效果
4.绘制内环刻度
声明变量
private Paint nk_Paint;//内层小刻度画笔
private Paint lfPaint;//内层大刻度画笔初始化
nk_Paint=new Paint();
nk_Paint.setAntiAlias(true);
nk_Paint.setColor(Color.WHITE);
nk_Paint.setAlpha(80);lfPaint=new Paint();
lfPaint.setAntiAlias(true);
lfPaint.setStrokeWidth(2);
lfPaint.setColor(Color.WHITE);
lfPaint.setAlpha(100);绘制
//绘制内环刻度canvas.save();canvas.rotate(-105, radus, radus);//计算刻度线的起点结束点int startDst = (int) (getPaddingLeft()+distance - nPaint.getStrokeWidth() / 2 );int endDst = (int) (startDst + nPaint.getStrokeWidth());int endDsts = (int) (startDst + nPaint.getStrokeWidth()+5);for (int i = 1; i <= 31; i++){//每旋转4度绘制一个小刻度canvas.drawLine(radus, startDst, radus, endDst, nk_Paint);canvas.rotate(7, radus, radus);}canvas.restore();canvas.save();canvas.rotate(-105, radus, radus);for (int i = 1; i <= 6; i++){//每旋转4度绘制一个小刻度canvas.drawLine(radus, startDst, radus, endDsts, lfPaint);canvas.rotate(42, radus, radus);}canvas.restore();效果
5.绘制内环各刻度等级，BEAT文字，信用等级，信用级别，评估时间
声明变量
String[] str ={"350","较差","550","中等","600","良好","650","优秀","700","极好","950"};private Paint ztPaint;//刻度等级字体画笔private Paint btPaint;//BETA画笔private Paint szPaint;//675画笔private Paint djPaint;//信用等级画笔private Paint pgPaint;//评估时间画笔// 最小数字private int mMinNum = 350;// 最大数字private int mMaxNum = 950;//信用等级private String sesameLevel = "";//总进度private float mTotalAngle = 210f;//评估时间private String evaluationTime = "";初始化
ztPaint=new Paint();ztPaint.setAntiAlias(true);ztPaint.setColor(Color.WHITE);ztPaint.setTextSize(25);ztPaint.setAlpha(100);btPaint=new Paint();btPaint.setAntiAlias(true);btPaint.setColor(Color.WHITE);btPaint.setTextSize(30);btPaint.setAlpha(100);szPaint=new Paint();szPaint.setAntiAlias(true);szPaint.setColor(Color.WHITE);szPaint.setTextSize(140);djPaint=new Paint();djPaint.setAntiAlias(true);djPaint.setColor(Color.WHITE);djPaint.setTextSize(65);pgPaint=new Paint();pgPaint.setAntiAlias(true);pgPaint.setColor(Color.WHITE);pgPaint.setTextSize(30);pgPaint.setAlpha(100);绘制
//绘制内环各刻度等级canvas.save();canvas.rotate(-105, radus, radus);//计算刻度线的起点结束点for (int i = 0; i < str.length; i++){//每旋转4度绘制一个小刻度float textLen = ztPaint.measureText(str[i]);canvas.drawText(str[i],radus - textLen / 2,endDst + 40,ztPaint);canvas.rotate(21, radus, radus);}canvas.restore();//绘制BEAT文字Rect rt=new Rect();btPaint.getTextBounds("BETA",0,"BETA".length(),rt);float beta_hight = rt.height();float beta_width = rt.width();canvas.drawText("BETA",radus - beta_width / 2,radus/2,btPaint);//绘制信用等级Rect rt1=new Rect();if(mMinNum!=0){szPaint.getTextBounds("111",0,"111".length(),rt1);float textLen1 = szPaint.measureText(mMinNum+"");canvas.drawText(mMinNum+"",radus - textLen1 / 2,radus/2+beta_hight+rt1.height(),szPaint);}//绘制信用级别Rect rt2=new Rect();djPaint.getTextBounds(sesameLevel,0,sesameLevel.length(),rt2);float textLen2 = djPaint.measureText(sesameLevel);canvas.drawText(sesameLevel,radus - textLen2 / 2,radus/2+beta_hight*2+rt2.height()+rt1.height(),djPaint);//绘制评估时间Rect rt3=new Rect();pgPaint.getTextBounds(evaluationTime,0,evaluationTime.length(),rt3);float textLen3 = pgPaint.measureText(evaluationTime);canvas.drawText(evaluationTime,radus - textLen3 / 2,radus/2+beta_hight*3+rt2.height()+rt1.height()+rt3.height(),pgPaint);方法
/*** 获取当前时间** @return*/public String getCurrentTime(){@SuppressLint("SimpleDateFormat")SimpleDateFormat format = new SimpleDateFormat("yyyy:MM:dd");return format.format(new Date());}//数字动画public void startAnim(){ValueAnimator mAngleAnim = ValueAnimator.ofFloat(progress, mTotalAngle);mAngleAnim.setInterpolator(new AccelerateDecelerateInterpolator());mAngleAnim.setDuration(5000);mAngleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator){progress = (float) valueAnimator.getAnimatedValue();postInvalidate();}});mAngleAnim.start();ValueAnimator mNumAnim = ValueAnimator.ofInt(mMinNum, mMaxNum);mNumAnim.setDuration(5000);mNumAnim.setInterpolator(new LinearInterpolator());mNumAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator){mMinNum = (int) valueAnimator.getAnimatedValue();postInvalidate();}});mNumAnim.start();}//设置信用等级350~950之间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();}在Activity初始化并调用
mv= (MyView) findViewById(R.id.mv);
mv.setSesameValues(657);
效果
大体样子已经基本出来了
6. 绘制进度条
private Paint mBitmapPaint;//小圆点画笔private float[] cir_location;//小圆点的实际位置 mBitmapPaint = new Paint();mBitmapPaint.setStyle(Paint.Style.FILL);mBitmapPaint.setColor(Color.WHITE);mBitmapPaint.setAntiAlias(true);cir_location = new float[2]; //绘制外环进度canvas.drawArc(rf,-195,progress,false,wwPaint);//总360
//绘制外环小圆点Path path = new Path();path.addArc(rf, -195, progress);PathMeasure pathMeasure = new PathMeasure(path, false);pathMeasure.getPosTan(pathMeasure.getLength() * 1, cir_location, null);mBitmapPaint.setColor(Color.WHITE);canvas.drawCircle(cir_location[0], cir_location[1], 8, mBitmapPaint);canvas.drawCircle(cir_location[0], cir_location[1], 8, mBitmapPaint);源码下载
android开发自定义View(三)仿芝麻信用积分相关推荐
- Android开发自定义View之仿米家APP双色灯控制UI：做一个智能家居产品的简单智能灯UI ！(附带Demo)
一. 前言: 兜兜转转,不知不觉做Android开发已经快2年了,上半年一直在搞wifi模块开发,导致不务正业,写个自定义UI还要折腾半天,真是对不起自己的良心了!最近要对接小米开放平台,不小心看到了 ...
- android开发自定义View(四)仿掌上英雄联盟能力值分析效果
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 原始图效果 模仿效果 PNG GIF 流程 绘制中心线,用于计算外层多边形各点的坐标 绘制最外层多边形 分析原型图算出每个多边形之间 ...
- Android开发自定义View
Android中View组件的作用类似于Swing变成中的JPanel,它只是一个空白的矩形区域,View组件中没有任何内容.对于Android应用的其他UI组件来说,它们都继承了View组件,然后在 ...
- Android开发自定义View之滑动按钮与自定义属性
写博客辛苦了,转载的朋友请标明出处哦,finddreams:(http://blog.csdn.net/finddreams/article/details/40392975) 话不多说,先运行效果图 ...
- Android开发自定义View实现数字与图片无缝切换的2048
本博客地址:http://blog.csdn.net/talentclass_ctt/article/details/51952378 最近在学自定义View,无意中看到鸿洋大神以前写过的2048(附 ...
- Android自定义view之仿支付宝芝麻信用仪表盘 ---by ccy
自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 <?xml version="1.0" encoding=&qu ...
- 自定义xy组 android,Android自定义view之仿支付宝芝麻信用仪表盘示例
自定义view练习 仿支付宝芝麻信用的仪表盘 对比图: 首先是自定义一些属性,可自己再添加,挺基础的,上代码 接着在构造方法里初始化自定义属性和画笔: private void initAttr(At ...
- android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言 上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
- Android自定义View之仿QQ运动步数进度效果
文章目录 前言 先看效果图 
- Internal Server Error - http code 500
- python显示等待和隐式等待_荐selenium内的隐式等待和显示等待的区别
- 华为P40 Pro将搭载索尼IMX 700传感器：支持十六像素合一
- 基于 Linux 和 MiniGUI 的嵌入式系统软件开发指南(一)(转)
- 苹果向开发者发布iOS/iPadOS 14.6的第二个测试版
- AI医疗--概念，应用场景及现状解析
- ISO9001 试题及答案
- HTML 制作一个通讯录
- 目标检测：Object Detection in 20 Years: A Survey
- APK大小查看、定义、反编译、如何安装解压
- NLP︱中文分词技术小结、几大分词引擎的介绍与比较
- 人人商城图片错乱问题
- 狂神Docker通俗易懂学习笔记2
- CAD梦想画图中“轻松手绘”功能使用方法
- php ssl 465,帝国CMS邮件无法发送 SSL465端口无法发送的问题解决办法
- 【Week 15 作业A】ZJM 与霍格沃兹
- 学php收获与体会,实习心得体会及收获