android自定义View基础系列一(模仿360手机卫士手机提速动画)

最新推荐文章于 2022-07-14 16:20:03 发布
最新推荐文章于 2022-07-14 16:20:03 发布
阅读量1.3k 收藏
点赞数
分类专栏： android自定义View进阶系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wolf6699/article/details/54375708
版权

前言：

安卓手机用时间长了以后会积累很多的垃圾文件/缓存文件之类的，严重影响手机运行的性能，常备一款手机管理工具是关键，我一直用360手机卫士，觉得那个加速球效果不错，今天就来模仿实现一下简单的效果，先上两张效果图：



























概要：

本文主要是实现中间那个圆圈 的动画效果，都是很简单基础的效果，看了不少wing大神和hy大神的博客，我觉得不管多复杂的动画效果，拿到手首先要学会拆分。这里我们可以拆分成主要四块来实现，

1,一个颜色为半透明的圆，不需要动;

2,一个颜色为蓝色的弧，半径以及圆点和第一个圆同样，会根据比例改变弧度的绘制;

3,圆内部展示百分比的文字以及百分号;

4,圆内部提示性的文字。

拆分好了以后，我们实现起来就相对简单多了，先实现静态效果，再实现动态效果。



正文：

1，绘制view的基础准备工作：

创建自定义VIew并添加到布局中、自定义属性、在自定义View中获取属性值，这一部分就不做过多说明了，直接上代码。（这里圆的半径我们按照View的宽度取值，所以就不定义属性了）

属性attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ClearViewAttrs">
        <!--底部圆的边线颜色-->
        <attr name="circleColor" format="color"></attr>
        <!--圆弧的颜色-->
        <attr name="arcColor" format="color"></attr>
        <!--提示性文字和百分比颜色-->
        <attr name="textColor" format="color"></attr>
        <!--百分比字体大小-->
        <attr name="percentTextSize" format="dimension"></attr>
        <!--%字体大小-->
        <attr name="markTextSize" format="dimension"></attr>
        <!--提示性文字字体大小-->
        <attr name="pointTextSize" format="dimension"></attr>
    </declare-styleable>
</resources>

做好动画分解，属性的分析很重要，多练练就明白了。

在布局文件中给属性赋值：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/demo.bys.com.clearviewdemo"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="demo.bys.com.clearviewdemo.MainActivity">

    <demo.bys.com.clearviewdemo.ClearView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        custom:circleColor="#cccccc"
        custom:arcColor="#5CACEE"
        custom:textColor="#5CACEE"
        custom:percentTextSize="40sp"
        custom:pointTextSize="14sp"
        custom:markTextSize="20sp"
        />


</RelativeLayout>

在自定义VIew中获取对应的属性值： 

//圆的半径
    private int mRadius;
    //底部圆的边线颜色
    private int circleColor;
    //圆弧的颜色
    private int arcColor;
    //提示性文字和百分比颜色
    private int textColor;
    //百分比字体大小
    private int percentTextSize;
    //字体大小
    private int markTextSize;
    //提示性文字字体大小
    private int pointTextSize;

public ClearView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.ClearViewAttrs,defStyleAttr,0);
        circleColor = ta.getColor(R.styleable.ClearViewAttrs_circleColor, Color.GRAY);
        arcColor = ta.getColor(R.styleable.ClearViewAttrs_arcColor,Color.BLUE);
        textColor = ta.getColor(R.styleable.ClearViewAttrs_textColor,Color.BLUE);
        percentTextSize = ta.getDimensionPixelSize(R.styleable.ClearViewAttrs_percentTextSize,20);
        markTextSize = ta.getDimensionPixelSize(R.styleable.ClearViewAttrs_markTextSize,10);
        pointTextSize = ta.getDimensionPixelSize(R.styleable.ClearViewAttrs_pointTextSize,15);
        ta.recycle();

    }

2，测量View的宽高

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        if(widthMode == MeasureSpec.EXACTLY){
            mWidth = widthSize;
        }else{
            mWidth = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,200,getResources().getDisplayMetrics());
        }

        if(heightMode == MeasureSpec.EXACTLY){
            mHeight = heightSize;
        }else{
            mHeight = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,200,getResources().getDisplayMetrics());
        }

        //拿到半径的值，因为setStrokeWidth会有个边线的宽度，所以要减去宽度的一半
        mRadius = mWidth/2-10;
        setMeasuredDimension(mWidth,mHeight);

    }

3，开始作手绘制我们的动画

这里我们分成两大步来实现：静态效果、实现动态效果。

a）静态效果绘制：

首先设置好画笔的颜色等属性，绘制底部的圆：

