Android 自定义控件之实现雷达扫描效果

效果图：

实现步骤：

// 获取宽高

w = context.getResources().getDisplayMetrics().widthPixels;

h = context.getResources().getDisplayMetrics().heightPixels;    // 初始化画笔

mCirclePaint = new Paint();

mCirclePaint.setColor(Color.WHITE);

mCirclePaint.setStrokeWidth(3);//画的宽度

mCirclePaint.setStyle(Paint.Style.STROKE);

mCirclePaint.setAntiAlias(true);

// 画4个不能半径的圆

canvas.drawCircle(w / 2, h / 2, w / 6, mCirclePaint);

canvas.drawCircle(w / 2, h / 2, w / 3, mCirclePaint);

canvas.drawCircle(w / 2, h / 2, 11 * w / 20, mCirclePaint);

canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mCirclePaint);

// 获取头像图片

mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.p)).getBitmap();

image_half_width = ((w / 6) * 1) / 2;// 图片设置成最小圆的一半,这是图片的半径

// 图片缩放比例

float sx = (float) 2 * image_half_width / mBitmap.getWidth();// 图片显示的宽度/原图宽度

float sy = (float) 2 * image_half_width / mBitmap.getHeight();

// 缩小图片

Matrix matrix = new Matrix();

matrix.setScale(sx, sy);

mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),

mBitmap.getHeight(), matrix, false);// 显示的图片，绘制的左上角坐标（中心点的坐标减去图片的半径），画笔

canvas.drawBitmap(mBitmap, w / 2 - image_half_width, h / 2 - image_half_width, null);// 这里不需要笔，就是一个图

源码下载地址

/**
* 雷达UI
*
* @author admin
*
*/
public class Radar extends View {
private int w, h;// 宽高
private Paint mCirclePaint;// 圆的画笔

Bitmap mBitmap;// 显示在中心的图片
private int image_half_width;// 图片的半径
private Paint mGradientCirclePaint;// 渐变圆的笔

Handler mHandler = new Handler();
Matrix matrix;//矩阵
private float degrees = 0;
private long delayMillis = 20;
//子线程实现旋转效果
private Runnable runnable = new Runnable() {

@Override
public void run() {

//旋转
matrix.postRotate(++degrees, w/2, h/2);
Radar.this.invalidate();
mHandler.postDelayed(runnable, delayMillis);
}
};

public Radar(Context context, AttributeSet attrs) {
super(context, attrs);
// setBackgroundResource(resid);
// 获取宽高
w = context.getResources().getDisplayMetrics().widthPixels;
h = context.getResources().getDisplayMetrics().heightPixels;
matrix = new Matrix();
// 初始化画笔
mCirclePaint = new Paint();
mCirclePaint.setColor(Color.WHITE);
mCirclePaint.setStrokeWidth(3);//画的宽度
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setAntiAlias(true);

// 获取头像图片
mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.p))
.getBitmap();
image_half_width = ((w / 6) * 1) / 2;// 图片设置成最小圆的一半,这是图片的半径

// 图片缩放比例
float sx = (float) 2 * image_half_width / mBitmap.getWidth();// 图片显示的宽度/原图宽度
float sy = (float) 2 * image_half_width / mBitmap.getHeight();
// 缩小图片
Matrix matrix = new Matrix();
matrix.setScale(sx, sy);
mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),
mBitmap.getHeight(), matrix, false);

//着色器
Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT,
Color.parseColor("#AAAAAAAA"));
mGradientCirclePaint = new Paint();
mGradientCirclePaint.setColor(Color.WHITE);
//      mGradientCirclePaint.setStrokeWidth(3);
mGradientCirclePaint.setStyle(Paint.Style.FILL);// 实心
mGradientCirclePaint.setAntiAlias(true);
mGradientCirclePaint.setShader(mShader);
mHandler.post(runnable);
}

// 重写绘制方法
@Override
protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 画4个不能半径的圆
canvas.drawCircle(w / 2, h / 2, w / 6, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, w / 3, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 11 * w / 20, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mCirclePaint);

// 显示的图片，绘制的左上角坐标（中心点的坐标减去图片的半径），画笔
canvas.drawBitmap(mBitmap, w / 2 - image_half_width, h / 2
- image_half_width, null);// 这里不需要笔，就是一个图

// 画渐变 的圆
canvas.concat(matrix);
canvas.drawCircle(w/2, h/2, 7 * h / 16, mGradientCirclePaint);

matrix.reset();
}

//实现点击波浪效果
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);

}
}