Android:自定义view 实现雷达扫描效果
2016-09-18 11:36
495 查看
前几天我的app上加了一个雷达扫描来查询附件商家的效果。看起来还是挺不错的,现在把雷达扫描的效果分享给大家。
最近项目新版刚上线,不是很忙,所以多抽出了一些时间来整理一下博客。
那书归正传:
先上效果图
图片有点失真,不要介意,先介绍下,主要用了Paint(画笔)+ canvas(画布) (以后我会专门写一篇文章来介绍paint和canvas,这里先认为大家都懂得paint和canvas的相关知识)
先看图,主要有几个点需要完成:
1.背景有五个半径不同的园。
2.类似于扫描的渲染效果。
3.让整个布局转起来。
好,咱们一个一个来。
第一个比较简单,用paint在canvas画五个大小不一的圆。
第二个用SweepGradient 增加渲染效果。
第三个让canvas的矩阵旋转变换。
下面直接上代码,注释比较全就不在多加修饰了。
最近项目新版刚上线,不是很忙,所以多抽出了一些时间来整理一下博客。
那书归正传:
先上效果图
图片有点失真,不要介意,先介绍下,主要用了Paint(画笔)+ canvas(画布) (以后我会专门写一篇文章来介绍paint和canvas,这里先认为大家都懂得paint和canvas的相关知识)
先看图,主要有几个点需要完成:
1.背景有五个半径不同的园。
2.类似于扫描的渲染效果。
3.让整个布局转起来。
好,咱们一个一个来。
第一个比较简单,用paint在canvas画五个大小不一的圆。
第二个用SweepGradient 增加渲染效果。
第三个让canvas的矩阵旋转变换。
下面直接上代码,注释比较全就不在多加修饰了。
/** * 雷达扫描 自定义view * * @author Bihaidong * @date 2016-9-18 9:46:09 */ public class CustomView extends View { private int mWidth, mHeight; private float[] pots = {0.05f, 0.1f, 0.15f, 0.2f, 0.25f}; private Shader scanShader; // 扫描渲染shader private Matrix matrix = new Matrix(); // 旋转需要的矩阵 private int scanSpeed = 5; // 扫描速度 private int scanAngle; // 扫描旋转的角度 private Paint mPaintCircle; // 画圆用到的paint private Paint mPaintRadar; // 扫描用到的paint public CustomView(Context context) { super(context); // 画圆用到的paint mPaintCircle = new Paint(); mPaintCircle.setStyle(Paint.Style.STROKE); // 描边 mPaintCircle.setStrokeWidth(1); // 宽度 mPaintCircle.setAlpha(100); // 透明度 mPaintCircle.setAntiAlias(true); // 抗锯齿 mPaintCircle.setColor(Color.parseColor("#B0C4DE")); // 设置颜色 亮钢兰色 // 扫描用到的paint mPaintRadar = new Paint(); mPaintRadar.setStyle(Paint.Style.FILL_AND_STROKE); // 填充 mPaintRadar.setAntiAlias(true); // 抗锯齿 post(run); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); for (int i = 0; i < pots.length; i++) { canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * pots[i], mPaintCircle); } // 画布的旋转变换 需要调用save() 和 restore() canvas.save(); scanShader = new SweepGradient(mWidth / 2, mHeight / 2, new int[]{Color.TRANSPARENT, Color.parseColor("#84B5CA")}, null); mPaintRadar.setShader(scanShader); // 设置着色器 canvas.concat(matrix); canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth * pots[4], mPaintRadar); canvas.restore(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 取屏幕的宽高是为了把雷达放在屏幕的中间 mWidth = getMeasuredWidth(); mHeight = getMeasuredHeight(); mWidth = mHeight = Math.min(mWidth, mHeight); } private Runnable run = new Runnable() { @Override public void run() { scanAngle = (scanAngle + scanSpeed) % 360; // 旋转角度 对360取余 matrix.postRotate(scanSpeed, mWidth / 2, mHeight / 2); // 旋转矩阵 invalidate(); // 通知view重绘 postDelayed(run, 130); // 调用自身 重复绘制 } }; }
相关文章推荐
- Android-自定义View实现二维码网格扫描+纵向雷达的扫描效果
- Android自定义View—仿雷达扫描效果
- Android自定义View-仿华为手机管家病毒查杀类似于雷达扫描动画效果
- Android自定义View实现雷达扫描动画
- Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果
- Android UI设计之<十四>自定义ViewGroup,实现绚丽的仿支付宝咻一咻雷达脉冲效果
- 自定义View实现雷达扫描效果
- Android 自定义View 使用Kotlin编写雷达扫描效果
- Android自定义View实现雷达扫描动画
- Android学习备忘020——android自定义ImageView实现缩放,回弹效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- 实现自定义view(2):仿Android QQ多屏幕显示ListView的效果
- android自定义view实现progressbar的效果
- Android UI设计之<四>自定义TextView属性,实现带边框效果的TextView
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android自定义view实现progressbar的效果