自定义View之雷达图

好久没有写过自定义的文章,这次重拾这方面的内容,从雷达图开始。首先看一下效果图:

效果图.gif

这就是大概的效果图了,下面我们就一一讲解吧。

首先为了看的懂,我会把所以变量贴出来,以防止看代码段的时候大家不知其意思:

private Paint mBroadPaint = new Paint();//边
private Paint mMarkEasePaint = new Paint();//数值面积
private Paint mMarkPaint = new Paint();//数值边
private Paint mCircleHoldPaint = new Paint();//各个数值点
private Paint mDrawTextPaint = new Paint();//各个角文字
private Paint mHoldTextPaint = new Paint();//数值点文字
private Paint mIntervalTextPaint = new Paint();//区间点

public static final double CIRCLE_ANGLE = 2 * Math.PI;
private int broad_color = Color.parseColor("#585858");//边的颜色
private int broad_color_text = Color.parseColor("#88001B");//角的字体颜色
private int mark_color = Color.parseColor("#FDECA6");//数值区域颜色
private int mark_broad_color = Color.parseColor("#FFCA18");//数值边的颜色
private int corner_hold_color = Color.parseColor("#EC1C24");//数组提示字体的颜色
private int circle_hold_color = Color.parseColor("#008B8B");//数值区域点的颜色
private int interval_text_color = Color.parseColor("#2F4F4F");//区间点的颜色

private float mBroadStrokeWidth = 1.5f;//边的粗细
private float mMarkBroadStrokeWidth = 1.5f;//数值区域边的粗细
private int corner_textSize;//边角的字体的大小
private int circle_hold_textSize;//数组提示字体的大小
private int mMarkEaseAlpha = 70;//数值区域的透明度
private int mBroadAlpha = 225;//各个边的连线的透明度
private int mIntervalTextSize;//区间点的大小

private List<String> cornerName = new ArrayList<>();//角的名字的集合
private List<Float> listData = new ArrayList<>();
private int angleStatus = 0;//角的状态
private float maxValue = 0f;//最大值
private Float radius = 0f;//画图的半径

private float[] listAngle;//所有角的集合
private boolean drawText = false;//画不画数组提示
private long duration = 3000;//动画时间
private boolean openDuration = true;//是否开启动画
private boolean openDataEasePoint = true;//是否开启区域数值提示

private int marginNum = 4; //画多少个雷达图的边
private float margin; //每个雷达图边的间隔

private double mPerimeter;
private float mFlingPoint;

private GestureDetector mDetector;
private Scroller scroller;

接着就是自定义确定整个View的大小,代码如下:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthModel = MeasureSpec.getMode(widthMeasureSpec);
    int heightModel = MeasureSpec.getMode(heightMeasureSpec);
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int width;
    int height;
    if (widthModel == MeasureSpec.EXACTLY) {
        width = measureWidth;
    } else {
        width = getPaddingLeft() + getPaddingRight() + measureWidth;
    }
    if (heightModel == MeasureSpec.EXACTLY) {
        height = measureHeight;
    } else {
        height = (getPaddingTop() + getPaddingBottom() + measureHeight) / 2;
    }
    setMeasuredDimension(width, height);
}

@Override
protected void onSizeChanged(int width, int height, int oldw, int oldh) {
    super.onSizeChanged(width, height, oldw, oldh);
    radius = (float) Math.min(width, height) / 3;
    margin = radius / 4;
    mPerimeter = 2 * Math.PI * radius;
    float tempRedius = (float) 360 / listData.size();
    listAngle = new float[listData.size()];
    for (int i = 0; i < listData.size(); i++) {
        listAngle[i] = tempRedius * (i + 1);
    }
    if (this.openDuration) {
        loadStartAnimator();
    }
}

当MeasureSpec.getMode不等于 MeasureSpec.EXACTLY时即父控件没有指定大小时,该View的宽时这个屏幕的宽再加它的左右间隔,而高是该屏幕的高再加上下间隔再除于2,否侧就是用指定控件的大小。

而onSizeChanged当view的大小发生变化时触发再onDraw()之前触发,所以我在这里计算出雷达图的半径(radius),和根据传进来的值计算出各个角的角度数组(listAngle),和各个雷达边的间隔(margin),主要就是这些了。

