雷达扫描View的简单实现

雷达扫描View的简单实现

关于雷达扫描我的思路是

• 通过SweepGradient来渲染
• Matrix旋转
• View重绘

来实现的。

首先我们来自定一个ScanView继承自View，初始化画笔

private void initPaint() {

        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setAntiAlias(true);//消除锯齿
        mCirclePaint.setColor(0xff31C9F2);
        mCirclePaint.setStyle(Paint.Style.FILL);

        mSelctorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mSelctorPaint.setAntiAlias(true);
        mSelctorPaint.setStyle(Paint.Style.FILL);

    }

然后重写onMeasure（）方法，因为我们画的雷达扫描是圆形的，要判断view的高度和宽度，选取最小的昨晚圆的直径，然后mSelctorPaint渲染。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取直径
        mDiameter = getMeasuredHeight() > getMeasuredWidth() ? getMeasuredWidth() : getMeasuredHeight();
        //渐变渲染
        SweepGradient sweepGradient = new SweepGradient(mDiameter / 2.0f, mDiameter / 2.0f, Color.TRANSPARENT, Color.WHITE);
        mSelctorPaint.setShader(sweepGradient);

    }

再重写onDraw（）方法开始画图

@Override
    protected void onDraw(Canvas canvas) {

        //画圆
        canvas.drawCircle(mDiameter / 2.0f, mDiameter / 2.0f, mDiameter / 2.0f, mCirclePaint);
        //把画布的多有对象与matrix联系起来
        if (mMatrix != null) {
            canvas.concat(mMatrix);
        }
        //画渐变圆
        canvas.drawCircle(mDiameter / 2.0f, mDiameter / 2.0f, mDiameter / 2.0f, mSelctorPaint);
        super.onDraw(canvas);
    }

最后开始Matrix旋转，Matrix旋转不能在主线程进行，需要另起线程

        @Override
        public void run() {
            while (isStart) {
                angel += 1;
                view.post(new Runnable() {
                    @Override
                    public void run() {
                        mMatrix = new Matrix();
                        mMatrix.preRotate(angel * direction, mDiameter / 2.0f, mDiameter / 2.0f);
                        view.invalidate();
                    }
                });
                try {
                    Thread.sleep(5);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }

Activity的布局

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

        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启"
            />

        <Button
            android:id="@+id/btn_stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="结束"
            />
        <com.chenz.demo.scanviewdemo.ScanView
            android:id="@+id/scanView"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"/>

    </LinearLayout>
</LinearLayout>

在Activity调用ScanView.startScan（）方法开始雷达扫描，stopScan()方法停止扫描。

最后附上Demo地址