Android自定义View——仿vivo i管家病毒扫描动画效果

最新推荐文章于 2024-08-06 04:01:52 发布

小瓶盖_tl

最新推荐文章于 2024-08-06 04:01:52 发布

阅读量8k

点赞数 11

分类专栏： Android 文章标签： android 动画杀毒软件技术

本文链接：https://blog.csdn.net/qq_25193681/article/details/51891117

版权

Android 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

技术是永无止境的，如果真的爱技术，那就勇敢的坚持下去。我很喜欢这句话，当我在遇到问题的时候、当我觉得代码枯燥的时候，我就会问自己，到底是不是真的热爱技术，这个时候，我心里总是起着波澜，我的答案是肯定的，我深深的爱着这门技术。

今天我们继续聊聊Android的自定义View系列。先看看效果吧：

这里写图片描述

这个是我手机杀毒软件的一个动画效果，类似于雷达搜索，所以用途还是很广泛的，特别是先了解一下这里的具体逻辑和写法，对技术的进步一定很有用。

先简单的分析一下这里的元素，主要有四个圆、一个扇形、还有八条虚线。当知道这些以后，代码就可以开始写了。

先看看这里用到了哪些变量。

    private float mWidth;

    private float mHeight;

    private Paint mPaint, mPaint2, mPaint3, mPaint4, mLinePaint;

    private RectF mRectF;

    private float startAngle = 360;

    private float radius1, radius2, radius3, radius4;
    private Path path;

不是很多，有画笔6个，然后是宽与高，还有就是角度以及四个圆的半径以及一个矩形、当然还有绘制虚线的Path类。接下来是初始化的操作。

    // 初始化画笔操作
    private void initData() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(1);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Style.STROKE);
        mPaint.setColor(Color.parseColor("#ffffff"));

        mPaint2 = new Paint();
        mPaint2.setStrokeWidth(5);
        mPaint2.setColor(Color.parseColor("#00ff00"));

        mPaint3 = new Paint();
        mPaint3.setStrokeWidth(3);
        mPaint3.setAntiAlias(true);
        mPaint3.setStyle(Style.STROKE);
        mPaint3.setColor(Color.parseColor("#ffffff"));

        mPaint4 = new Paint();
        mPaint4.setStrokeWidth(2);
        mPaint4.setAntiAlias(true);
        mPaint4.setStyle(Style.STROKE);
        mPaint4.setColor(Color.parseColor("#ffffff"));

        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setStrokeWidth(1);
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setAntiAlias(true);
        mLinePaint.setColor(Color.parseColor("#ffffff"));

        path = new Path();

    }

这里包括了五个画笔的初始化操作、一个路径的初始化操作。注意每个画笔的具体样式是不一样的，这样方便实现不同的效果。
初始化的操作完了之后，就是给变量赋值了，还是一样的，我们选择在onSizeChange()里面对变量进行赋值。代码如下：


    @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) (mWidth * 0.1),
                (float) (mWidth * 0.9), (float) (mWidth * 0.9));
        // 绘制渐变效果
        LinearGradient gradient = new LinearGradient((float) (mWidth * 0.3),
                (float) (mWidth * 0.9), (float) (mWidth * 0.1),
                (float) (mWidth * 0.5), new int[] {
                        Color.parseColor("#458EFD"), Color.GREEN,
                        Color.parseColor("#458EFD"), Color.WHITE,
                        Color.parseColor("#458EFD") }, null,
                Shader.TileMode.CLAMP);
        mPaint2.setShader(gradient);
        // 四个圆的半径
        radius1 = (float) (mWidth * 0.4);
        radius2 = (float) (mWidth * 0.3);
        radius3 = (float) (mWidth * 0.2);
        radius4 = (float) (mWidth * 0.1);

    }

其实很明显啊，我们在前面讲的几个自定义的View中，几乎所有的变量初值都是在这个方法里面写的，这个方法究竟有什么特点呢？其实这个是系统回调方法，是系统调用的，它的方法名已经告诉我们了，这个方法会在这个view的大小发生改变是被系统调用，我们要记住的就是view大小变化，这个方法就被执行就可以了。最主要的是，它还在onDraw方法之前调用。

还记得之前的效果吗？里面有一个渐变，这个渐变就是代码里LinearGradient 类的操作结果了，具体的用法，我在后面会专门去解释它。

到了这里，基本上所有的准备工作都完成了，接下来进行真真的绘图。
先看看onDraw方法里面做的操作：


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvasArc(canvas);
        canvasArc2(canvas);
        canvasCircle(canvas);
        canvasLine(canvas);

    }

这里有画圆的，有画扇形的，也有画线的，所以可以发现，我们所有看到的效果，都是在onDraw方法里面实现的。我们具体看看每一个方法：

第一个绘制扇形：

    // 绘制旋转的扇形
    private void canvasArc(Canvas canvas) {
        canvas.drawArc(mRectF, startAngle, 60, true, mPaint2);
    }

只有两行代码，也很容易理解，那么第二个扇形也是差不多：

    // 绘制旋转的扇形
    private void canvasArc2(Canvas canvas) {
        canvas.drawArc(mRectF, startAngle, 1, true, mPaint3);
    }

值得注意的是，第二个的扇形的角度是1，为什么是1呢，原来我这里只是想要它旋转角度的效果，并不需要它有多宽，所以在具体实现自定义View的时候，也要学会活学活用。