接下来就是分析最重要的onDraw()方法,代码如下:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (listAngle.length == 0) {
        return;
    }
    canvas.translate(getWidth() / 2, getHeight() / 2);
    canvas.rotate(180);
    canvas.save();
    //画雷达图各个边
    for (int i = 1; i <= marginNum; i++) {
        drawRadarBroad(canvas, margin * i);
    }
    //画雷达图各个边的连线
    drawPointLine(canvas, radius);
    //画雷达图的角的文字
    drawText(canvas, radius);
    //画出数值区域
    drawData(canvas, radius);
    //画出各个点
    circleHoldPaint(canvas, radius);
    //画各个区间数值提示
    drawDataEasePoint(canvas);
}

在这里我们把Canvas的原点移到这个View的中心,旋转180度为了保持刚开始时第一个点在正上方,再保存此时Canvas的状态,接着我们就要“画画”了。

drawRadarBroad(Canvas canvas, float radius)
public void drawRadarBroad(Canvas canvas, float radius) {
    Path path = new Path();
    for (int i = 0; i < listAngle.length; i++) {
        float[] temp = getAngle(radius, listAngle[i]);
        if (i == 0) {
            path.moveTo(temp[0], temp[1]);
        } else {
            path.lineTo(temp[0], temp[1]);
        }
    }
    float[] lastPoint = getAngle(radius, listAngle[0]);
    path.lineTo(lastPoint[0], lastPoint[1]);
    mBroadPaint.setAlpha(mBroadAlpha);
    canvas.drawPath(path, mBroadPaint);
}

public float[] getAngle(float radius, float angle) {
    float[] param = new float[2];
    param[0] = (float) Math.sin(Math.toRadians(angle)) * radius;
    param[1] = (float) Math.cos(Math.toRadians(angle)) * radius;
    return param;
}

我们通过margin * i计算出每个雷达边的外接圆的半径,在创建Path然后遍历各个角,通过getAngle()方法计算出各个点坐标,getAngle()里面的代码说白了只是三角计算公式而已。当它在第一个点的时候移动path即moveTo(),其后的点都是用lineTo()代表连接,然后最后一个点再和第一个点相连,形成一个闭环,最后调用Canvas.drawPath()画出这个雷达边,多次调用即画出多个边了。效果如下:

雷达边.png

drawPointLine(Canvas canvas, float radius)

接下来要把上面的边连起来形成真正的雷达图,代码如下:

public void drawPointLine(Canvas canvas, float radius) {
    for (int i = 0; i < listAngle.length; i++) {
        Path path = new Path();
        path.moveTo(0, 0);
        float[] temp = getAngle(radius, listAngle[i]);
        path.lineTo(temp[0], temp[1]);
        mBroadPaint.setAlpha(mBroadAlpha);
        canvas.drawPath(path, mBroadPaint);
    }
}

这个很简单,拿到整个最大外接圆的半径,计算出各个角的坐标,然后用Path把他们画出原点到各个角的连线,效果图如下:

雷达图2.png

接着画出雷达图各个角的提示文字 drawText(Canvas canvas, float radius)

public void drawText(Canvas canvas, float radius) {
    if (cornerName.size() == 0) {
        return;
    }
    for (int i = 0; i < listAngle.length; i++) {
        canvas.save();
        float[] temp = getAngle(radius, listAngle[i]);
        canvas.translate(temp[0], temp[1]);
        canvas.rotate(-180);
        Rect mCenterRect=new Rect();
        mIntervalTextPaint.getTextBounds(cornerName.get(i)+"",0,cornerName.get(i).length(),mCenterRect);
        if (-0.6<((int)temp[0])&&((int)temp[0])<=0.6) {
            canvas.drawText(cornerName.get(i),0,
                        temp[1]>0?-(mCenterRect.height()/2)
                        :mCenterRect.height()*2,mDrawTextPaint);
        } else {
            canvas.drawText(cornerName.get(i),
                        temp[0]>0?-(mCenterRect.width()):(mCenterRect.width()),
                        temp[1]>0?-(mCenterRect.height()/2):mCenterRect.height(),
                        mDrawTextPaint);
        }
        canvas.restore();
    }
    
}

