自定義View實現雷達掃描效果

• 自定義控件View中常用到的幾個方法
• onMeasure： 需要測量自身尺寸的時候
• onLayout：佈局控件的時候
• onDraw：繪製控件的時候
• 先調用onMeasure來計算
• 在調用onLayout方法來佈局
• 再調用onDraw方法來重繪界面
• 還可能回重寫onTouchEvent方法，重寫dispatTouchEvent

下面是利用onDraw方法實現雷達的掃描效果
先上效果圖

下面實現直接自定義View

package com.android.tiancb.radar;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;


/**
 * Created by tiancb on 16/1/17.
 */
public class RadarView extends View {
    int ADD = 1;//每次旋轉變動的角度
    int w,h;//屏幕寬度和高度
    Paint paint;
    Paint mPaint;//畫漸變實心圓的畫筆
    Matrix mMatrix;
    Shader mShader;
    private float degrees;
    private Handler mHandler = new Handler();
    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            if (degrees > 360){
                degrees = 0;
            }
            degrees += ADD;
            mMatrix.postRotate(degrees,w/2,h/2);
            invalidate();
            mHandler.postDelayed(mRunnable,50);
        }
    };
    public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public RadarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        w = context.getResources().getDisplayMetrics().widthPixels;
        h = context.getResources().getDisplayMetrics().heightPixels;
//        w = getWidth();
//        h = getHeight();
        initPaint();
        mHandler.post(mRunnable);
    }

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

    }
    private void  initPaint(){
        paint = new Paint();
        paint.setStrokeWidth(4);//設置畫筆的寬度
        paint.setColor(Color.parseColor("#ffffff"));//設置畫筆的顏色
        paint.setAntiAlias(true);//設置畫筆光滑
        paint.setStyle(Paint.Style.STROKE);//設置畫筆畫空心圓

        mPaint = new Paint();
        mPaint.setColor(0x88888888);
        mPaint.setAntiAlias(true);
//        mPaint.setStyle(Paint.Style.FILL);
        //使用shader來實現一個漸變的效果
        mShader = new SweepGradient(w/2,h/2,Color.TRANSPARENT,Color.parseColor("#AAAAAAAA"));
        mPaint.setShader(mShader);
        //創建一個Matrix對象實現實心漸變圓的旋轉
        mMatrix = new Matrix();

    }
    //重寫onDraw方法繪製自身
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        canvas.drawCircle(w/2,h/2,h/8,paint);
//        canvas.drawCircle(w/2,h/2,h/4,paint);
//        canvas.drawCircle(w/2,h/2,3*h/8,paint);
//        canvas.drawCircle(w/2,h/2,h/2,paint);
        //繪製四個圓圈
        for (int i = 0;i < 4;i++){
            canvas.drawCircle(w/2,h/2,(i+1)*h/8,paint);
        }
        canvas.concat(mMatrix);//把Matrix和canvas關聯起來
        //繪製一個漸變的實心圓
        canvas.drawCircle(w/2,h/2,h/2,mPaint);
        mMatrix.reset();

    }
}

接下來是佈局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@android:color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.android.tiancb.radar.RadarView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center"
        />
</FrameLayout>

The End！！！