自定义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！！！