这个整体思路也很简单,遍历雷达图的所有角,通过getAngle()拿到所有的坐标,在通过canvas.drawText()画出角的提示,这里注意的是,mDrawTextPaint我是设置居中,因为后面还涉及手势滑动,所以当-0.6<((int)temp[0])&&((int)temp[0])<=0.6时,是上下两个点,所以X的偏移我这是为0,最上面一点偏移半个文字高度,而下面是两个。假如不是上下两个点则是正常点,X点的偏移是temp[0]>0?-(mCenterRect.width()):(mCenterRect.width()),Y点的偏移是temp[1]>0?-(mCenterRect.height()/2):mCenterRect.height()。效果图如下:

雷达图3.png

drawData(Canvas canvas, float radius)

接着就是画数值占雷达图的整个区域和边,代码如下:

public void drawData(Canvas canvas, float radius) {
    if (maxValue == 0) {
        maxValue = Collections.max(listData);
    }
    Path path = new Path();
    for (int i = 0; i < listAngle.length; i++) {
        float tempRadius = (listData.get(i) / maxValue) * radius;
        float[] tempAngle = getAngle(tempRadius, listAngle[i]);
        if (i == 0) {
            path.moveTo(tempAngle[0], tempAngle[1]);
        } else {
            path.lineTo(tempAngle[0], tempAngle[1]);
        }
    }
    path.close();
    canvas.drawPath(path, mMarkEasePaint);
    canvas.drawPath(path, mMarkPaint);
}

通过(listData.get(i)/maxValue)*radius画出不同数值对应的半径,再通过getAngle()来获取角的坐标,然后依照画画雷达边画出用path.moveTo和path.lineTo画出整个路径,再通过canvas.drawPath(path,mMarkEasePaint),canvas.drawPath(path, mMarkPaint)分别画出对应的区域和对应的边。效果图如下:

雷达图4.png

circleHoldPaint(Canvas canvas, float radius)

接着画出数值点和其每个点代表的数值,代码如下:

public void circleHoldPaint(Canvas canvas, float radius) {
        if (maxValue == 0) {
            maxValue = Collections.max(listData);
        }
        for (int i = 0; i < listAngle.length; i++) {
            float tempRadius = (listData.get(i) / maxValue) * radius;
            float[] tempAngle = getAngle(tempRadius, listAngle[i]);
            if (drawText) {
                canvas.save();
                canvas.translate(tempAngle[0], tempAngle[1]);
                Rect mCenterRect=new Rect();
                mHoldTextPaint.getTextBounds(cornerName.get(i)+"",0,cornerName.get(i).length(),mCenterRect);
                canvas.rotate(-180);
                canvas.drawText(listData.get(i)+"",tempAngle[0]>0?-mCenterRect.width()/2:mCenterRect.width()/2,tempAngle[1]>0?-mCenterRect.height()/2:mCenterRect.height()/2,mHoldTextPaint);
                canvas.restore();
            }
            canvas.drawCircle(tempAngle[0], tempAngle[1], 5, mCircleHoldPaint);
        }
    }

首先还是遍历所有的角度的集合,和上面一样通过(listData.get(i) / maxValue) * radius拿到半径,再通过getAngle()拿到每个角度和半径对应的坐标。通过canvas.save()保存当前状态,再通过canvas.translate()把原点移动到对应的坐标,通过canvas.drawText()画出对应的数值,在canvas.restore()来恢复原先的状态。最后通过canvas.drawCircle()画出每个数值点的中心。效果图如下:

雷达图5.png

drawDataEasePoint(Canvas canvas)

最后就是画各个区间的数值提示,代码如下:

public void drawDataEasePoint(Canvas canvas) {
    if (!openDataEasePoint && listAngle.length != 0) {
        return;
    }
    float marginData = maxValue / marginNum;
    for (int i = 1; i <= marginNum; i++) {
        float[] temp = getAngle(margin * i, listAngle[0]);
        canvas.save();
        canvas.translate(temp[0], temp[1]);
        canvas.rotate(-180);
        float data = marginData * i;
        Rect mCenterRect=new Rect();
        mIntervalTextPaint.getTextBounds(data+"",0,(data+"").length(),mCenterRect);
        canvas.drawText(data+"",0, temp[1]>0?mCenterRect.height():-mCenterRect.height(), mIntervalTextPaint);
        canvas.restore();
    }
}

