热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

基于Android自定义控件实现雷达效果

这篇文章主要为大家详细介绍了基于Android自定义控件实现雷达效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

如何制作出类似雷达扫描的效果,具体方法如下

一、效果图

这里写图片描述

二、实现思路

1、自定义控件RadarView用来画雷达的效果图,可以自定义属性包括

backgroundColor:背景颜色
circleNum:圆的数量
startColor:开始颜色
endColor:结束颜色
lineColor:线的颜色

2、通过Handler循环发送消息到MessageQueue中,将mRotate加3,使Matrix旋转mRotate,重绘雷达扫描的圆。

3、通过梯度渐变扫描渲染器SweepGradient,在绘制圆的过程中,将颜色从startColor变为endColor。

三、实例代码

public class RadarView extends View {
 private final String TAG = "RadarView";

 private static final int MSG_WHAT = 1;

 private static final int DELAY_TIME = 20;

 //设置默认宽高,雷达一般都是圆形,所以我们下面取宽高会取Math.min(宽,高)
 private final int DEFAULT_WIDTH = 200;

 private final int DEFAULT_HEIGHT = 200;
 //雷达的半径
 private int mRadarRadius;
 //雷达画笔
 private Paint mRadarPaint;
 //雷达底色画笔
 private Paint mRadarBg;
 //雷达圆圈的个数,默认4个
 private int mCircleNum = 4;
 //雷达线条的颜色,默认为白色
 private int mCircleColor = Color.WHITE;
 //雷达圆圈背景色
 private int mRadarBgColor = Color.BLACK;
 //paintShader
 private Shader mRadarShader;

 //雷达扫描时候的起始和终止颜色
 private int mStartColor = 0x0000ff00;

 private int mEndColor = 0xaa00ff00;


 private Matrix mMatrix;

 //旋转的角度
 private int mRotate = 0;

 private Handler mHandler = new Handler() {
  @Override
  public void handleMessage(Message msg) {
   super.handleMessage(msg);

   mRotate += 3;
   postInvalidate();

   mMatrix.reset();
   mMatrix.preRotate(mRotate, 0, 0);
   //延时DELAY_TIME后再发送消息
   mHandler.sendEmptyMessageDelayed(MSG_WHAT, DELAY_TIME);
  }
 };

 public RadarView(Context context) {
  this(context, null);
 }

 public RadarView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs);

  //设置抗锯齿
  mRadarBg = new Paint(Paint.ANTI_ALIAS_FLAG);
  //画笔颜色
  mRadarBg.setColor(mRadarBgColor);
  //画实心圆
  mRadarBg.setStyle(Paint.Style.FILL);

  //设置抗锯齿
  mRadarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  //画笔颜色
  mRadarPaint.setColor(mCircleColor);
  //设置空心的画笔,只画圆边
  mRadarPaint.setStyle(Paint.Style.STROKE);
  //画笔宽度
  mRadarPaint.setStrokeWidth(2);
  //使用梯度渐变渲染器,
  mRadarShader = new SweepGradient(0, 0, mStartColor, mEndColor);

  mMatrix = new Matrix();
 }


 //初始化,拓展可设置参数供布局使用
 private void init(Context context, AttributeSet attrs) {
  if (attrs != null) {
   TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RadarView);
   mStartColor = ta.getColor(R.styleable.RadarView_startColor, mStartColor);
   mEndColor = ta.getColor(R.styleable.RadarView_endColor, mEndColor);
   mRadarBgColor = ta.getColor(R.styleable.RadarView_backgroundColor, mRadarBgColor);
   mCircleColor = ta.getColor(R.styleable.RadarView_lineColor, mCircleColor);
   mCircleNum = ta.getInteger(R.styleable.RadarView_circleNum, mCircleNum);
   ta.recycle();
  }
 }


 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  //雷达的半径为宽的一半或高的一半的最小值
  mRadarRadius = Math.min(w / 2, h / 2);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  //获取宽度
  int width = measureSize(1, DEFAULT_WIDTH, widthMeasureSpec);
  //获取高度
  int height = measureSize(0, DEFAULT_HEIGHT, heightMeasureSpec);

  //取最大的 宽|高
  int measureSize = Math.max(width, height);
  setMeasuredDimension(measureSize, measureSize);
 }


 /**
  * 测绘measure
  *
  * @param specType 1为宽, 其他为高
  * @param contentSize 默认值
  */
 private int measureSize(int specType, int contentSize, int measureSpec) {
  int result;
  //获取测量的模式和Size
  int specMode = MeasureSpec.getMode(measureSpec);
  int specSize = MeasureSpec.getSize(measureSpec);

  if (specMode == MeasureSpec.EXACTLY) {
   result = Math.max(contentSize, specSize);
  } else {
   result = contentSize;

   if (specType == 1) {
    // 根据传入方式计算宽
    result += (getPaddingLeft() + getPaddingRight());
   } else {
    // 根据传入方式计算高
    result += (getPaddingTop() + getPaddingBottom());
   }
  }

  return result;

 }


 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  Log.d(TAG, "onDraw " + mRotate);

  mRadarBg.setShader(null);

  //将画布移动到屏幕的中心点
  canvas.translate(mRadarRadius, mRadarRadius);
  //绘制底色,让雷达的线看起来更清晰
  canvas.drawCircle(0, 0, mRadarRadius, mRadarBg);
  //画圆圈
  for (int i = 1; i <= mCircleNum; i++) {
   canvas.drawCircle(0, 0, (float) (i * 1.0 / mCircleNum * mRadarRadius), mRadarPaint);
  }
  //绘制雷达基线 x轴
  canvas.drawLine(-mRadarRadius, 0, mRadarRadius, 0, mRadarPaint);
  //绘制雷达基线 y轴
  canvas.drawLine(0, mRadarRadius, 0, -mRadarRadius, mRadarPaint);
  //设置颜色渐变从透明到不透明
  mRadarBg.setShader(mRadarShader);
  //设置矩阵
  canvas.concat(mMatrix);
  canvas.drawCircle(0, 0, mRadarRadius, mRadarBg);
 }


 public void startScan() {
  mHandler.removeMessages(MSG_WHAT);
  mHandler.sendEmptyMessage(MSG_WHAT);
 }

 public void stopScan() {
  mHandler.removeMessages(MSG_WHAT);
 }
}

