Android 雷达扫描效果

    第一个实例 RadarView 用到了自定义属性，然后在构造方法里面读取相关属性值，用来确定绘制的参数
。RadarView 还提供了开始、停止扫描和释放资源的接口，具体实现看源码吧 。要注意的是 onDraw() 是频繁调用的方法，而且绘制过程比较耗时，所以尽量不要在这个方法里做初始化资源的操作，以确保自定义 View 的流畅体验 。同时，在 Activity 被销毁的时候，要停止 RadarView 里边的定时刷新线程，这一点不要漏掉了 。RadarView 源码

/**
* Created by StormShadow on 2015/9/24:20:23.
* Knowledge is power.
*/
public class RadarView extends View {
private static final String LOG_TAG = RadarView.class.getName();
private boolean mIsShowText = true;
// private int mScreenWidth = 0;
private float mRectWidth = 0;
private float mRectHeight = 0;
private float mPadding = 0;
private float mCurAngle = 0; // 扇形当前的偏转角
private Boolean mScanFlag = true;
private Boolean mIsActivityDestoryed = false;
private Bitmap mBgBitmap;
private Rect mSrcRect;
private RectF mDesRectF;
private Paint mBgPaint;
private Paint mSectorPaint; // 画扇形的画笔
float mBigCircleRadius; // 大圆半径
float mCircleX; // 圆心 X 坐标
float mCircleY; // 圆心 Y 坐标
public RadarView(Context context) {
this(context, null);
}
public RadarView(Context context, AttributeSet attrs){
super(context, attrs);
TypedArray array = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.RadarView,
0, 0);
try {
mIsShowText = array.getBoolean(R.styleable.RadarView_isShowText, true); // 是否显示文字信息
mPadding = array.getDimension(R.styleable.RadarView_labelPadding, 20.0f); // 边距
mRectWidth = array.getDimension(R.styleable.RadarView_labelWidth, 720.0f); // 背景矩形宽度
// mRectHeight = array.getDimension(R.styleable.RadarView_labelHeight, 0.0f); // 为了防止变形，这里强制使高宽相等
mRectHeight = mRectWidth;
} finally {
array.recycle();
}
setBackgroundColor(0xff2a73b1);
init();
}
private void init() {
// mHandler = new Handler();
mBgPaint = new Paint();
mBgBitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.mipmap.act_radar_bg);
mBigCircleRadius = (mRectWidth - mPadding * 2) / 2; // 大圆半径
mCircleX = mRectWidth / 2; // 圆心 X 坐标
mCircleY = mRectHeight / 2; // 圆心 Y 坐标
mSrcRect = new Rect(
0,
0,
mBgBitmap.getWidth(),
mBgBitmap.getHeight()
);
mDesRectF = new RectF(
mCircleX - mBigCircleRadius,
mCircleY - mBigCircleRadius,
mCircleX + mBigCircleRadius,
mCircleY + mBigCircleRadius
);
mSectorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mSectorPaint.setStyle(Paint.Style.FILL);
mSectorPaint.setColor(0x7f99cc99); // 半透明，所以设置为7f 99cc99
Shader mShader = new LinearGradient(0, 0, 100, 100,
new int[] { Color.GREEN, Color.GREEN },
null,
Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。
mSectorPaint.setShader(mShader);
ScanThread scanThread = new ScanThread();
scanThread.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(mBgBitmap, mSrcRect, mDesRectF, mBgPaint);
canvas.drawArc(mDesRectF, mCurAngle, 45, true, mSectorPaint);
}
public void startScanning() {
if(!mScanFlag) {
mScanFlag = true;
}
}
public void stopScanning() {
if(mScanFlag) {
Thread.interrupted();
mScanFlag = false;
}
}
protected class ScanThread extends Thread {
@Override
public void run() {
while(!mIsActivityDestoryed) {
if (mScanFlag) {
try {
Thread.sleep(10);
mCurAngle = (mCurAngle + 1) % 360;
postInvalidate();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
}
public void setIsShowText(boolean showText) {
mIsShowText = showText;
invalidate();
}
public Boolean getIsShowText() {
return mIsShowText;
}
public Boolean isScanning() {
return mScanFlag;
}
public void realseResource() {
Thread.interrupted();
mIsActivityDestoryed = true;
}
}
有图有真相



    第二个实例没有自定义属性，而且扫描扇形的旋转操作借助了 Matrix，要注意的是这个实例并没有处理好所有细节 。所以如果要使用它，请参照上面的例子来进行调整 。
这个例子非常简单，只有一个 View 类，继承了 FrameLayout，代码如下

/**
* Created by StormShadow on 2015/9/24:21:35.
* Knowledge is power.
*/
public class RadarView extends FrameLayout {

private int mViewSize = 500;
private Paint mPaintLine;
private Paint mPaintSector;
private boolean mIsStarted = false;
private ScanThread mThread;
private int mCurAngle = 0;
private Shader mShader;
private Matrix mMatrix;

private final int paintWidth = 2;

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

public RadarView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

private void init() {
initPaint();
mThread = new ScanThread();
setBackgroundColor(Color.TRANSPARENT);

mMatrix = new Matrix();
mShader = new SweepGradient(
mViewSize >> 1,
mViewSize >> 1,
new int[] {
Color.LTGRAY,
Color.GREEN,
},
null);
}

private void initPaint() {
mPaintLine = new Paint();
mPaintLine.setStrokeWidth(paintWidth);
mPaintLine.setAntiAlias(true);
mPaintLine.setStyle(Style.STROKE);
mPaintLine.setColor(0xffff0000);

mPaintSector = new Paint();
mPaintSector.setColor(0x9D00ff00);
mPaintSector.setAntiAlias(true);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(mViewSize, mViewSize);
}

public void startScanning() {
mThread.start();
mIsStarted = true;
}

public void stopScanning() {
if (mIsStarted) {
Thread.interrupted();
mIsStarted = false;
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int halfRadaSize = mViewSize >> 1;
canvas.drawCircle(halfRadaSize, halfRadaSize, halfRadaSize >> 1, mPaintLine);
canvas.drawCircle(halfRadaSize, halfRadaSize, halfRadaSize - (paintWidth >> 1), mPaintLine);
canvas.drawLine(halfRadaSize, 0, halfRadaSize, mViewSize, mPaintLine);
canvas.drawLine(0, halfRadaSize, mViewSize, halfRadaSize, mPaintLine);

mPaintSector.setShader(mShader);
canvas.concat(mMatrix);
canvas.drawCircle(halfRadaSize, halfRadaSize, halfRadaSize - paintWidth, mPaintSector);
}

protected class ScanThread extends Thread {

int halfRadaSize = mViewSize >> 1;

@Override
public void run() {
while (mIsStarted) {
mCurAngle = (mCurAngle + 2) % 360;
mMatrix.reset();
mMatrix.postRotate(mCurAngle, halfRadaSize, halfRadaSize);
postInvalidate();
try {
Thread.sleep(10);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
}

效果图如下



下载源码