自定义View实现雷达扫描效果

• 自定义控件View中常用到的几个方法
• onMeasure： 需要测量自身尺寸的时候
• onLayout：布局控件的时候
• onDraw：绘制控件的时候
• 先调用onMeasure来计算
• 在调用onLayout方法来布局
• 再调用onDraw方法来重绘界面
• 还可能回重写onTouchEvent方法，重写dispatTouchEvent

下面是利用onDraw方法实现雷达的扫描效果
先上效果图

下面实现直接自定义View

package com.android.tiancb.radar;

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.os.Handler;
import android.util.AttributeSet;
import android.view.View;


/**
 * Created by tiancb on 16/1/17.
 */
public class RadarView extends View {
    int ADD = 1;//每次旋转变动的角度
    int w,h;//屏幕宽度和高度
    Paint paint;
    Paint mPaint;//画渐变实心圆的画笔
    Matrix mMatrix;
    Shader mShader;
    private float degrees;
    private Handler mHandler = new Handler();
    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            if (degrees > 360){
                degrees = 0;
            }
            degrees += ADD;
            mMatrix.postRotate(degrees,w/2,h/2);
            invalidate();
            mHandler.postDelayed(mRunnable,50);
        }
    };
    public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public RadarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        w = context.getResources().getDisplayMetrics().widthPixels;
        h = context.getResources().getDisplayMetrics().heightPixels;
//        w = getWidth();
//        h = getHeight();
        initPaint();
        mHandler.post(mRunnable);
    }

    public RadarView(Context context) {
        super(context);

    }
    private void  initPaint(){
        paint = new Paint();
        paint.setStrokeWidth(4);//设置画笔的宽度
        paint.setColor(Color.parseColor("#ffffff"));//设置画笔的颜色
        paint.setAntiAlias(true);//设置画笔光滑
        paint.setStyle(Paint.Style.STROKE);//设置画笔画空心圆

        mPaint = new Paint();
        mPaint.setColor(0x88888888);
        mPaint.setAntiAlias(true);
//        mPaint.setStyle(Paint.Style.FILL);
        //使用shader来实现一个渐变的效果
        mShader = new SweepGradient(w/2,h/2,Color.TRANSPARENT,Color.parseColor("#AAAAAAAA"));
        mPaint.setShader(mShader);
        //创建一个Matrix对象实现实心渐变圆的旋转
        mMatrix = new Matrix();

    }
    //重写onDraw方法绘制自身
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        canvas.drawCircle(w/2,h/2,h/8,paint);
//        canvas.drawCircle(w/2,h/2,h/4,paint);
//        canvas.drawCircle(w/2,h/2,3*h/8,paint);
//        canvas.drawCircle(w/2,h/2,h/2,paint);
        //绘制四个圆圈
        for (int i = 0;i < 4;i++){
            canvas.drawCircle(w/2,h/2,(i+1)*h/8,paint);
        }
        canvas.concat(mMatrix);//把Matrix和canvas关联起来
        //绘制一个渐变的实心圆
        canvas.drawCircle(w/2,h/2,h/2,mPaint);
        mMatrix.reset();

    }
}

接下来是布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@android:color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.android.tiancb.radar.RadarView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"
        />
</FrameLayout>

The End！！！