Android 自定义View 折线图

来源：互联网发布：家居网络市场调研目标编辑：程序博客网时间：2024/05/22 17:03

自从来到北京之后，我发现我的体重越来越重了，但是头发越来越少了，发际线越来越高了，哎。。。。。。

上一篇中我们说了怎么画条形图，这篇我们就谈谈怎么画折线图了，什么？饼图和条形图都会画了，折现图，还用你告诉我们怎么画？好吧，那我就简单的说说我的思路

与饼图和条形图重复的部分，我就不说了。。。

1. 我的思路是先画每个坐标点的空心圆：

String mKey = entries.getKey();Integer mValue = entries.getValue();//加入动画增量mEveryDataWidth = Math.min(mEveryDataWidth, mAnimatorSize);mEveryDataSize = Math.min(mEveryDataSize, mAnimatorSize);//画折线上的空心圆canvas.drawCircle(mEveryDataWidth*index, -mValue*mEveryDataSize, 10, mChatPointPaint);

2. 画完空心圆之后，我们需要用现将这几个空心圆链接起来，这块有个小计算：

//前一个点的角的弧度(计算出两个直角边的长度,然后使用Math.atan2函数)float mTan1 = (float) Math.atan2(        mEveryDataWidth*index - mEveryDataWidth*(index-1),        mValue*mEveryDataSize - mEveryDataWidth*index);//当前点角的弧度float mTan2 = (float) Math.atan2(        mValue*mEveryDataSize - mEveryDataWidth*index,        mEveryDataWidth*index - mEveryDataWidth*(index-1));//画线canvas.drawLine(        mEveryDataWidth*(index-1)+10*(float)Math.sin(mTan1),        -mOldData*mEveryDataSize-10*(float)Math.cos(mTan1),        mEveryDataWidth*index-10*(float)Math.cos(mTan2),        -mValue*mEveryDataSize+10*(float)Math.sin(mTan2),        mChatPointPaint

我们两个点的坐标，以两点坐标之间的连线为斜边，我们就能画出一个直角三角形，初中数学，根据两个直角边，我们就能算出其余两个角的角度，这样我们就能求出两个空心圆连线两个端点的坐标，很简单。。。

总结：饼图，条形图，折线图我们就画完了，很简单，我的代码写的比较繁琐，因为这样看思路会比较清晰一下，另外关于控件各个部分尺寸的问题，我的源码有个很严重的问题，可能就是不适配有些分辨率的手机（当然我没测，但是我觉得肯定会有问题）, 所以我们在画自定义View的时候，设置长度的时候尽量按屏幕的百分比进行设置，这样能达到适配的效果。

好啦。。。困了，睡觉

源码

0 0