Android自定义View- 雷达扫描图

首先来看看效果图:CSDN博客地址

这里写图片描述

这里我使用了两种实现方式:

  1. 继承 view 实现。
  2. 继承 surfaceview 实现。

为什么会有两种实现方式呢?
主要是因为我在继续加入一些自定义功能的时候,如果是继承 view ,出现了卡顿的现象,也就是说在 UI 线程中做的逻辑操作太多了,导致 UI 线程失帧,最终导致了卡顿现象。又考虑到有些童鞋还没有学习 surfaceview ,所以会用两种方式去实现。文章末尾会贴出 GitHub 地址,所以这里只会贴出核心内容。

先简要说一下这里需要涉及到的知识点:

  1. 2D绘图基础
  2. surfaceview
  3. ValueAnimator (可选)
  4. 高中三角函数 Math.sin() Math.cos()。

绘制思路

  1. 绘制一个圆,颜色围绕圆心渐变。
  2. 让这个圆围绕圆心不断旋转,就有了扫描的效果。
  3. 根据半径生成随机的红点,当数量超过 5 个的时候,去掉最后一个点,让数量一直保持5个。

第一步:绘制一个渐变圆

ok,先看效果图:

这里写图片描述
初始化成员变量:

private int radius;//圆半径
private String TAG = "zoneLog";//Log 日志的 tag
private Matrix matrix;//view 的矩阵参数,用于旋转圆形
private float sweepAngle;//
private boolean isStart;//是否开始 valueanimator
private int value1;//valueanimator 的渐变值
private int x;//红点的 x 坐标值
private int y;//红点的 y 坐标值
private int totalAngle;//总旋转角度
private Paint redPointPaint;//红点画笔
private Paint sweepPaint;//圆形画笔,绘制圆角渐变
private Paint strokeWhitePaint;//描边白色画笔,用于绘制空心圆圈
private List<SRadarSweepView.MyPoint> pointList;//记录红点的坐标
private void init() {
    matrix = new Matrix();
    post(runnable);//用于实现圆形的不断旋转
    handler.sendEmptyMessageDelayed(0, 1000);
    isStart = true;
    pointList = new ArrayList<>();
    radius = 300;
    sweepAngle = 8;//旋转角度

    redPointPaint = new Paint();
    redPointPaint.setAntiAlias(true);
    redPointPaint.setColor(Color.RED);
    redPointPaint.setStyle(Paint.Style.FILL_AND_STROKE);

    sweepPaint = new Paint();
    sweepPaint.setAntiAlias(true);
    sweepPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    SweepGradient sweepGradient = new SweepGradient(0, 0, new int[]{0X10000000, Color.WHITE}, null);//角度渐变,由透明变为白色
    sweepPaint.setShader(sweepGradient);//设置 shader

    strokeWhitePaint = new Paint();
    strokeWhitePaint.setAntiAlias(true);
    strokeWhitePaint.setColor(Color.WHITE);
    strokeWhitePaint.setStyle(Paint.Style.STROKE);
    strokeWhitePaint.setStrokeWidth(1);
}

用于记录小红点:


class MyPoint {//用于记录小红点的圆心
    int x;
    int y;
    float angle;
    public MyPoint(int x, int y, float angle) {
        this.x = x;
        this.y = y;
        this.angle = angle;
    }
}

初始化完成后即可进行相关的绘制工作了:

canvas.drawColor(getResources().getColor(R.color.huaweiClockView));//绘制背景颜色
canvas.save();//在另外一个图层来绘制圆形,否则会影响到后续操作
canvas.concat(matrix);//获取 view 的矩阵参数
canvas.translate(getWidth() / 2, getHeight() / 2);//将原点移动至中心
canvas.drawCircle(0, 0, radius, sweepPaint);//绘制渐变圆
canvas.drawCircle(0, 0, radius + 80, strokeWhitePaint);//以下是绘制描边圆圈
canvas.drawCircle(0, 0, radius - 80, strokeWhitePaint);//
canvas.drawCircle(0, 0, radius - 160, strokeWhitePaint);//
canvas.drawCircle(0, 0, radius - 240, strokeWhitePaint);//
canvas.restore();//合并之前的操作,相当于 photoshop 中的图层合并

