android计步器简书,自定义View-仿QQ运动步数进度效果
自定义View-仿QQ运动步数进度效果
一、写在前面
(1) 图一,仿QQ步数运行效果
(2) 图二,完整的圆效果
完整代码请看这
二、正文开始
(1)首先来个三部曲,自定义属性,布局设置,属性获取
1)自定义属性,新建attrs.xml
2)布局设置
3)属性获取
(2) 我们先来解决,宽高的问题,重写onMeasure方法
(3) 现在就是各种绘制
1)绘制文本
2)绘制外弧
3)绘制内弧
4)文本的动态效果
(4)最后在Activity中应用
一、写在前面
在参考了红橙Darren的文章之后,将自己实现的做个笔记,并提供给大家参考,红橙Darren 的 自定义View - 仿QQ运动步数进度效果,同时还参考了 和小胖 的 Android自定义view之基础canvas.drawXXX方法,并在此基础上衍生了几种效果。
没有自定义View基础的请看这自定义View简介 - onMeasure,onDraw,自定义属性
(1) 图一,仿QQ步数运行效果
(2) 图二,完整的圆效果
还可以衍生为,倒计时效果,百分比效果,有兴趣的可自行实现
完整代码请看这
自定义View-仿QQ运动步数进度效果(完整代码)
二、正文开始
首先思考,实现的思路,仿QQ步数运行效果,主要有三个部分:
一、中间文字
二、外弧,内弧
三、动态效果
四、控件大小,从效果图上面可以看出我们的控件是正方形,所以我们要保证,用户不管设置大小如何都能是正方形,或者提示用户要保证宽高一致
有了思路之后就开始撸代码了
(1)首先来个三部曲,自定义属性,布局设置,属性获取
1)自定义属性,新建attrs.xml
```java
2)布局设置
android:id="@+id/progressRunView"
android:layout_width="300dp"
android:layout_height="400dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/colorAccent"
app:centerInnerColor="#FF0000"
app:centerTextColor="#FF0000"
app:centerTextSize="50sp"
app:cirleForeginColor="#2196F3"
app:cirleSize="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
3)属性获取
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressRunView);
centerTextSize = typedArray.getDimensionPixelSize(R.styleable.ProgressRunView_centerTextSize,Px2Sp(context,centerTextSize));
cirleSize = typedArray.getDimension(R.styleable.ProgressRunView_cirleSize,cirleSize);
centerTextColor = typedArray.getColor(R.styleable.ProgressRunView_centerTextColor,centerTextColor);
cirleForeginColor = typedArray.getColor(R.styleable.ProgressRunView_cirleForeginColor,cirleForeginColor);
centerInnerColor = typedArray.getColor(R.styleable.ProgressRunView_centerInnerColor,centerInnerColor);
typedArray.recycle();
(2) 我们先来解决,宽高的问题,重写onMeasure方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取宽高的模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//指定宽高的大小
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//如果宽高设置为wrap_content时,刚默认为500
if(widthMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.AT_MOST){
width = 500;
height = width;
}
//如果宽高不一致时,则以宽为标准
if(width != height){
height = width;
}
setMeasuredDimension(width,height);
}
(3) 现在就是各种绘制
1)绘制文本
private void drawText(Canvas canvas) {
Rect rect = new Rect();
paintText.getTextBounds(runText,0,runText.length(),rect);
Paint.FontMetrics fontMetrics =paintText.getFontMetrics();
int dx = getWidth()/2 - rect.width()/2;
//基线
float baseline = getHeight()/2 + (fontMetrics.top-fontMetrics.bottom)/2-fontMetrics.top;
canvas.drawText(runText,dx,baseline,paintText);
}
2)绘制外弧
private void drawCirle(Canvas canvas) {
int radius = 200;
RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);
canvas.drawArc(rectF, 135, 270, false, paintCirle);
}
3)绘制内弧
private void drawCirleInner(Canvas canvas) {
int radius = 200;
RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);
float sweepAngle = (float) Integer.valueOf(runText)/maxStep;
//动态设置扫过的面积(弧的动态效果)
canvas.drawArc(rectF, 135, sweepAngle*270, false, paintCirleInner);
}
4)文本的动态效果
public void start(int start,int end){
ValueAnimator valueAnimator = ValueAnimator.ofInt(start,end);
//开始到结束的时间
valueAnimator.setDuration(3000);
valueAnimator.start();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int currentStep = (int) valueAnimator.getAnimatedValue();
//设置当前的步数并重新绘制
setProgress(currentStep);
Log.e("onAnimationUpdate: ", String.valueOf(currentStep));
}
});
}
(4)最后在Activity中应用
progressRunView.setMaxStep(5000);
progressRunView.start(0,3650);
简书地址:自定义View-仿QQ运动步数进度效果
android计步器简书,自定义View-仿QQ运动步数进度效果相关推荐
- 自定义View | 仿QQ运动步数进度效果
项目GitHub地址 思路 固定不动的蓝色大圆弧 动画变动的红色小圆弧 中间的步数文字显示 相关的自定义属性 比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
- 自定义View 仿QQ运动步数进度效果
1. 概述 我记得QQ之前是有一个,运动步数的进度效果,今天打开QQ一看发现没有了.具体效果我也不清楚了,我就按照自己大概的印象写一下,这一期我们主要是熟悉Paint画笔的使用: 2. 效果 ...
- 自定义View之仿QQ运动步数进度效果
前言 今天接着上一篇来写关于自定义View方面的东西,我是近期在学习整理这方面的知识点,所以把相关的笔记都放到这个Android自定义View的专栏里了,方便自己下次忘记的时候能回来翻翻,今天的内容是 ...
- Android自定义View之仿QQ运动步数进度效果
文章目录 前言 先看效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6e4ddec17933496ea4830fa08d8ffbe5.png?x-oss-pr ...
- android 自定义view实现仿QQ运动步数进度效果
最近公司在策划一个新的项目,原型还没出来,再说这公司人都要走没了,估计又要找工作了,所以必须要学习,争取每个写个关于自定义view方面的,这样几个月积累下来,也能学习到东西,今天就带来简单的效果,就是 ...
- android自定义计步器形状,Android自定义View仿QQ运动步数效果
本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: 自定义View代码如下: /** * Created by Mic ...
- 自定义View学习之仿QQ运动步数进度效果
自定义View学习的小记录之第一篇 自定义View学习之QQ计步器 如何实现 1.分析想要得到什么效果 2.确定自定义属性,编写attrs.xml 3.在布局中使用 4.在自定义View中获取自定义属 ...
- 自定义View - 仿QQ运动步数效果
今天我们实现下面这样的效果: 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resourc ...
- 3.Android 仿QQ运动步数进度效果 keep运动效果(从入门到巅峰)
1.自定义控件的步骤 2.构造函数有什么用 3.自定义属性有什么用 4.初始化一些画笔放在哪里 5.onmesure()如何写 6.invalide源码分析 1.写一个类继承view或者其他控件 pu ...
最新文章
- word自动消除html标签,清理Word生成HTML的冗余;清理与清除HTML标签
- 【多线程】ThreadPoolExecutor 类的使用详解
- python下拉菜单_自定义Django Form中choicefield下拉菜单选取数据库内容实例
- 解决ng界面长表达式(ui-set)
- 排球计分程序重构(四)
- php xdebug 教程视频_PHP Xdebug 是什么?
- 真的能去太空旅游了!单人票价......打扰了!
- python载入图像
- ASP.NET防止网页后退(禁止缓存)
- 机器学习(周志华) 第八章集成学习
- MySQL字符串拼接(函数)
- 蓝桥杯 基础练习 杨辉三角形 JAVA
- Axure 9.0.0.3704 授权码
- 图片怎么转化word文档?分享一个实用的方法。
- IT大败局----第十章 企业公关的真谛
- flex-shrink如何如何分配容器收缩空间
- 计算机的集成显卡是什么意思,IGD、PEG、PCI的含义,我的电脑是集成显卡该选哪一项...
- php单例模式(Singleton)
- 最优化算法学习笔记+个人总结(一)
- pycharm配置python2.7.6环境_pycharm如何配置python环境
热门文章
- 20180626 STM32 ---利用KILE5 仿真IO口的波形图
- python纳甲装卦
- python爬虫实现批量下载百度图片
- vivoX30是android5的吗,深度剖析揭秘opporeno5质量和vivox30区别是?选哪个更好?独家揭秘报道...
- 机器学习——决策树+随机森林
- Web前端105天-day13-BOOT
- 使用tesserocr二值化识别知网登录验证码
- 再说“恢复被删除的文件”(转)
- hol中心化服务器,存储在传统的中心化服务器
- 新手指南:到国外域名注册商注册域名