首先通过maxValue/marginNum计算出每个区间真是数值之间的间隔,在遍历marginNum,通过marginData*i获取每个区间的半径,再通过getAngle()获取对应的坐标,剩下的操作思路和上面的都大同小异,保存状态,计算字体大小,再通过canvas.drawText()画出字体,然后canvas.restore()还原。最终的效果图就都出来了,如下:

雷达图5.png

上面虽然画出了雷达图的全部样子,可是都是静态的不能手指操作。要怎么实现呢,也很简单,重写onTouch(MotionEvent event)方法,代码如下:

scroller = new Scroller(getContext());
mDetector = new GestureDetector(getContext(), mGestureListener);

@Override
public boolean onTouchEvent(MotionEvent event) {
    mDetector.onTouchEvent(event);
    return true;
}

private GestureDetector.SimpleOnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
        if (!scroller.isFinished()) {
            scroller.forceFinished(true);
        }
        return true;
    }
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        calculationAngle(e1.getX(), e1.getY(), e2.getX(), e2.getY(), distanceX / 5, distanceY / 5);
        postInvalidate();
        return super.onScroll(e1, e2, distanceX, distanceY);
    }
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (Math.abs(velocityX) > Math.abs(velocityY)) {
            mFlingPoint = e2.getX();
            scroller.fling((int) e2.getX(), 0, (int) (velocityX), 0,(int) (-50 + e2.getX()),(int) (50 + e2.getX()), 0, 0);
        } else if (Math.abs(velocityX) < Math.abs(velocityY)) {
            mFlingPoint = e2.getX();
            scroller.fling(0, (int) e2.getY(), 0, (int) (velocityY), 0, 0,
                    (int) -(50 + e2.getY()),
                    (int) (50 + e2.getY()));
        }
        return super.onFling(e1, e2, velocityX, velocityY);
    }
};
    
public void calculationAngle(float startX, float startY, float endX, float endY, float distanceX, float distanceY) {
    float tempRadius = 0;
    int action = detectDicr(startX, startY, endX, endY);
    if (action == 1 || action == 2) {//上下
        if (startX > (getWidth() / 2)) {
            tempRadius = distanceY; //右
        } else {
            tempRadius = -distanceY;//左
        }
    } else if (action == 3 || action == 4) {//左右
        if (startY > (getHeight() / 2)) {
            tempRadius = -distanceX;//下
        } else {
            tempRadius = distanceX;//上
        }
    }
    if (tempRadius > 0) {
        angleStatus = 0;
    } else {
        angleStatus = 1;
    }
    for (int i = 0; i < listAngle.length; i++) {
        listAngle[i] += (tempRadius);
    }
}    
    
//通过手势来移动方块:1,2,3,4对应上下左右
private int detectDicr(float start_x, float start_y, float end_x, float end_y) {
    boolean isLeftOrRight = Math.abs(start_x - end_x) > Math.abs(start_y - end_y) ? true : false;
    if (isLeftOrRight) {
        if (start_x - end_x > 0) {
            return 3;
        } else if (start_x - end_x < 0) {
            return 4;
        }
    } else {
        if (start_y - end_y > 0) {
            return 1;
        } else if (start_y - end_y < 0) {
            return 2;
        }
    }
    return 0;
}    

当我们手指在这个View滑动时,就是回调onScroll()方法,然后调用calculationAngle()方法,在这方法里detectDicr()方法是用来判断方向的,当它在上下滑石,我们用onScroll()回调的distanceY,左右就用distanceX方法,然后在根据它在哪个象限来判断正负值。再通过遍历所有角度来修改所有角度值,最后通过postInvalidate()不断刷新界面。

当我们手指快速一滑时,会回调onFling()方法,当Math.abs(velocityX) > Math.abs(velocityY)是左右快速滑动,否则是上下快速滑动,然后在调用scroller.fling()方法让它实现平顺的滑动一段距离,然后待会回调如下方法:

