android设计计算等级程序,Android自定义View仿QQ等级天数进度
最近一直都在看自定义View这一块。差不多一个星期了吧。这个星期坚持每天更新博客,感觉自己的技术也有点突破,对自定义View的计算也有了更深的认识。
今天看到手机一个成长天数进度的控件,觉得挺有意思的,于是想自己也写一个。效果如下:
由图可以知道,这里面有很多个元素,首先是背景的矩形区域,其次就是两个环形,然后三个Text文本。其实不复杂,我们一点一点的去实现。
首先呢,画矩形背景。这里用到一个RectF的类,这个类包含一个矩形的四个单精度浮点坐标。矩形通过上下左右4个边的坐标来表示一个矩形。这些坐标值属性可以被直接访问,用width()和 height()方法可以获取矩形的宽和高,同时他还有构造方法:
RectF一共有四个构造方法:
RectF()构造一个无参的矩形
RectF(float left,float top,float right,float bottom)构造一个指定了4个参数的矩形
RectF(Rect F r)根据指定的RectF对象来构造一个RectF对象(对象的左边坐标不变)
RectF(Rect r)根据给定的Rect对象来构造一个RectF对象
那么,这里使用第二个构造方法,代码如下:
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=getWidth();
mHeight=getHeight();
mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));
}
现在是矩形的背景有了,那么,还有环形跟文字又怎么去处理呢,别着急,我们先看看这个环形,我这里之所以定义两个环形,是因为,一个用作进度去显示,一个当做背景去实现,好了,分别绘制两个环形。代码如下:
canvas.drawArc(mRectF, 90, 360, false, mButtomPaint);
canvas.drawArc(mRectF, 15, 180, false, mTopPaint);
两个环形也有了,接下来就是文字了,绘制文字我们使用canvas.DrawText方法,去绘制,具体代码如下:
canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);
canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);
canvas.drawText("升级年费超级会员立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);
这下全部的效果也出来了,最后,我贴上所有的代码:
public class MyProgress extends View {
private Paint mButtomPaint;
private Paint mTopPaint;
private Paint mTextPaint;
private Paint mSmailTextPaint;
private float mWidth;
private float mHeight;
private RectF mRectF;
public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
public MyProgress(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public MyProgress(Context context) {
super(context);
initView();
}
private void initView() {
mButtomPaint=new Paint();
mButtomPaint.setColor(Color.rgb(69, 142, 253));
mButtomPaint.setAntiAlias(true);
mButtomPaint.setStrokeWidth(10);
mButtomPaint.setStyle(Style.STROKE);
mTopPaint=new Paint();
mTopPaint.setColor(Color.parseColor("#ffffff"));
mTopPaint.setAntiAlias(true);
mTopPaint.setStrokeWidth(10);
mTopPaint.setStyle(Style.STROKE);
mTextPaint=new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setAntiAlias(true);
mTextPaint.setStrokeWidth(5);
mTextPaint.setTextSize(50);
mSmailTextPaint=new Paint();
mSmailTextPaint.setStrokeWidth(3);
mSmailTextPaint.setColor(Color.WHITE);
mSmailTextPaint.setAntiAlias(true);
mSmailTextPaint.setTextSize(15);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=getWidth();
mHeight=getHeight();
mRectF=new RectF((float)(mWidth*0.1), (float)(mHeight*0.1), (float)(mWidth*0.9), (float)(mHeight*0.9));
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(mRectF, 90, 360, false, mButtomPaint);
canvas.drawArc(mRectF, 15, 180, false, mTopPaint);
float mTextWidth=mTextPaint.measureText("5.0");
float mTextSmail=mSmailTextPaint.measureText("天");
float mTextSmailButtom=mSmailTextPaint.measureText("升级年费超级会员立即升至");
canvas.drawText("5.0", (mWidth-(mTextWidth+mTextSmail))/2, (float)(mHeight/2), mTextPaint);
canvas.drawText("天", (mWidth-(mTextWidth+mTextSmail))/2+mTextWidth, (float)(mHeight/2), mSmailTextPaint);
canvas.drawText("升级年费超级会员立即升至", (mWidth-mTextSmailButtom)/2, (float)(mHeight/2+30), mSmailTextPaint);
}
}
谢谢阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android设计计算等级程序,Android自定义View仿QQ等级天数进度相关推荐
- 自定义View | 仿QQ运动步数进度效果
项目GitHub地址 思路 固定不动的蓝色大圆弧 动画变动的红色小圆弧 中间的步数文字显示 相关的自定义属性 比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
- 自定义View 仿QQ运动步数进度效果
1. 概述 我记得QQ之前是有一个,运动步数的进度效果,今天打开QQ一看发现没有了.具体效果我也不清楚了,我就按照自己大概的印象写一下,这一期我们主要是熟悉Paint画笔的使用: 2. 效果 ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- 自定义view 仿qq步数 半圆弧
先看效果图: 自定义属性 <declare-styleable name="QQSteps"><attr name="roundWidth" ...
- android记账本折线图_Android自定义View - 仿支付宝月账单折线图
前言 支付宝有个查看月账单的功能,最近一直在学习自定义View,于是就尝试着自己实现了一个类似的折线图. 下面是支付宝消费分析功能截图和自己实现的折线效果截图: 支付宝消费分析折线图.jpg 效果1. ...
- oracle number型步数,Android自定义View仿QQ计步器
自定义计步器 Android自定义View是Android开发中比较重要的一项,也是很多开发者比较怕的一个东西.其实只要认真去学习,自定义View其实没有那么可怕:相反的,我们还能从自定义View中找 ...
- android自定义计步器形状,Android自定义View仿QQ运动步数效果
本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: 自定义View代码如下: /** * Created by Mic ...
- 自定义View - 仿QQ运动步数效果
今天我们实现下面这样的效果: 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resourc ...
- Android自定义view仿QQ的Tab按钮动效
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- 精通Android自定义View(十二)绘制圆形进度条
1 绘图基础简析 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制 ...
最新文章
- 单片机上电复位电路图大全
- 考虑用Task.WhenAll
- 微软开源Visual Studio测试平台VSTest
- 教师计算机网络培训工作总结,教师培训工作的自我总结
- PTA 7-1 求奇数和 (C语言)
- 关于CXF大文件的传输问题
- dfa matlab用法,关于使用MF-DFA方法计算广义Hurst指数的MATLAB操作问题
- 关于直播,所有的技术细节都在这里了(四)
- 21 , CSS 构造模型
- python打印当前时间
- 12月PMP备考~通关宝典
- OpenCV基础——IplImage中的widthStep
- RFID技术在图书馆中的应用
- java旅游网站毕业论文_旅游网站的设计与实现
- oracle oem登录xdb,XDB sys_nc_oid$递归调用的案例一则
- python 将毫秒转换成日期_Python将毫秒转换为datetime并返回
- Django数据映射 一对一 一对多 多对多
- git 取消托管文件
- python获取摄像头型号,python3.6 opencv获取摄像头代码
- win10无限蓝屏 ,错误代码BAD_SYSTEM_CONFIG_INFO
热门文章
- dns服务器修改失败,dns错误重新设置方法
- python设置Excel单元格的数据有效性
- PHPExcel出现 Formula Error的解决方案
- 社交规则:饭后抢着买单到底是客气还是客套?大多并不是真心的
- 摸鱼还要提醒?用Python整个倒计时界面自觉摸鱼~
- 如何利用COOC生成动态排名变化利器可识别的数据格式
- 物理机通过Xshell连接不上虚拟机的解决方案
- 最长公共子序列(LCS) 过程图解
- smart3d4.4.5_在Android 5.0中使用Smart Lock,再也不必在家中解锁手机
- 学1个月爬虫就月赚6000?告诉你爬虫的真实情况!