雷达扫描View的简单实现

2019-11-07 23:46:00

字体：大中小

来源：转载

供稿：网友

雷达扫描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地址

上一篇：OKHttp实现大文件的断点续传

下一篇：首次运行React Native时遇到的问题