Android自定义控件入门实践之雷达扫描控件

以前因为工作的关系，对于自定义控件用的少之又少，无非就是把几个控件放置到ViewGroup内部，然后提供开放方法，就成了一个所谓的自定义控件，但是这种小伎俩太简单，面试的时候这点东西根本Hold不住场，所以工作之余还是得把这块补补，也好加深一下对控件的理解。

好，啰嗦了挺多的，我们先看一下实现的效果：

只是截取了一部分运行时图，这个控件只是重写了onDraw方法，其它一一保留给View，简单说一下这个的实现方式：

使用一只画笔用来画等距的四个圆，使用另外一只画笔画一个标准的角度渐变图。

Android提供了标准的渐变图，同样在PhotoShop中我们一样可以找到这些渐变图，这样一来，我们就可以根据UI设计师设计的套路来做同样的效果了：

线性渐变图

径向渐变图

菱形渐变图

角度渐变图

对称渐变图

好了，我们将这些基本的图绘制出来之后，它还是个静态的，我们需要将它动起来，那怎么使它动起来呢，对，我们需要线程来驱动它进行重绘，需要注意的是，线程一定要出口。

开启线程有两种方式，一种是传统的开线程的方式，使用Thread。另一种则使用向主线程消息队列中发送消息来驱动。我们使用第二种:hander.postRunnable。

来贴一下整体的代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;


/**
 * 雷达显示控件
 * Created by Sahadev on 2015/12/29.
 * 邮箱：[email protected]
 */
public class RadarView extends View implements Runnable {
    private boolean threadFlag = true;
    private int rotate = 0;
    //用于画圆的画笔
    private Paint circlePaint;
    //用于画扫描图像
    private Paint shaderPaint;
    //获得用于画圆的坐标位置以及半径
    int x, y;
    //设置扫描图像的坐标矩阵
    Matrix matrix = new Matrix();
    //用于绘制扫描图像
    Shader mShader;

    public RadarView(Context context) {
        this(context, null);
    }

    public RadarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

        //为了避免在onDraw中重复创建对象，所以将一些初始化工作放入构造方法中来做

        circlePaint = new Paint();
        circlePaint.setColor(Color.WHITE);
        //设置画笔的宽度
        circlePaint.setStrokeWidth(1);
        //设置抗锯齿模式
        circlePaint.setAntiAlias(true);
        circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        //设置画笔风格
        circlePaint.setStyle(Paint.Style.STROKE);

        shaderPaint = new Paint();
        shaderPaint.setAntiAlias(true);
        shaderPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
        //设置画笔风格为填充模式
        shaderPaint.setStyle(Paint.Style.FILL);

        postDelayed(this, 100);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //计算圆的坐标值及半径
        y = getMeasuredHeight() / 2;
        x = getMeasuredWidth() / 2;

        //为矩阵设置旋转坐标
        matrix.setRotate(rotate, x, y);

        //为了避免重复创建对象，则使用这种方式
        if (mShader == null)
            mShader = new SweepGradient(x, y, Color.TRANSPARENT, Color.BLUE);

        mShader.setLocalMatrix(matrix);
        shaderPaint.setShader(mShader);

        //画一个扫描图像
        canvas.drawCircle(x, y, x, shaderPaint);

        //画四个等距圆
        canvas.drawCircle(x, y, x, circlePaint);
        canvas.drawCircle(x, y, x / 2, circlePaint);
        canvas.drawCircle(x, y, x / 4 * 3, circlePaint);
        canvas.drawCircle(x, y, x / 4, circlePaint);
    }

    @Override
    public void run() {
        if (threadFlag) {
            rotate++;
            postInvalidate();
            //如果到了360度，则重新开始
            rotate = rotate == 360 ? 0 : rotate;
            //一秒延迟这个任务
            postDelayed(this, 1);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //停止循环
        threadFlag = false;
    }

}

好，这样运行起来就是我们图例所显示的样子，最后看一下内存使用以及CPU使用情况：

都不是很多，这只是最基本的，我们还可以将它进一步的优化。

有什么疑问欢迎留言讨论。