//绘制底部的圆
        mPaint.setColor(circleColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20);
        mPaint.setAntiAlias(true);

        canvas.drawCircle(mWidth/2,mHeight/2,mRadius,mPaint);
效果如图：

绘制圆弧，圆心和半径和圆相同，首先要对弧度所在区域设置一个矩形：

private RectF mRectF;
//设置矩形区域
        mRectF.left = mWidth/2 - mRadius;
        mRectF.top = mHeight/2 - mRadius;
        mRectF.right = mWidth/2 + mRadius;
        mRectF.bottom = mHeight/2 + mRadius;
提醒一句，不要在onDraw方法中实例化对象。

3点钟方向是弧的0度，按顺时针方向增大，我们把12点钟方向（也就是-90度）作为起点，这里我们首先绘制一个静态的弧：

//绘制圆弧
        mPaint.setColor(arcColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20);
        mPaint.setAntiAlias(true);

        canvas.drawArc(mRectF,-90,270,false,mPaint);
从-90度开始，绘制弧长270度，第四个参数设置成false，如果是true的话，会和圆心有连线。

这里我们看到效果：

下面开始绘制百分比、百分号和提示文字，从图中我们可以看出百分比文字是显示在圆的正中间的，百分号在百分数值的右下角，提示文字显示在百分比文字下面空处的中间部分。我们先绘制中间部分的百分比文字：

//百分比
    private String percentText = "75";
//绘制百分比文字
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(percentTextSize);
        mPaint.getTextBounds(percentText,0,percentText.length(),mRect);

        canvas.drawText(percentText,mWidth/2-mRect.width()/2,mHeight/2+mRect.height()/2,mPaint);
这里设置好画笔的颜色、字体大小后，我们需要获取文字所在的矩形区域Rect的宽高，通过mPaint.getTextBounds方法获取，然后我们设置x方向的起点在文字矩形的最左侧，y方向的起点在文字矩形的底侧。

百分号所在矩形区域的底侧是和百分数值的底侧齐平的，百分号矩形的左侧是百分数值的右侧偏移一点，我们设置好画笔，开始绘制：

//绘制百分号
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(markTextSize);

        canvas.drawText("%",mWidth/2+mRect.width()/2+5,mHeight/2+mRect.height()/2,mPaint);
这个一定要在百分数值后面绘制，因为要使用到百分数值所在矩形区域的宽高。

最后来绘制提示文字，百分数值下放的空区域为绘制空间，绘制在中间位置，也要使用到上面百分数值所在矩形区域的宽高值。创建一个提示文字的矩形区域Rect对象：

private Rect pointRect;
设置画笔，获取矩形区域宽高： 
//提示文字
    private String pointText = "点我加速";

//绘制提示文字
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(pointTextSize);
        mPaint.getTextBounds(pointText,0,pointText.length(),pointRect);
绘制提示文字： 
canvas.drawText(pointText,mWidth/2-pointRect.width()/2,((mRadius+mHeight/2)-(mHeight/2+mRect.height()/2))/2+mHeight/2+mRect.height()/2+pointRect.height()/2,mPaint);
这个参数有点长，没高兴拆分，主要是第三个参数，求出百分数值下方空区域的中心点在Y方向的值，再加上提示文字矩形区域高度的一半就可以了，运行效果：


到这里，我们静态的效果就已经完成了。

b）实现动画效果：

这里我们的动画效果是：1,点击View后，提示文字变成“正在加载”，弧度逐渐减少到-90度，百分值同时逐渐减到0；2,弧度逐渐增加，百分值也同时增加。

定义一个弧度百分比的变量，一个记录上一次弧度百分比的变量，一个记录点击后应该到达的百分比：

//弧度百分比
    private int ArcPercent = 0;

    //上一次弧度百分比
    private int lastPercent = 0;

    //当前获取到的百分比
    private int currentPercent = 0;

百分比数值获取值：

percentText = ArcPercent + "";
原来写死的270度弧度绘制，改成动态获取： 
360*ArcPercent/100

一个判断是否执行动画的boolean：

//true是执行动画，false是静态
    private boolean isMoving = false;

一个判断是加还是减的boolean：

//false是递减到0,true是递增
    private boolean direction = false;

给View添加点击事件：

implements View.OnClickListener
setOnClickListener(this);
@Override
    public void onClick(View view) {
        isMoving = true;
        pointText = "正在加速";
        invalidate();
    }
