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

最近看了一个视频讲了一种微信雷达扫描的实现方案，借鉴了一下，自己也写一个玩玩，与大家分享一下。基本想出来三种解决方案，根据不同需求情况选择即可。





方案一实现思路（通用）：

1.自定义view

2.重写onDraw()方法

3.画四个无锯齿空心圆

4.画以最大圆为半径的实心渐变圆

5.创建矩阵，旋转画布，重绘，并用Handler实现循环

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);
}

}

本以为微信也是这么实现的，结果发现透明还是照微信差一点点，继续看微信apk解压的资源文件发现，原来连四个空心圆+实心渐变圆是一张图片，害的我还画了半天调比例。所以就有下面的第二种方案。

方案二实现思路（适用于最大圆直径小于屏幕宽度的情况）：

1.四个空心圆+实心圆为一张图片

2.普通ImageView+xml旋转动画





旋转动画：

<?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>

repeatCount设置成-1保证循环转动，从0度转到359，duration时长10秒，绕中心点旋转。

加载动画：

// 加载动画
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);

ImageView正常布局就行了，这样就齐活了，就可以用了，但是有个问题，不方便设置让最大的圆直径超过屏幕宽度，可以设置 android:scaleType="centerCrop"，但是虽然超出了屏幕，布局效果也微信一至了，但是问题就来了，超出后旋转，图片是长方形的，圆图被截取了，所以这种用法适用于最大圆直径小于屏幕宽度的情况。所以虽然简单但美中不足，于是设想将两种方案结合起来，方案三就诞生了。

方案三实现思路（通用）：

1.四个空心圆+实心圆为一张图片

2.自定义ImageView

3.利用方案一的方法用矩阵让image转起来

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();
}

}

布局引用：

<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"/>

很简单吧，好了，以上就是三种实现方案了，根据自己的实际需要选择吧，同时如果有更好的解决方法，也欢迎交流~

Demo源码 ：http://download.csdn.net/detail/itjianghuxiaoxiong/9331925