Android UI 之自定义RadarView——高仿微信雷达扫描

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
package com.ml512.radarview;
import com.ml512.radardemo.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
/**
* 2015/12/06 22:49
* @author ITjianghuxiaoxiong
* http://blog.csdn.net/itjianghuxiaoxiong
*/
@SuppressLint("DrawAllocation")
public class RadarView extends View {
private int w, h;// 获取控件宽高
private Paint mPaintLine;// 画雷达圆线
private Paint mPaintSolid;// 画雷达渐变实心圆
private Matrix matrix;
private int degrees;
private Handler mHandler = new Handler();
private Runnable mRunnable = new Runnable() {
@Override
public void run() {
degrees++;
matrix.postRotate(degrees, w / 2, h / 2);//旋转矩阵
RadarView.this.invalidate();// 重绘
mHandler.postDelayed(mRunnable, 55);
}
};
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);
setBackgroundResource(R.drawable.radar_bg);//雷达的背景图片(紫色满天星，可以在微信APP中直接找到图片资源)
initPaint();
mHandler.postDelayed(mRunnable,500);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
w = getMeasuredWidth();//获取view的宽度
h = getMeasuredHeight();//获取view的高度
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaintLine = new Paint();
mPaintLine.setColor(Color.parseColor("#CCA1A1A1"));// 设置画笔
mPaintLine.setStrokeWidth(1);// 设置画笔宽度
mPaintLine.setAntiAlias(true);// 消除锯齿
mPaintLine.setStyle(Style.STROKE);// 设置空心
mPaintSolid = new Paint();
mPaintSolid.setAntiAlias(true);// 消除锯齿
mPaintSolid.setStyle(Style.FILL);//实心圆
matrix = new Matrix();//创建组件
}
@Override
protected void onDraw(Canvas canvas) {
//四个空心圆
canvas.drawCircle(w / 2, h / 2, w / 6, mPaintLine);
canvas.drawCircle(w / 2, h / 2, 5 * w / 14, mPaintLine);
canvas.drawCircle(w / 2, h / 2, 12 * w / 20, mPaintLine);
canvas.drawCircle(w / 2, h / 2, 9 * w / 11, mPaintLine);
//渐变
Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT, Color.parseColor("#33FFFFFF"));
mPaintSolid.setShader(mShader);
canvas.setMatrix(matrix);
canvas.drawCircle(w / 2, h / 2, 9 * w / 11, mPaintSolid);
matrix.reset();//重置矩阵，避免累加，越转越快
super.onDraw(canvas);
}
}

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="10000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="-1"
android:toDegrees="359"/>
</set>

1
2
3
4
5
6
// 加载动画
Animation rotateAnim = AnimationUtils.loadAnimation(this, R.anim.radar_rotate_anim);
LinearInterpolator lin = new LinearInterpolator();// 匀速旋转
rotateAnim.setInterpolator(lin);
ImageView radarImage = (ImageView) findViewById(R.id.image_radar);
radarImage.startAnimation(rotateAnim);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
package com.ml512.radarview;
import com.ml512.radardemo.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
* 2015/12/06 22:49
* @author ITjianghuxiaoxiong
* http://blog.csdn.net/itjianghuxiaoxiong
*/
@SuppressLint("DrawAllocation")
public class RadarImageView extends ImageView {
private int w, h;// 获取控件宽高
private Matrix matrix;
private int degrees;
private Handler mHandler = new Handler();
private Runnable mRunnable = new Runnable() {
@Override
public void run() {
degrees++;
matrix.postRotate(degrees, w / 2, h / 2);
RadarImageView.this.invalidate();// 重绘
mHandler.postDelayed(mRunnable, 50);
}
};
public RadarImageView(Context context) {
this(context, null);
}
public RadarImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RadarImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
w = getMeasuredWidth();//获取view的宽度
h = getMeasuredHeight();//获取view的高度
}
/**
* 初始化
*/
private void init() {
setBackgroundResource(R.drawable.radar_bg);
matrix = new Matrix();
mHandler.postDelayed(mRunnable,500);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.setMatrix(matrix);
super.onDraw(canvas);
matrix.reset();
}
}

1
2
3
4
5
6
7
<com.ml512.radarview.RadarImageView
android:id="@+id/image_radar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:padding="15dp"
android:src="@drawable/wx_radar_imgae"/>