两个扇形已经画好了，那就看看四个圆怎么画：

    // 绘制四个圆
    private void canvasCircle(Canvas canvas) {
        canvas.drawCircle(mWidth / 2, mHeight / 2, radius1, mPaint3);
        canvas.drawCircle(mWidth / 2, mHeight / 2, radius2, mPaint);
        canvas.drawCircle(mWidth / 2, mHeight / 2, radius3, mPaint);
        canvas.drawCircle(mWidth / 2, mHeight / 2, radius4, mPaint4);
    }

四个圆就是四行代码，怎么样，很简单吧？

注意他们所用的画笔是不太一样的，这里是比较容易忽视的地方。

最后来看看我纠结很久的画虚线的操作，这里真是把我卡了好一会儿，先看看代码：


    // 绘制虚线
    private void canvasLine(Canvas canvas) {
        int lineCount = 8;
        for (int i = 0; i < lineCount; i++) {
            path.moveTo(mWidth / 2, mHeight / 2);
            path.lineTo(radius1, radius4);
            PathEffect effects = new DashPathEffect(new float[] {
                    (float) (mWidth * 0.005), (float) (mWidth * 0.02),
                    (float) (mWidth * 0.005), (float) (mWidth * 0.02) }, 0);
            mLinePaint.setPathEffect(effects);
            canvas.drawPath(path, mLinePaint);
            canvas.rotate(45, mWidth / 2, mHeight / 2);
        }

    }

按理说，绘制虚线，本质也是画线，但是我一开始是用canvas.drawLine方法，但是没有效果，网上查找了资料，才知道可能是版本的问题，于是我换用了path。

到了这个时候，全部效果已经出来了，那么为了让她动起来，我们还是要加点逻辑，我的思路是这样的：

定义一个线程，然后通过改变扇形的开始角度来实现动画的效果。

代码如下：

class MyThread extends Thread {

        @Override
        public void run() {

            while (true) {
                if (running) {
                    SystemClock.sleep(200);
                    handler.sendEmptyMessage(2);
                }
            }

        }
    }

    private boolean running = true;

    public Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            synchronized (this) {
                if (startAngle < 1) {
                    startAngle = 360;
                } else {
                    startAngle--;
                    invalidate();
                }
            }
        };

    };

到了这里，基本可以实现动画效果了，为了让控件更好的被外面所用，我们还像外面暴露了一些方法。

    // 开启动画
    public void setStartAngle() {
        thread = new MyThread();
        thread.start();

    }

    // 重新开启动画
    public void startAnge() {
        running = true;
    }

    // 暂停动画
    public void stopAnge() {
        running = false;
    }

    // 是否在运动
    public boolean isRunning() {
        return running;
    }

最后看看我在MainActivity.java的操作：

/**
 * 小瓶盖 2016年7月12日16:35:26
 * 
 * @author 自定义View——仿Vivo i管家病毒扫描动画效果
 * 
 *         博客地址：http://blog.csdn.net/qq_25193681
 */
public class MainActivity extends ActionBarActivity {
    private VirusKilling mVirusKilling;
    float mVirusKillingValue = 360;
    private TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mVirusKilling = (VirusKilling) findViewById(R.id.Virus_Killing);

        tv = (TextView) findViewById(R.id.tv);
        // 传入TextView，改变下方的文字的时候用到
        mVirusKilling.setTextView(tv);
        // 第一次打开的时候就开始更新动画
        mVirusKilling.setStartAngle();

    }

    /**
     * 点击事件的处理
     * 
     * @param v
     */
    public void onStop(View v) {
        TextView tv = (TextView) v;
        if (mVirusKilling.isRunning()) {
            tv.setText("继续扫描");
            mVirusKilling.stopAnge();
        } else {
            tv.setText("停止扫描");
            mVirusKilling.startAnge();
        }

    }

    @Override
    protected void onPause() {
        mVirusKilling.stopAnge();
        super.onPause();

    };

    @Override
    protected void onStart() {
        mVirusKilling.startAnge();
        super.onStart();

    }
}

还有布局文件：

<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"

    tools:context="com.ltl.vivoviruskilling.MainActivity" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#458EFD"
    android:orientation="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:padding="8dip" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/back"
      />

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true"
         android:text="病毒查杀"
         android:textColor="#ffffff"
         android:textSize="20sp" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentRight="true"
           android:text="设置"
           android:textColor="#ffffff"
           android:textSize="20sp" />



</RelativeLayout>


     <com.ltl.vivoviruskilling.view.VirusKilling
         android:id="@+id/Virus_Killing"
         android:layout_width="200dip"
         android:layout_height="200dip"
         android:layout_gravity="center" />

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical" >

       <TextView
           android:onClick="onStop"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:text="停止扫描"
           android:paddingTop="5dip"
           android:paddingBottom="5dip"
           android:paddingLeft="20dip"
           android:paddingRight="20dip"
           android:background="@drawable/btn_bg"
           android:textColor="#ffffff"
           android:textSize="18sp" />

       <TextView
           android:id="@+id/tv"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="正在扫描：NETWORKSTATE"
           android:layout_margin="20sp"
           android:textColor="@android:color/holo_blue_bright"
           android:textSize="16sp" />

</LinearLayout>



</LinearLayout>


</RelativeLayout>

一个背景效果的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="30dip"/>
    <solid android:color="#00000000"/>

<stroke
    android:width="1dip"
    android:color="#ffffff" />

</shape>