第二步:让圆转动起来

这里通过修改 view 的矩阵参数,让其实现旋转,我们肉眼看起来,也就实现了扫描的效果。先看效果:

这里写图片描述

private Runnable runnable = new Runnable() {
    @Override
    public void run() {
        totalAngle += sweepAngle;//统计总的旋转角度
        matrix.postRotate(sweepAngle, getWidth() / 2, getHeight() / 2);//旋转矩阵,旋转 8 度。
        postInvalidate();//刷新
        postDelayed(runnable, 200);//调用自身,实现不断循环
    }
};

第三步:生成小红点

这里通过 handler 来不断生成小红点,而且让小红点有一定的停留时间。且跟随扫描的脚步去生成。
来看 一下效果图:

这里写图片描述

private Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        if (msg.what == 0) {
            int currentAngle = totalAngle % 360;//计算出一个圆范围内的旋转角度
            int currentRadius = (int) (radius * Math.random()) + 50;//随机取得一个半径
            x = (int) (currentRadius * Math.cos(currentAngle));//通过三角函数,计算出 x y 坐标值
            y = (int) (currentRadius * Math.sin(currentAngle));
            if (currentAngle > 0 && currentAngle < 90) {//计算出各个象限的情况
                x = Math.abs(x);
                y = Math.abs(y);
            } else if (currentAngle > 90 && currentAngle < 180) {
                x = -Math.abs(x);
                y = Math.abs(y);
            } else if (currentAngle > 180 && currentAngle < 270) {
                x = -Math.abs(x);
                y = -Math.abs(y);
            } else if (currentAngle > 270 && currentAngle < 360) {
                y = -Math.abs(y);
                x = Math.abs(x);
            } else if (currentAngle == 0 || currentAngle == 360) {
                y = 0;
                x = Math.abs(x);

            } else if (currentAngle == 90) {
                x = 0;
                y = Math.abs(y);

            } else if (currentAngle == 180) {
                y = 0;
                x = -Math.abs(x);
            } else if (currentAngle == 270) {
                x = 0;
                y = -Math.abs(y);
            }

            pointList.add(0, new MyPoint(x, y, totalAngle));

            if (pointList.size() > 5) {//超过 5 个数据时,抹掉最后一个数据
                pointList.remove(pointList.size() - 1);
            }
            handler.sendEmptyMessageDelayed(0, 1000);//发送 message 实现不断循环

        }
    }
};

在 ondraw() 中追加以下代码,绘制小红点:

canvas.translate(getWidth() / 2, getHeight() / 2);
for (int i = 0; i < pointList.size(); i++) {
    canvas.drawCircle(pointList.get(i).x, pointList.get(i).y, 30, redPointPaint);
}
canvas.restore();

好的,我们一步一步完成了雷达扫描图的绘制,路下来可能还有点懵逼,那么就看看整一段的代码吧。
view实现
surfaceview实现

如果文中有什么知识点是错误的或者更好的实现方法,请及时联系我进行修改,以免误导别人。谢谢。

最后还有一种效果是这样的,这里就不过多讲解了,可以进源码看看,哈哈。

这里写图片描述

关注微信公众号,获取最新技术文章