最后贴上onDraw里面的代码： 
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if(isMoving){
            if(!direction){
                if(ArcPercent > 0){
                    ArcPercent--;
                }else{
                    direction = true;
                }
            }else{
                pointText = "";
                currentPercent = random.nextInt(80);
                if(ArcPercent < currentPercent){
                    ArcPercent++;
                }else{
                    direction = false;
                    isMoving = false;
                    pointText="点击加载";
                }
            }
            percentText = ArcPercent + "";
            moveingView(canvas);
            postInvalidateDelayed(10);
        }else{
            percentText = ArcPercent + "";

            //绘制底部的圆
            mPaint.setColor(circleColor);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(20);
            mPaint.setAntiAlias(true);
            canvas.drawCircle(mWidth/2,mHeight/2,mRadius,mPaint);


            //绘制圆弧
            //计算弧度值
            mPaint.setColor(arcColor);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(20);
            mPaint.setAntiAlias(true);
            //设置矩形区域
            mRectF.left = mWidth/2 - mRadius;
            mRectF.top = mHeight/2 - mRadius;
            mRectF.right = mWidth/2 + mRadius;
            mRectF.bottom = mHeight/2 + mRadius;
            canvas.drawArc(mRectF,-90,360*ArcPercent/100,false,mPaint);

            //绘制百分比文字
            mPaint.setColor(textColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setStrokeWidth(3);
            mPaint.setTextSize(percentTextSize);
            mPaint.getTextBounds(percentText,0,percentText.length(),mRect);
            canvas.drawText(percentText,mWidth/2-mRect.width()/2,mHeight/2+mRect.height()/2,mPaint);

            //绘制百分号
            mPaint.setColor(textColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setStrokeWidth(3);
            mPaint.setTextSize(markTextSize);
            canvas.drawText("%",mWidth/2+mRect.width()/2+5,mHeight/2+mRect.height()/2,mPaint);


            //绘制提示文字
            mPaint.setColor(textColor);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setStrokeWidth(3);
            mPaint.setTextSize(pointTextSize);
            mPaint.getTextBounds(pointText,0,pointText.length(),pointRect);
            canvas.drawText(pointText,mWidth/2-pointRect.width()/2,((mRadius+mHeight/2)-(mHeight/2+mRect.height()/2))/2+mHeight/2+mRect.height()/2+pointRect.height()/2,mPaint);
        }

    }

    /**
     * 动态效果绘制
     * @param canvas
     */
    private void moveingView(Canvas canvas){
        //绘制底部的圆
        mPaint.setColor(circleColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20);
        mPaint.setAntiAlias(true);
        canvas.drawCircle(mWidth/2,mHeight/2,mRadius,mPaint);


        //绘制圆弧
        mPaint.setColor(arcColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20);
        mPaint.setAntiAlias(true);
        //设置矩形区域
        mRectF.left = mWidth/2 - mRadius;
        mRectF.top = mHeight/2 - mRadius;
        mRectF.right = mWidth/2 + mRadius;
        mRectF.bottom = mHeight/2 + mRadius;
        canvas.drawArc(mRectF,-90,360*ArcPercent/100,false,mPaint);

        //绘制百分比文字
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(percentTextSize);
        mPaint.getTextBounds(percentText,0,percentText.length(),mRect);
        canvas.drawText(percentText,mWidth/2-mRect.width()/2,mHeight/2+mRect.height()/2,mPaint);

        //绘制百分号
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(markTextSize);
        canvas.drawText("%",mWidth/2+mRect.width()/2+5,mHeight/2+mRect.height()/2,mPaint);


        //绘制提示文字
        mPaint.setColor(textColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(3);
        mPaint.setTextSize(pointTextSize);
        mPaint.getTextBounds(pointText,0,pointText.length(),pointRect);
        canvas.drawText(pointText,mWidth/2-pointRect.width()/2,((mRadius+mHeight/2)-(mHeight/2+mRect.height()/2))/2+mHeight/2+mRect.height()/2+pointRect.height()/2,mPaint);
    }

这里没什么太多东西，就是几个判断的嵌套，以及View绘制的开始，循环绘制，和结束绘制。我这里最后百分比直接取的随机数，自己获取就可以了。没有动态效果图，只能贴几个过程图了：




源码地址：http://download.csdn.net/detail/liujibin1836591303/9735822

修行与蜕变
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 简易的自定义动画框架（3）高仿腾讯手机管家火箭动画
01-04
请看博客文章： 【Android进阶】如何写一个很屌的动画（3）---高仿腾讯手机管家火箭动画，http://blog.csdn.net/scnuxisan225/article/details/50454948
仿360手机卫士的自定义波浪球形进度View
05-21
这是一个用图片方法开发的仿360手机卫士的波浪球形进度条View的源码，实现比较方便，简单，通俗易懂，有兴趣的可以下载哈
Android使用自定义View实现360手机卫士波浪球进度的效果
01-04
像360卫士的波浪球进度的效果，一般最常用的方法就是画线的方式，先绘sin线或贝塞尔曲线，然后从左到右绘制竖线，然后再裁剪圆区域。 今天我这用图片bitmap的方式,大概的方法原理是： （1）首先用clipPath裁剪园区域， （2）然后用4张图来不断绘制到画布上，再用偏移量来控制移动的速度，从而形成波浪动态效果。 （3）有一点需要注意的是，裁剪圆的时候用到的clipPath这个方法，在android 4.1，和4.2等某些系统上，裁剪出来不是圆，而是矩形，针对这些系统 需要在manifest.xml文件的activity中 将硬件加速关掉，因为默认是开启的。即添加这个：androi
css3 transform 14种侧边栏导航的隐藏和显示动画效果
12-13
利用css3 transform属性制作的14种不同效果的侧边栏导航的隐藏和显示动画效果。该侧边栏导航可用于移动设备等小屏幕设备，效果极赞。
Android桌面悬浮窗进阶，QQ手机管家小火箭效果实现
weixin_34007906的博客
07-11 144
相信用过QQ手机管家的朋友们都会知道它有一个小火箭加速的功能，将小火箭拖动到火箭发射台上发射就会出现一个火箭升空的动画，那么今天我们就来模仿着实现一下这个效果吧。这次我们将代码的重点放在火箭升空的效果上，因此简单起见，就直接在模仿360手机卫士悬浮窗的那份代码的基础上继续开发了，如果你还没有看过那篇文章的话，建议先去阅读Android桌面悬浮窗效果实现，仿360手机卫士悬浮...
Android动画——仿vivo指纹动画效果
土蛙的博客
04-26 3548
上学的时候，老师曾教导了我一句话，挺深刻的：不积跬步，无以至千里。。。
Android S 指纹解锁后的水波纹动画
杨的博客
07-14 830
指纹解锁后的蓝色水波纹动画 AuthRippleView.kt
Android 指纹扫描动画实现，仿新版360手机助手欢迎页
EdisonChang的博客
11-18 4470
仿新版360手机助手欢迎页，介绍Android 指纹扫描动画的实现方法和细节，并对android动画开发做了简单叙述
仿360雷达扫描动画
04-17
这是CSDN上的一个动画大全里的一部分，本人把它理出来做成一个控件
安卓BadgeView气泡飞出进入动画，跟随手指移动
11-17
安卓BadgeView气泡飞出进入动画，跟随手指移动.松开手后自动飞出屏幕。BadgeView可自定义。动画可以自定义。BadgeView
Android指纹识别框架分析及速度优化
10-14
指纹识别技术概述 指纹识别技术原理介绍 指纹识别特点及应用 手机指纹识别设计实现方案分类及其原理分析 指纹识别android 框架分析 android 框架 TEE 介绍 常见问题FAQ
指纹识别的动画
03-23
手机中的指纹识别动画，可以直接实用在项目中
android仿360加速球实现内存释放
09-01
本篇文章实现了Android仿360加速球实现内存释放，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android自定义View实现打钩动画功能
08-28
本篇文章通过实例给大家分享了Android自定义View实现打钩动画功能的过程和代码分享，有兴趣需要的学习下吧。
纯css3发光弹射动画
ICode联盟
05-17 204
下载地址纯css3代码实现的发光弹射动画特效。 dd:
android实现火箭动画清理内存
04-14
android实现火箭动画清理内存 文章中主要用到两个类：Animation和ActivityManager
Android 自定义View
最新发布
05-19
Android 自定义 View 是一种在 Android 应用程序中创建自定义用户界面元素的方式。它允许你创建独特的 UI 元素，以便更好地满足应用程序的需求。自定义 View 在 Android 应用程序中可以用于很多方面，如绘制图形、处理触摸事件、创建动画等。 在 Android 中，自定义 View 可以通过以下方式实现: 1. 继承 View 类并在 onDraw() 方法中绘制所需的内容。 2. 继承 ViewGroup 类并在 onLayout() 方法中放置子视图。 3. 继承已有的 View 或 ViewGroup 类并添加自己的功能。 自定义 View 的实现需要考虑到以下几个方面： 1. 测量（Measure）：在 onMeasure() 方法中测量 View 的大小。 2. 布局（Layout）：在 onLayout() 方法中放置 View 的位置。 3. 绘制（Draw）：在 onDraw() 方法中绘制 View 的内容。 4. 触摸事件（Touch Event）：在 onTouchEvent() 方法中处理用户的触摸事件。 5. 动画（Animation）：使用动画 API 创建动画效果。 如果你想学习更多关于 Android 自定义 View 的知识，可以查看 Android 官方文档或者相关的在线课程和教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值