布局文件:


 

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • Python 内存管理机制详解
    本文深入探讨了Python的内存管理机制,涵盖了垃圾回收、引用计数和内存池机制。通过具体示例和专业解释,帮助读者理解Python如何高效地管理和释放内存资源。 ... [详细]
  • 本文详细介绍了划分树这一数据结构,重点探讨了其在子树和中值计算中的应用及优化方法。 ... [详细]
  • Android Studio 安装与配置指南
    本教程详细介绍了如何下载并安装 Android Studio,包括设置 SDK 路径和优化启动性能的方法。通过这些步骤,您可以顺利地开始开发 Android 应用。 ... [详细]
  • Appium + Java 自动化测试中处理页面空白区域点击问题
    在进行移动应用自动化测试时,有时会遇到某些页面没有返回按钮,只能通过点击空白区域返回的情况。本文将探讨如何在Appium + Java环境中有效解决此类问题,并提供详细的解决方案。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 解决TensorFlow CPU版本安装中的依赖问题
    本文记录了在安装CPU版本的TensorFlow过程中遇到的依赖问题及解决方案,特别是numpy版本不匹配和动态链接库(DLL)错误。通过详细的步骤说明和专业建议,帮助读者顺利安装并使用TensorFlow。 ... [详细]
  • 探索新一代API文档工具,告别Swagger的繁琐
    对于后端开发者而言,编写和维护API文档既繁琐又不可或缺。本文将介绍一款全新的API文档工具,帮助团队更高效地协作,简化API文档生成流程。 ... [详细]
  • 本文详细探讨了Android Activity中View的绘制流程和动画机制,包括Activity的生命周期、View的测量、布局和绘制过程以及动画对View的影响。通过实验验证,澄清了一些常见的误解,并提供了代码示例和执行结果。 ... [详细]
  • 本文探讨了在构建应用程序时,如何对不同类型的数据进行结构化设计。主要分为三类:全局配置、用户个人设置和用户关系链。每种类型的数据都有其独特的用途和应用场景,合理规划这些数据结构有助于提升用户体验和系统的可维护性。 ... [详细]
  • 在 Android 开发中,通过 Intent 启动 Activity 或 Service 时,可以使用 putExtra 方法传递数据。接收方可以通过 getIntent().getExtras() 获取这些数据。本文将介绍如何使用 RoboGuice 框架简化这一过程,特别是 @InjectExtra 注解的使用。 ... [详细]
  • Linux中的yum安装软件
    yum俗称大黄狗作用:解决安装软件包的依赖关系当安装依赖关系的软件包时,会将依赖的软件包一起安装。本地yum:需要yum源,光驱挂载。yum源:(刚开始查看yum源中的内容就是上图 ... [详细]
  • 鼠标悬停出现提示信息怎么做
    概述–提示:指启示,提起注意或给予提醒和解释。在excel中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等。设置方式也有多种,简单的,仅为单元格插入批注就可 ... [详细]
author-avatar
StrAiGhT-OuT
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有