最近在做一個項目怀骤，其中有一個頁面是要做一個類似于雷達(dá)掃描的效果。于是找了其他應(yīng)用的類似的效果參考一下柔逼，剛好我使用的華為手機(jī)里的手機(jī)管家--病毒查殺頁面就是一個雷達(dá)掃描的效果犯犁。而且看它的樣式也挺不錯的，剛好符合我的要求号胚。所以就決定仿照它的樣式自定義一個類似效果的RadarView籽慢。
這是華為手機(jī)管家的效果：
圖片
我寫完這個RadarView之后覺得這個View的實(shí)現(xiàn)雖然不難，卻使用到了自定義屬性涕刚、View的Measure嗡综、Paint、Canvas和坐標(biāo)的計算等這些自定義View常用的知識杜漠，是一個不錯的自定義View練習(xí)例子极景，所以決定寫一篇博客把它記錄起來。
由于我需要雷達(dá)的掃描效果驾茴，所以畫中間的百分比數(shù)字盼樟。RadarView可以根據(jù)自己的需求配置View的主題顏色、掃描顏色锈至、掃描速度晨缴、圓圈數(shù)量、是否顯示水滴等功能樣式峡捡，方便實(shí)現(xiàn)各種樣式的情況击碗。下面是自定義RadarView的代碼。
public class RadarView extends View {
//默認(rèn)的主題顏色
private int DEFAULT_COLOR = Color.parseColor("#91D7F4");
// 圓圈和交叉線的顏色
private int mCircleColor = DEFAULT_COLOR;
//圓圈的數(shù)量 不能小于1
private int mCircleNum = 3;
//掃描的顏色 RadarView會對這個顏色做漸變透明處理
private int mSweepColor = DEFAULT_COLOR;
//水滴的顏色
private int mRaindropColor = DEFAULT_COLOR;
//水滴的數(shù)量 這里表示的是水滴最多能同時出現(xiàn)的數(shù)量们拙。因為水滴是隨機(jī)產(chǎn)生的稍途，數(shù)量是不確定的
private int mRaindropNum = 4;
//是否顯示交叉線
private boolean isShowCross = true;
//是否顯示水滴
private boolean isShowRaindrop = true;
//掃描的轉(zhuǎn)速，表示幾秒轉(zhuǎn)一圈
private float mSpeed = 3.0f;
//水滴顯示和消失的速度
private float mFlicker = 3.0f;
private Paint mCirclePaint;// 圓的畫筆
private Paint mSweepPaint; //掃描效果的畫筆
private Paint mRaindropPaint;// 水滴的畫筆
private float mDegrees; //掃描時的掃描旋轉(zhuǎn)角度砚婆。
private boolean isScanning = false;//是否掃描
//保存水滴數(shù)據(jù)
private ArrayList<Raindrop> mRaindrops = new ArrayList<>();
public RadarView(Context context) {
super(context);
init();
}
public RadarView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
getAttrs(context, attrs);
init();
}
public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getAttrs(context, attrs);
init();
}
/**
* 獲取自定義屬性值
*
* @param context
* @param attrs
*/
private void getAttrs(Context context, AttributeSet attrs) {
if (attrs != null) {
TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RadarView);
mCircleColor = mTypedArray.getColor(R.styleable.RadarView_circleColor, DEFAULT_COLOR);
mCircleNum = mTypedArray.getInt(R.styleable.RadarView_circleNum, mCircleNum);
if (mCircleNum < 1) {
mCircleNum = 3;
}
mSweepColor = mTypedArray.getColor(R.styleable.RadarView_sweepColor, DEFAULT_COLOR);
mRaindropColor = mTypedArray.getColor(R.styleable.RadarView_raindropColor, DEFAULT_COLOR);
mRaindropNum = mTypedArray.getInt(R.styleable.RadarView_raindropNum, mRaindropNum);
isShowCross = mTypedArray.getBoolean(R.styleable.RadarView_showCross, true);
isShowRaindrop = mTypedArray.getBoolean(R.styleable.RadarView_showRaindrop, true);
mSpeed = mTypedArray.getFloat(R.styleable.RadarView_speed, mSpeed);
if (mSpeed <= 0) {
mSpeed = 3;
}
mFlicker = mTypedArray.getFloat(R.styleable.RadarView_flicker, mFlicker);
if (mFlicker <= 0) {
mFlicker = 3;
}
mTypedArray.recycle();
}
}
/**
* 初始化
*/
private void init() {
// 初始化畫筆
mCirclePaint = new Paint();
mCirclePaint.setColor(mCircleColor);
mCirclePaint.setStrokeWidth(1);
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setAntiAlias(true);
mRaindropPaint = new Paint();
mRaindropPaint.setStyle(Paint.Style.FILL);
mRaindropPaint.setAntiAlias(true);
mSweepPaint = new Paint();
mSweepPaint.setAntiAlias(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//設(shè)置寬高,默認(rèn)200dp
int defaultSize = dp2px(getContext(), 200);
setMeasuredDimension(measureWidth(widthMeasureSpec, defaultSize),
measureHeight(heightMeasureSpec, defaultSize));
}
/**
* 測量寬
*
* @param measureSpec
* @param defaultSize
* @return
*/
private int measureWidth(int measureSpec, int defaultSize) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = defaultSize + getPaddingLeft() + getPaddingRight();
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
result = Math.max(result, getSuggestedMinimumWidth());
return result;
}
/**
* 測量高
*
* @param measureSpec
* @param defaultSize
* @return
*/
private int measureHeight(int measureSpec, int defaultSize) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = defaultSize + getPaddingTop() + getPaddingBottom();
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
result = Math.max(result, getSuggestedMinimumHeight());
return result;
}
@Override
protected void onDraw(Canvas canvas) {
//計算圓的半徑
int width = getWidth() - getPaddingLeft() - getPaddingRight();
int height = getHeight() - getPaddingTop() - getPaddingBottom();
int radius = Math.min(width, height) / 2;
//計算圓的圓心
int cx = getPaddingLeft() + (getWidth() - getPaddingLeft() - getPaddingRight()) / 2;
int cy = getPaddingTop() + (getHeight() - getPaddingTop() - getPaddingBottom()) / 2;
drawCircle(canvas, cx, cy, radius);
if (isShowCross) {
drawCross(canvas, cx, cy, radius);
}
//正在掃描
if (isScanning) {
if (isShowRaindrop) {
drawRaindrop(canvas, cx, cy, radius);
}
drawSweep(canvas, cx, cy, radius);
//計算雷達(dá)掃描的旋轉(zhuǎn)角度
mDegrees = (mDegrees + (360 / mSpeed / 60)) % 360;
//觸發(fā)View重新繪制械拍，通過不斷的繪制實(shí)現(xiàn)View的掃描動畫效果
invalidate();
}
}
/**
* 畫圓
*/
private void drawCircle(Canvas canvas, int cx, int cy, int radius) {
//畫mCircleNum個半徑不等的圓圈。
for (int i = 0; i < mCircleNum; i++) {
canvas.drawCircle(cx, cy, radius - (radius / mCircleNum * i), mCirclePaint);
}
}
/**
* 畫交叉線
*/
private void drawCross(Canvas canvas, int cx, int cy, int radius) {
//水平線
canvas.drawLine(cx - radius, cy, cx + radius, cy, mCirclePaint);
//垂直線
canvas.drawLine(cx, cy - radius, cx, cy + radius, mCirclePaint);
}
/**
* 生成水滴装盯。水滴的生成是隨機(jī)的坷虑，并不是每次調(diào)用都會生成一個水滴。
*/
private void generateRaindrop(int cx, int cy, int radius) {
// 最多只能同時存在mRaindropNum個水滴埂奈。
if (mRaindrops.size() < mRaindropNum) {
// 隨機(jī)一個20以內(nèi)的數(shù)字迄损，如果這個數(shù)字剛好是0，就生成一個水滴账磺。
// 用于控制水滴生成的概率芹敌。
boolean probability = (int) (Math.random() * 20) == 0;
if (probability) {
int x = 0;
int y = 0;
int xOffset = (int) (Math.random() * (radius - 20));
int yOffset = (int) (Math.random() * (int) Math.sqrt(1.0 * (radius - 20) * (radius - 20) - xOffset * xOffset));
if ((int) (Math.random() * 2) == 0) {
x = cx - xOffset;
} else {
x = cx + xOffset;
}
if ((int) (Math.random() * 2) == 0) {
y = cy - yOffset;
} else {
y = cy + yOffset;
}
mRaindrops.add(new Raindrop(x, y, 0, mRaindropColor));
}
}
}
/**
* 刪除水滴
*/
private void removeRaindrop() {
Iterator<Raindrop> iterator = mRaindrops.iterator();
while (iterator.hasNext()) {
Raindrop raindrop = iterator.next();
if (raindrop.radius > 20 || raindrop.alpha < 0) {
iterator.remove();
}
}
}
/**
* 畫雨點(diǎn)(就是在掃描的過程中隨機(jī)出現(xiàn)的點(diǎn))共屈。
*/
private void drawRaindrop(Canvas canvas, int cx, int cy, int radius) {
generateRaindrop(cx, cy, radius);
for (Raindrop raindrop : mRaindrops) {
mRaindropPaint.setColor(raindrop.changeAlpha());
canvas.drawCircle(raindrop.x, raindrop.y, raindrop.radius, mRaindropPaint);
//水滴的擴(kuò)散和透明的漸變效果
raindrop.radius += 1.0f * 20 / 60 / mFlicker;
raindrop.alpha -= 1.0f * 255 / 60 / mFlicker;
}
removeRaindrop();
}
/**
* 畫掃描效果
*/
private void drawSweep(Canvas canvas, int cx, int cy, int radius) {
//扇形的透明的漸變效果
SweepGradient sweepGradient = new SweepGradient(cx, cy,
new int[]{Color.TRANSPARENT, changeAlpha(mSweepColor, 0), changeAlpha(mSweepColor, 168),
changeAlpha(mSweepColor, 255), changeAlpha(mSweepColor, 255)
}, new float[]{0.0f, 0.6f, 0.99f, 0.998f, 1f});
mSweepPaint.setShader(sweepGradient);
//先旋轉(zhuǎn)畫布，再繪制掃描的顏色渲染党窜，實(shí)現(xiàn)掃描時的旋轉(zhuǎn)效果拗引。
canvas.rotate(-90 + mDegrees, cx, cy);
canvas.drawCircle(cx, cy, radius, mSweepPaint);
}
/**
* 開始掃描
*/
public void start() {
if (!isScanning) {
isScanning = true;
invalidate();
}
}
/**
* 停止掃描
*/
public void stop() {
if (isScanning) {
isScanning = false;
mRaindrops.clear();
mDegrees = 0.0f;
}
}
/**
* 水滴數(shù)據(jù)類
*/
private static class Raindrop {
int x;
int y;
float radius;
int color;
float alpha = 255;
public Raindrop(int x, int y, float radius, int color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
/**
* 獲取改變透明度后的顏色值
*
* @return
*/
public int changeAlpha() {
return RadarView.changeAlpha(color, (int) alpha);
}
}
/**
* dp轉(zhuǎn)px
*/
private static int dp2px(Context context, float dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpVal, context.getResources().getDisplayMetrics());
}
/**
* 改變顏色的透明度
*
* @param color
* @param alpha
* @return
*/
private static int changeAlpha(int color, int alpha) {
int red = Color.red(color);
int green = Color.green(color);
int blue = Color.blue(color);
return Color.argb(alpha, red, green, blue);
}
}
自定義屬性：在res/values下創(chuàng)建attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RadarView">
<!--圓圈和交叉線的顏色-->
<attr name="circleColor" format="color" />
<!--圓圈的數(shù)量-->
<attr name="circleNum" format="integer" />
<!--掃描的顏色 RadarView會對這個顏色做漸變透明處理-->
<attr name="sweepColor" format="color" />
<!--水滴的顏色-->
<attr name="raindropColor" format="color" />
<!--水滴的數(shù)量 這里表示的是水滴最多能同時出現(xiàn)的數(shù)量。因為水滴是隨機(jī)產(chǎn)生的幌衣，數(shù)量是不確定的-->
<attr name="raindropNum" format="integer" />
<!--是否顯示交叉線-->
<attr name="showCross" format="boolean" />
<!--是否顯示水滴-->
<attr name="showRaindrop" format="boolean" />
<!--掃描的轉(zhuǎn)速矾削，表示幾秒轉(zhuǎn)一圈-->
<attr name="speed" format="float" />
<!--水滴顯示和消失的速度-->
<attr name="flicker" format="float" />
</declare-styleable>
</resources>
效果圖：
效果圖
源碼下載
