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. * 邮箱：[e-mail] */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使用情况：

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

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