zone_qrcode.jpg

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android定义View雷达,也称为蜘蛛网或者星型,是一种很常见的数据可视化方式。在这种中,多个数据维度会以不同的角度展示,而每个维度的数据则会以不同的长度表示。这样一来,我们就可以通过一个形快速地了解多个数据维度的情况。下面是一个简单的实现。 首先,我们需要在 XML 中定义定义 View 的布局: ``` <com.example.radarview.RadarView android:id="@+id/radar_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" /> ``` 接着,在 Java 代码中实现 View 的绘制逻辑: ``` public class RadarView extends View { private int mCount = 6; // 雷达维度 private float mRadius; // 雷达半径 private float mAngle; // 雷达每个维度的角度 private Paint mRadarPaint; // 雷达画笔 private Paint mValuePaint; // 数据画笔 private String[] mTitles = {"A", "B", "C", "D", "E", "F"}; // 维度名称 private double[] mValues = {5, 4, 3, 2, 5, 1}; // 数据值 public RadarView(Context context) { this(context, null); } public RadarView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化雷达画笔 mRadarPaint = new Paint(); mRadarPaint.setStyle(Paint.Style.STROKE); // 初始化数据画笔 mValuePaint = new Paint(); mValuePaint.setStyle(Paint.Style.FILL_AND_STROKE); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int size = Math.min(width, height); mRadius = size / 2f * 0.8f; mAngle = (float) (Math.PI * 2 / mCount); setMeasuredDimension(size, size); } @Override protected void onDraw(Canvas canvas) { // 绘制雷达 drawRadar(canvas); // 绘制数据区域 drawValue(canvas); } private void drawRadar(Canvas canvas) { Path path = new Path(); float r = mRadius / (mCount - 1); // 计算多边形边长 for (int i = 0; i < mCount; i++) { float currentR = r * i + r; // 计算当前多边形的半径 path.reset(); for (int j = 0; j < mCount; j++) { if (j == 0) { path.moveTo(getMeasuredWidth() / 2f + currentR, getMeasuredHeight() / 2f); } else { float x = (float) (getMeasuredWidth() / 2f + currentR * Math.cos(mAngle * j)); float y = (float) (getMeasuredHeight() / 2f + currentR * Math.sin(mAngle * j)); path.lineTo(x, y); } } path.close(); // 闭合路径 canvas.drawPath(path, mRadarPaint); } // 绘制连接线 for (int i = 0; i < mCount; i++) { float x = (float) (getMeasuredWidth() / 2f + mRadius * Math.cos(mAngle * i)); float y = (float) (getMeasuredHeight() / 2f + mRadius * Math.sin(mAngle * i)); canvas.drawLine(getMeasuredWidth() / 2f, getMeasuredHeight() / 2f, x, y, mRadarPaint); } // 绘制维度名称 for (int i = 0; i < mCount; i++) { float x = (float) (getMeasuredWidth() / 2f + (mRadius + 20) * Math.cos(mAngle * i)); float y = (float) (getMeasuredHeight() / 2f + (mRadius + 20) * Math.sin(mAngle * i)); canvas.drawText(mTitles[i], x, y, mValuePaint); } } private void drawValue(Canvas canvas) { Path path = new Path(); for (int i = 0; i < mCount; i++) { float percent = (float) mValues[i] / 6f; // 计算数据值占比 float x = (float) (getMeasuredWidth() / 2f + mRadius * Math.cos(mAngle * i) * percent); float y = (float) (getMeasuredHeight() / 2f + mRadius * Math.sin(mAngle * i) * percent); if (i == 0) { path.moveTo(x, getMeasuredHeight() / 2f); } else { path.lineTo(x, y); } // 绘制数据点 canvas.drawCircle(x, y, 5, mValuePaint); } path.close(); // 闭合路径 mValuePaint.setStyle(Paint.Style.FILL); mValuePaint.setAlpha(127); canvas.drawPath(path, mValuePaint); } } ``` 在这个实现中,我们首先在 onMeasure 方法中计算出雷达的半径和每个维度之间的角度。然后,在 onDraw 方法中先绘制雷达,再绘制数据区域。在绘制雷达时,我们通过计算每个多边形的边长和半径,以及每个维度的角度,来绘制多个同心多边形。然后,我们绘制多边形之间的连线和维度名称。在绘制数据区域时,我们通过计算每个数据值占比来绘制数据点,并使用 Path 来绘制闭合的数据区域。最后,我们再将数据区域填充上颜色。 这样,一个简单的雷达就完成了。当然,这只是一个基础的实现,你可以根据自己的需求来进行更多的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值