Android自定义View——仿ViVO X6 极速闪充动画效果
一直都在看自定义View,经过一个星期的坚持,基本上能够写出一些比较实用的控件效果了,今天天气太热,就待在家里玩手机,然后手机没电了,在充电的时候,看到了手机的充电动画,觉得挺酷,然后自己我就仔细的分析了一下这里的动画内容,就觉得,这个我也能写出来,所以就有了这篇博客。纯属原创。
先看看效果,因为图片的原因,只能看到静态的。
这个就是效果图了。当然了,这么看好像不怎么样,但是配上了动画,还是挺好看的。
自定义控件的话,其实做的多了,运用的多了,就会觉得自定义View,跟在Photo shop 里面画图一样,我们通过建立图层,然后再图层里面绘制自己想要的效果。
这里其实也是一样的,运用到了我前面讲的一些知识,比如这篇:
Android自定义View——弧线展示图,原理上大体相当,结合这次的效果,我们看看,这里面是有四个弧形,两个圆,还有一个类似于时钟刻度的效果。所以知道这些的话,这就比较容易实现了。
首先,新建一个类,取名为VIVOPhone,然后继承自View,重载三个构造函数,然后进入主题。
同样的,我们先看看运用到了哪些变量
// 定义五个画笔private Paint mSmileRing, mBigRing, mInCrilePaint, mInLine, mTextPaint;// 控件的高宽private float mWidth, mHeight;// 矩形的空间private RectF mRectF;// 四个弧线的开始角度private float startAngle = 270, startAngle2 = 270, startAngle3 = 270,startAngle4 = 270, sweepAngle = 90;// 文字private String text = "70%";// 文字的大小private float tvSize = 80;// 刻度的进度private float progress;
然后我们开始初始化数据。
private void initView() {mSmileRing = new Paint();mSmileRing.setAntiAlias(true);mSmileRing.setStrokeWidth(5);mSmileRing.setStyle(Style.STROKE);mSmileRing.setColor(Color.parseColor("#12ADFF"));mBigRing = new Paint();mBigRing.setAntiAlias(true);mBigRing.setStrokeWidth(20);mBigRing.setStyle(Style.STROKE);mBigRing.setColor(Color.parseColor("#12ADFF"));mInCrilePaint = new Paint();mInCrilePaint.setAntiAlias(true);mInCrilePaint.setStrokeWidth((float) 0.5);mInCrilePaint.setStyle(Style.STROKE);mInCrilePaint.setColor(Color.parseColor("#eeeeee"));mInLine = new Paint();mInLine.setAntiAlias(true);mInLine.setStrokeWidth(3);mInLine.setColor(Color.parseColor("#00ff00"));mTextPaint = new Paint();mTextPaint.setAntiAlias(true);mTextPaint.setStrokeWidth(3);mTextPaint.setTextSize(tvSize);mTextPaint.setColor(Color.parseColor("#ffffff"));}
这里主要是对画笔进行初始化,包括设置大小、宽度、样式、颜色等等。这个方法,最后还是要在构造函数里面调用。
画笔初始化好了,接下来就看看怎么给变量赋值;
一样的,我们还是在onSizeChange()方法里面写赋值的操作。代码如下:
@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mWidth = w;mHeight = h;}
这里很简单,就是给高跟宽赋值。
好了,最后看看onDraw方法是怎么写的。
@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvasOutArc1(canvas, mRectF);canvasOutArc2(canvas, mRectF);canvasOutArc3(canvas, mRectF);canvasOutArc4(canvas, mRectF);drawCircle(canvas);drawCircleIn(canvas);canvasDrawText(canvas);}
没错,我这里把每一个的绘制都抽成了方法,这样是为了更好的管理和阅读。看到一个:
/*** 绘制最外面的弧线* * @param canvas*/private void canvasOutArc1(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.1), (float) (mWidth * 0.1),(float) (mWidth * 0.9), (float) (mWidth * 0.9));canvas.drawArc(mRectF, startAngle, sweepAngle + 90, false, mSmileRing);}
这个是最外层的圆,接下来就是第二个,第三个,第四个,我全部列出来。
/*** 绘制外层的第二个* * @param canvas* @param mRectF*/private void canvasOutArc2(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.14), (float) (mWidth * 0.14),(float) (mWidth * 0.85), (float) (mWidth * 0.85));canvas.drawArc(mRectF, startAngle2, sweepAngle + 30, false, mBigRing);}
第三个:
/*** 绘制里面第二个小的* * @param canvas*/private void canvasOutArc3(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.22), (float) (mWidth * 0.22),(float) (mWidth * 0.795), (float) (mWidth * 0.795));canvas.drawArc(mRectF, startAngle3, sweepAngle, false, mSmileRing);}
第四个:
/*** 绘制里面第二个小的* * @param canvas*/private void canvasOutArc4(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.255), (float) (mWidth * 0.255),(float) (mWidth * 0.75), (float) (mWidth * 0.75));canvas.drawArc(mRectF, startAngle4, sweepAngle, false, mBigRing);}
然后就是两个圆了:
第一个圆,这里面还包含了锯齿:
// 绘制内切圆和锯齿private void drawCircle(Canvas canvas) {float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.17));float yuanX = (float) (mHeight / 2);float yuanY = (float) (mWidth / 2);canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);canvas.save();float nowWidth = (float) (getMeasuredWidth());float nowHeight = getMeasuredHeight();for (int i = 0; i < 72; i++) {// canvas.drawLine(nowWidth / 2, nowHeight / 2 - nowWidth / 2,// nowWidth / 2, nowHeight / 2 - nowWidth / 2 + 30, mInLine);if (i >= progress) {mInLine.setColor(Color.parseColor("#555555"));} else {mInLine.setColor(Color.parseColor("#00ff00"));}canvas.drawLine(nowWidth / 2,(float) (nowHeight / 2 - nowWidth / 2 + mWidth / 3.7),nowWidth / 2, (float) (nowHeight / 2 - nowWidth / 2+ mWidth * 0.05 + mWidth / 3.7), mInLine);canvas.rotate(5, getWidth() / 2, getHeight() / 2);}}
第二个圆:
// 绘制最里面的圆private void drawCircleIn(Canvas canvas) {float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.22));float yuanX = (float) (mHeight / 2);float yuanY = (float) (mWidth / 2);canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);canvas.save();}
最后暴露给外面一个方法,用于动画效果:
public void setData(int startAngle, float d) {this.startAngle = startAngle;this.startAngle2 = 360 - startAngle;this.startAngle3 = startAngle;this.startAngle4 = 360 - startAngle;progress = d / 4;postInvalidateDelayed(500);}
这里为了效果更明显,我让它五毫秒的速度更新UI,这里就是View的全部内容,下面,我把所有的代码都列出来:
布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg"tools:context=".MainActivity" ><com.example.vivoopen.weight.VivoViewandroid:id="@+id/vivo"android:layout_width="180dip"android:layout_height="180dip"android:layout_centerInParent="true" /></RelativeLayout>
MainActivity.java:
public class MainActivity extends Activity {private VivoView view;private boolean isRun = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);view = (VivoView) findViewById(R.id.vivo);new Thread(new Runnable() {public void run() {synchronized (view) {while (isRun) {Message msg;for (int i = 0; i < n2; i = i + 10) {msg = new Message();msg.obj = i;SystemClock.sleep(100);msg.what = 1;handler.sendMessage(msg);}msg = new Message();msg.what = 2;handler.sendMessage(msg);}}}}).start();}int n2 = 2;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {switch (msg.what) {case 1:int a = (Integer) msg.obj;view.setData(a, a);break;case 2:n2 = 359;break;default:break;}};};}
VivoView.java:
public class VivoView extends View {// 定义五个画笔private Paint mSmileRing, mBigRing, mInCrilePaint, mInLine, mTextPaint;// 控件的高宽private float mWidth, mHeight;// 矩形的空间private RectF mRectF;// 四个弧线的开始角度private float startAngle = 270, startAngle2 = 270, startAngle3 = 270,startAngle4 = 270, sweepAngle = 90;// 文字private String text = "70%";// 文字的大小private float tvSize = 80;// 刻度的进度private float progress;public VivoView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);initView();}public VivoView(Context context, AttributeSet attrs) {super(context, attrs);initView();}public VivoView(Context context) {super(context);initView();}private void initView() {mSmileRing = new Paint();mSmileRing.setAntiAlias(true);mSmileRing.setStrokeWidth(5);mSmileRing.setStyle(Style.STROKE);mSmileRing.setColor(Color.parseColor("#12ADFF"));mBigRing = new Paint();mBigRing.setAntiAlias(true);mBigRing.setStrokeWidth(20);mBigRing.setStyle(Style.STROKE);mBigRing.setColor(Color.parseColor("#12ADFF"));mInCrilePaint = new Paint();mInCrilePaint.setAntiAlias(true);mInCrilePaint.setStrokeWidth((float) 0.5);mInCrilePaint.setStyle(Style.STROKE);mInCrilePaint.setColor(Color.parseColor("#eeeeee"));mInLine = new Paint();mInLine.setAntiAlias(true);mInLine.setStrokeWidth(3);mInLine.setColor(Color.parseColor("#00ff00"));mTextPaint = new Paint();mTextPaint.setAntiAlias(true);mTextPaint.setStrokeWidth(3);mTextPaint.setTextSize(tvSize);mTextPaint.setColor(Color.parseColor("#ffffff"));}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mWidth = w;mHeight = h;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvasOutArc1(canvas, mRectF);canvasOutArc2(canvas, mRectF);canvasOutArc3(canvas, mRectF);canvasOutArc4(canvas, mRectF);drawCircle(canvas);drawCircleIn(canvas);canvasDrawText(canvas);}// 绘制文字private void canvasDrawText(Canvas canvas) {float textSize = mTextPaint.measureText(text);float x = mWidth / 2 - textSize / 2;float y = mHeight / 2 + textSize / 5;canvas.drawText(text, x, y, mTextPaint);}// 绘制最里面的圆// 绘制内切圆和锯齿private void drawCircleIn(Canvas canvas) {float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.22));float yuanX = (float) (mHeight / 2);float yuanY = (float) (mWidth / 2);canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);canvas.save();}// 绘制内切圆和锯齿private void drawCircle(Canvas canvas) {float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.17));float yuanX = (float) (mHeight / 2);float yuanY = (float) (mWidth / 2);canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);canvas.save();float nowWidth = (float) (getMeasuredWidth());float nowHeight = getMeasuredHeight();for (int i = 0; i < 72; i++) {// canvas.drawLine(nowWidth / 2, nowHeight / 2 - nowWidth / 2,// nowWidth / 2, nowHeight / 2 - nowWidth / 2 + 30, mInLine);if (i >= progress) {mInLine.setColor(Color.parseColor("#555555"));} else {mInLine.setColor(Color.parseColor("#00ff00"));}canvas.drawLine(nowWidth / 2,(float) (nowHeight / 2 - nowWidth / 2 + mWidth / 3.7),nowWidth / 2, (float) (nowHeight / 2 - nowWidth / 2+ mWidth * 0.05 + mWidth / 3.7), mInLine);canvas.rotate(5, getWidth() / 2, getHeight() / 2);}}/*** 绘制最外面的弧线* * @param canvas*/private void canvasOutArc1(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.1), (float) (mWidth * 0.1),(float) (mWidth * 0.9), (float) (mWidth * 0.9));canvas.drawArc(mRectF, startAngle, sweepAngle + 90, false, mSmileRing);}/*** 绘制外层的第二个* * @param canvas* @param mRectF*/private void canvasOutArc2(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.14), (float) (mWidth * 0.14),(float) (mWidth * 0.85), (float) (mWidth * 0.85));canvas.drawArc(mRectF, startAngle2, sweepAngle + 30, false, mBigRing);}/*** 绘制里面第二个小的* * @param canvas*/private void canvasOutArc3(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.22), (float) (mWidth * 0.22),(float) (mWidth * 0.795), (float) (mWidth * 0.795));canvas.drawArc(mRectF, startAngle3, sweepAngle, false, mSmileRing);}/*** 绘制里面第二个小的* * @param canvas*/private void canvasOutArc4(Canvas canvas, RectF mRectF) {mRectF = new RectF((float) (mWidth * 0.255), (float) (mWidth * 0.255),(float) (mWidth * 0.75), (float) (mWidth * 0.75));canvas.drawArc(mRectF, startAngle4, sweepAngle, false, mBigRing);}public void setData(int startAngle, float d) {this.startAngle = startAngle;this.startAngle2 = 360 - startAngle;this.startAngle3 = startAngle;this.startAngle4 = 360 - startAngle;progress = d / 4;postInvalidateDelayed(500);}}
好了,所有的代码都列出来了,有什么不懂的可以在下方留言,如果有更好的想法,也可以分享一下哈。最后,祝大家周末愉快!
Android自定义View——仿ViVO X6 极速闪充动画效果相关推荐
- com.android.vovo,Android仿ViVO X6 极速闪充动画效果
一直都在看自定义View,经过一个星期的坚持,基本上能够写出一些比较实用的控件效果了,今天天气太热,就待在家里玩手机,然后手机没电了,在充电的时候,看到了手机的充电动画,觉得挺酷,然后自己我就仔细的分 ...
- Android属性动画与自定义View——实现vivo x6更新系统的动画效果
晚上好,现在是凌晨两点半,然后我还在写代码.电脑里播放着<凌晨两点半>,晚上写代码,脑子更清醒,思路更清晰. 今天聊聊属性动画和自定义View搭配使用,前面都讲到自定义View和属性动画, ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几 ...
- android 高仿 探探卡片滑动,Android自定义View仿探探卡片滑动效果
Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这 ...
- android wear支付宝6,Android自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义 ...
- Android 自定义View(四)实现股票自选列表滑动效果
一.前言 Android 开发过程中自定义 View 真的是无处不在,随随便便一个 UI 效果,都会用到自定义 View.前面三篇文章已经讲过自定义 View 的一些案例效果,相关类和 API,还有事 ...
- Android动画——仿vivo X6闪充动画效果
做程序猿这么久一直没有写博客,是不正常的,故以此为第一篇博客,开始我的博客生涯. 前不久,看到一篇博客,关于X6闪充动画的效果,是一个叫什么"瓶子盖子"写的,暂时就叫这个名字吧,具 ...
- oracle number型步数,Android自定义View仿QQ计步器
自定义计步器 Android自定义View是Android开发中比较重要的一项,也是很多开发者比较怕的一个东西.其实只要认真去学习,自定义View其实没有那么可怕:相反的,我们还能从自定义View中找 ...
最新文章
- 在Ubuntu 16.04.6 LTS上安装python3.7和pip3后出现Command '('lsb_release', '-a')' 出错问题的解决方法
- webpack 配置简单说几句 ?
- 【已解决】linux redhat 6 如何打开防火墙中的某个端口?例如:5900端口
- 中文字符ASCII码和NSString相互转换
- 数组的几种排序算法的实现(1)
- NET问答: 如何避免在 EmptyEnumerable 上执行 Max() 抛出的异常 ?
- 广州.net俱乐部12月份ABP框架活动场地征集、志愿者征集、合作讲师\副讲师征集...
- ajax获取php的数组,使用AJAX请求获取数组并将其传递到php数组中 - javascript
- 计算机弹歌曲做我老婆好不好,做我老婆好不好吉他谱(图片谱,指弹,做我老婆好不好,徐誉滕)_徐誉滕(徐海;徐歆舜)...
- [jQuery] jQuery是如何链式调用的?
- centos安装ipconfig和telnet命令
- Java并发编程之FutureTask源码解析
- BootStrap table 传递搜索参数
- 带父节点的平衡二叉树_平衡二叉树 通俗易懂
- android webview圆角,Android 实现一个通用的圆角布局
- 烂泥:centos6.4服务器添加新硬盘
- Linux下执行程序出现 Text file busy 提示时的处理方式
- 怎样把IPv4转换成IPv6?
- 2019年中总结之说走就走
- 柔性电子 压力传感器 strain-pressure sensor MoS2/graphene
热门文章
- MATLAB 函数的递归调用 例题
- 类文件具有错误的版本 55.0, 应为 52.0
- refind linux内核参数,Mac本Win10系统通过rEFInd启用CPU虚拟化及升级WSL2
- 【Java集合 1】java集合有哪些
- 我的世界手机版javaui材质包_我的世界1.16.200.51手机版下载_我的世界1.16.200.51国际基岩版手机版下载 v1.16.200.51...
- 菜鸟必看:wndows xp进程全解
- android 9.0 GMS 修改google 语音助手需求-- EEA版本需求
- OJ 1177 dfs
- 黑马程序员-----JAVA面向对象(三)
- 高端感的设计logo要点