Android自定義View 雷達掃描效果

最近在做一個專案，其中有一個頁面是要做一個類似於雷達掃描的效果。於是找了其他應用的類似的效果參考一下，剛好我使用的華為手機裡的手機管家--病毒查殺頁面就是一個雷達掃描的效果。而且看它的樣式也挺不錯的，剛好符合我的要求。所以就決定仿照它的樣式自定義一個類似效果的RadarView。 這是華為手機管家的效果：

我寫完這個RadarView之後覺得這個View的實現雖然不難，卻使用到了自定義屬性、View的Measure、Paint、Canvas和座標的計算等這些自定義View常用的知識，是一個不錯的自定義View練習例子，所以決定寫一篇部落格把它記錄起來。

由於我需要雷達的掃描效果，所以畫中間的百分比數字。RadarView可以根據自己的需求配置View的主題顏色、掃描顏色、掃描速度、圓圈數量、是否顯示水滴等功能樣式，方便實現各種樣式的情況。下面是自定義RadarView的程式碼。

public class RadarView extends View {

    //預設的主題顏色
    private int DEFAULT_COLOR = Color.parseColor("#91D7F4");

    // 圓圈和交叉線的顏色
    private int mCircleColor = DEFAULT_COLOR;
    //圓圈的數量 不能小於1
    private int mCircleNum = 3;
    //掃描的顏色 RadarView會對這個顏色做漸變透明處理
    private int mSweepColor = DEFAULT_COLOR;
    //水滴的顏色
    private int mRaindropColor = DEFAULT_COLOR;
    //水滴的數量 這裡表示的是水滴最多能同時出現的數量。因為水滴是隨機產生的，數量是不確定的
    private int mRaindropNum = 4;
    //是否顯示交叉線
    private boolean isShowCross = true;
    //是否顯示水滴
    private boolean isShowRaindrop = true;
    //掃描的轉速，表示幾秒轉一圈
    private float mSpeed = 3.0f;
    //水滴顯示和消失的速度
    private float mFlicker = 3.0f;

    private Paint mCirclePaint;// 圓的畫筆
    private Paint mSweepPaint; //掃描效果的畫筆
    private Paint mRaindropPaint;// 水滴的畫筆

    private float mDegrees; //掃描時的掃描旋轉角度。
    private boolean isScanning = false;//是否掃描

    //儲存水滴資料
    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) {
        //設定寬高,預設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);
            //計算雷達掃描的旋轉角度
            mDegrees = (mDegrees + (360 / mSpeed / 60)) % 360;

			//觸發View重新繪製，通過不斷的繪製實現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);
    }

    /**
     * 生成水滴。水滴的生成是隨機的，並不是每次呼叫都會生成一個水滴。
     */
    private void generateRaindrop(int cx, int cy, int radius) {

        // 最多隻能同時存在mRaindropNum個水滴。
        if (mRaindrops.size() < mRaindropNum) {
            // 隨機一個20以內的數字，如果這個數字剛好是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();
            }
        }
    }

    /**
     * 畫雨點(就是在掃描的過程中隨機出現的點)。
     */
    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);
            //水滴的擴散和透明的漸變效果
            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);
        //先旋轉畫布，再繪製掃描的顏色渲染，實現掃描時的旋轉效果。
        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;
        }
    }

    /**
     * 水滴資料類
     */
    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轉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下建立attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="RadarView">
        <!--圓圈和交叉線的顏色-->
        <attr name="circleColor" format="color" />
        <!--圓圈的數量-->
        <attr name="circleNum" format="integer" />
        <!--掃描的顏色 RadarView會對這個顏色做漸變透明處理-->
        <attr name="sweepColor" format="color" />
        <!--水滴的顏色-->
        <attr name="raindropColor" format="color" />
        <!--水滴的數量 這裡表示的是水滴最多能同時出現的數量。因為水滴是隨機產生的，數量是不確定的-->
        <attr name="raindropNum" format="integer" />
        <!--是否顯示交叉線-->
        <attr name="showCross" format="boolean" />
        <!--是否顯示水滴-->
        <attr name="showRaindrop" format="boolean" />
        <!--掃描的轉速，表示幾秒轉一圈-->
        <attr name="speed" format="float" />
        <!--水滴顯示和消失的速度-->
        <attr name="flicker" format="float" />
    </declare-styleable>
</resources>
複製程式碼

效果圖：

原始碼下載