@Override
public void computeScroll() {
    if (scroller.computeScrollOffset()) {
        int x = scroller.getCurrX();
        int y = scroller.getCurrY();
        double tempRadius = 0;
        int max = Math.max(Math.abs(x), Math.abs(y));
        double rotateDis = CIRCLE_ANGLE * (Math.abs(max - mFlingPoint) / mPerimeter);
        if (angleStatus == 0) {
            tempRadius = rotateDis;
        } else if (angleStatus == 1) {
            tempRadius = -rotateDis;
        }
        for (int i = 0; i < listAngle.length; i++) {
            listAngle[i] += (tempRadius);
        }
        postInvalidate();
    }
}

获取当前X值和Y值,比较拿到最大值,再通过Math.abs(max - mFlingPoint)/radius算出大概的角度值,angleStatus是用来判断方向的,最后还是遍历所有角,来改变所有的角度,通过postInvalidate()不断的刷新界面。这就实现了快速一滑的效果的。

最后就是刚加载的动画了,代码如下:

public void loadStartAnimator() {
    ValueAnimator alphaAnimator = ValueAnimator.ofInt(0, 225);
    alphaAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mBroadAlpha = (int) valueAnimator.getAnimatedValue();
            postInvalidate();
        }
    });
    final ValueAnimator radiusAnimator = ValueAnimator.ofFloat(0, radius);
    radiusAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            radius = (Float) valueAnimator.getAnimatedValue();
            postInvalidate();
        }
    });
    final ValueAnimator marginAnimator = ValueAnimator.ofFloat(0, margin);
    marginAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            margin = (Float) valueAnimator.getAnimatedValue();
            postInvalidate();
        }
    });
    alphaAnimator.setDuration(duration);
    radiusAnimator.setDuration(duration);
    marginAnimator.setDuration(duration);
    alphaAnimator.start();
    radiusAnimator.start();
    marginAnimator.start();
}

通过ValueAnimator根据动画持续的总时间内产生多个时间因子,即mBroadAlpha(透明度),radius(半径),margin(雷达边的间距)在一段时间内不同改变,再通过postInvalidate()不断刷新界面,从而产生动画效果。

最后奉上源码,大家有什么不懂可以看源码https://github.com/jack921/RadarView

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏指尖下的Android

安卓运动圆环自定义View

记得这个东西原来有个同事问过我,当时正在自学自定义View和属性动画这一块,对这个功能也没有写过,所以就google了一下,发了几个类似效果的github项目给...

2002
来自专栏潇涧技术专栏

Android Heroes Reading Notes 3

《Android群英传》读书笔记 (3) 第六章 Android绘图机制与处理技巧 + 第七章 Android动画机制与使用技巧

762
来自专栏移动开发

用path画一个抽象的树叶

源码地址:https://github.com/X-FAN/LeafView 只是个简单的demo,大家可以参考下

1192
来自专栏互联网杂技

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

3986
来自专栏封碎

Android简单的圆盘形菜单 博客分类: Android Android360

   今天偶然看到一个圆盘形的菜单,还可以转动,感觉挺有意思,然后想了想,做了个简单的效果。       思路是这样的,定一个原点和一个半径,圆的四周均匀...

1622
来自专栏Android知识点总结

D6-Android绘图之一言不合画个表

1214
来自专栏Jack的Android之旅

高仿QQ运动的周报界面

这次高仿的是QQ运动的周报界面的网图。这个控件刚开始的时候以为代码量不大,没想到一路下来界面代码在加上动画代码还是蛮多的。好了老规矩先上图:

1954
来自专栏Android知识点总结

Android原生绘图之一起画个表

3----个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 4----看到这里,我在此感谢你的喜欢与支持

1723
来自专栏何俊林

Android开发之贝塞尔曲线进阶篇(仿直播送礼物,饿了么购物车动画)

今天来自李晨玮分享的直播礼物效果Demo。对于直播中送车,点赞都有借鉴意义。李晨玮的简书为:http://www.jianshu.com/u/b2df0a5ea...

5348
来自专栏QQ空间开发团队的专栏

手 Q 人脸识别动画实现详解

当存在多个人脸的时候进行主次脸动画的切换,摄像头移动的时候动画的追踪,多个动画的之间的时序控制等问题,总之,UI 展示加上各种业务逻辑使得这个动画变得异常复杂。

2K4

扫码关注云+社区

领取腾讯云代金券