Android 自定义View，实现折线图

========转自http://blog.csdn.net/yifei1989/article/details/29891211==========

最近要完成一个折线图控件，用来显示一系列的状态，并可以进行滑动。虽然现在有很多大牛写好的控件可以直接使用，但我感觉那些控件是给高手的使用的，对于我这样的菜鸟，还是脚踏实地，自己慢慢码代码，才可以提高。下面就是结果图（每种状态用一个表情图片表示）：

1 主页面的布局文件如下：

[html]  view plain copy print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity"   
6.        xmlns:app="http://schemas.android.com/apk/res/ting.example.linecharview">  
7.     <ting.example.linecharview.LineCharView   
8.         android:id="@+id/test"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         app:xytextcolor="@color/bg"  
12.         app:xytextsize="20sp"  
13.         app:interval="80dp"  
14.         />  
15. </RelativeLayout>  

其中linecharview就是自定义的View，而app:xx就是这个View的各种属性。

2 在values的attrs文件中加入如下xml，来定义linecharview的各种属性：

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.        <declare-styleable name="LineChar">  
4.         <attr  name="xylinecolor" format="color"/><!-- xy坐标轴颜色 -->  
5.         <attr  name="xylinewidth" format="dimension"/><!-- xy坐标轴宽度 -->  
6.          <attr  name="xytextcolor" format="color"/><!-- xy坐标轴文字颜色 -->  
7.          <attr name="xytextsize" format="dimension"/><!-- xy坐标轴文字大小 -->  
8.          <attr name="linecolor" format="color"/><!-- 折线图中折线的颜色 -->  
9.          <attr name="interval" format="dimension"/><!-- x轴各个坐标点水平间距 -->  
10.          <attr name="bgcolor" format="color"/><!-- 背景颜色 -->  
11.     </declare-styleable>  
12. </resources>  

3 接下来建个类LineCharView 继承View，并申明如下变量：

[java]  view plain copy print ?

1. <span style="white-space:pre">    </span>private int xori;//圆点x坐标  
2.     private int yori;//圆点y坐标  
3.     private int xinit;//第一个点x坐标  
4.     private int minXinit;//在移动时，第一个点允许最小的x坐标  
5.     private int maxXinit;//在移动时，第一个点允许允许最大的x坐标  
6.     private int xylinecolor;//xy坐标轴颜色  
7.     private int xylinewidth;//xy坐标轴大小  
8.     private int xytextcolor;//xy坐标轴文字颜色  
9.     private int xytextsize;//xy坐标轴文字大小  
10.     private int linecolor;//折线的颜色  
11.     private int interval;//坐标间的间隔  
12.     private int bgColor;//背景颜色  
13.     private List<String> x_coords;//x坐标点的值  
14.     private List<String> x_coord_values;//每个点状态值  
15.       
16.       
17.     private int width;//控件宽度  
18.     private int heigth;//控件高度  
19.     private int imageWidth;//表情的宽度  
20.     private float textwidth;//y轴文字的宽度  
21.     float startX=0;//滑动时候，上一次手指的x坐标  

在构造函数中读取各个属性值：

[java]  view plain copy print ?

1. public LineCharView(Context context, AttributeSet attrs) {  
2.     super(context, attrs);  
3.      TypedArray typedArray= context.obtainStyledAttributes(attrs, R.styleable.LineChar);  
4.      xylinecolor=typedArray.getColor(R.styleable.LineChar_xylinecolor, Color.GRAY);  
5.      xylinewidth=typedArray.getInt(R.styleable.LineChar_xylinewidth, 5);  
6.      xytextcolor=typedArray.getColor(R.styleable.LineChar_xytextcolor, Color.BLACK);  
7.      xytextsize=typedArray.getLayoutDimension(R.styleable.LineChar_xytextsize, 20);  
8.      linecolor=typedArray.getColor(R.styleable.LineChar_linecolor, Color.GRAY);  
9.      interval=typedArray.getLayoutDimension(R.styleable.LineChar_interval, 100);  
10.      bgColor=typedArray.getColor(R.styleable.LineChar_bgcolor, Color.WHITE);  
11.      typedArray.recycle();  
12.      x_coords=new ArrayList<String>();  
13.      x_coord_values=new ArrayList<String>();  
14. }  

4 接下来可以重写onLayout方法，来计算控件宽高和坐标轴的原点坐标，坐标轴原点的x坐标可以通过y轴文字的宽度，y轴宽度，和距离y的水平距离进行计算，这里y轴文字只有4种状态(A、B、C、D)，可以使用下面方法来计算出原点的x坐标：

[java]  view plain copy print ?

1. Paint paint=new Paint();  
2. paint.setTextSize(xytextsize);  
3. textwidth= paint.measureText("A");  
4. xori=(int) (textwidth+6+2*xylinewidth);//6 为与y轴的间隔  

原点的y坐标也可以用类似的方法计算出来：

[java]  view plain copy print ?

1. yori=heigth-xytextsize-2*xylinewidth-3; //3为x轴的间隔，heigth为控件高度。  

 当需要展示的数据量多时候，无法全部展示时候，需要通过滑动折线图进行展示，我们只需要控制第一点x坐标，就可以通过interval这个属性计算出后面每个点的坐标，但是为了防止将所有的数据滑动出界面外，需要在滑动时进行控制，其实就是控制第一个点x坐标的范围，第一个点的x坐标的最小值可以通过控件的宽度减去原点x坐标再减去所有折线图的水平距离，代码如下：

[java]  view plain copy print ?

1. minXinit=width-xori-x_coords.size()*interval;  

控件在默认第一个展示时，第一个点与y轴的水平距离等于interval的一半，在滑动时候如果第一个点出现在这个位置了，就不允许再继续向右滑动，所以第一个点x坐标的最大值就等这个起始x坐标。

[java]  view plain copy print ?

1. xinit=interval/2+xori;  
2. maxXinit=xinit;  

重写onLayout方法的代码如下：

[java]  view plain copy print ?

1. @Override  
2.     protected void onLayout(boolean changed, int left, int top, int right,  
3.             int bottom) {  
4.         if(changed){  
5.             width=getWidth();  
6.             heigth=getHeight();  
7.             Paint paint=new Paint();  
8.             paint.setTextSize(xytextsize);  
9.             textwidth= paint.measureText("A");  
10.             xori=(int) (textwidth+6+2*xylinewidth);//6 为与y轴的间隔  
11.             yori=heigth-xytextsize-2*xylinewidth-3;//3为x轴的间隔  
12.             xinit=interval/2+xori;  
13.             imageWidth= BitmapFactory.decodeResource(getResources(), R.drawable.facea).getWidth();  
14.             minXinit=width-xori-x_coords.size()*interval;  
15.             maxXinit=xinit;  
16.             setBackgroundColor(bgColor);  
17.         }  
18.         super.onLayout(changed, left, top, right, bottom);  
19.     }  

5 接下来就可以画折线、x坐标轴上的小圆点和折线上表情，代码如下：

[java]  view plain copy print ?

1. //画X轴坐标点，折线，表情  
2.     @SuppressLint("ResourceAsColor")  
3.     private void drawX (Canvas canvas) {  
4.         Paint x_coordPaint =new Paint();  
5.         x_coordPaint.setTextSize(xytextsize);  
6.         x_coordPaint.setStyle(Paint.Style.FILL);  
7.         Path path=new Path();  
8.         //画坐标轴上小原点，坐标轴文字  
9.         for(int i=0;i<x_coords.size();i++){  
10.             int x=i*interval+xinit;  
11.             if(i==0){  
12.                 path.moveTo(x, getYValue(x_coord_values.get(i)));  
13.             }else{  
14.                 path.lineTo(x, getYValue(x_coord_values.get(i)));  
15.             }  
16.             x_coordPaint.setColor(xylinecolor);  
17.             canvas.drawCircle(x, yori, xylinewidth*2, x_coordPaint);  
18.             String text=x_coords.get(i);  
19.             x_coordPaint.setColor(xytextcolor);  
20.             canvas.drawText(text, x-x_coordPaint.measureText(text)/2, yori+xytextsize+xylinewidth*2, x_coordPaint);  
21.         }  
22.           
23.         x_coordPaint.setStyle(Paint.Style.STROKE);  
24.         x_coordPaint.setStrokeWidth(xylinewidth);  
25.         x_coordPaint.setColor(linecolor);  
26.         //画折线  
27.         canvas.drawPath(path, x_coordPaint);  
28.           
29.           
30.         //画表情  
31.         for(int i=0;i<x_coords.size();i++){  
32.             int x=i*interval+xinit;  
33.             canvas.drawBitmap(getYBitmap(x_coord_values.get(i)), x-imageWidth/2, getYValue(x_coord_values.get(i))-imageWidth/2, x_coordPaint);  
34.         }  
35.           
36.           
37.         //将折线超出x轴坐标的部分截取掉  
38.         x_coordPaint.setStyle(Paint.Style.FILL);  
39.         x_coordPaint.setColor(bgColor);  
40.         x_coordPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OVER));  
41.         RectF rectF=new RectF(0, 0, xori, heigth);  
42.         canvas.drawRect(rectF, x_coordPaint);  
43.           
44.     }  

以上代码首先通过遍历x_coords和x_coord_values这两个List集合，来画坐标点，折线，表情，由于在向左滑动的时候有可能会将坐标点，折线绘制到y轴的左边，所以需要对其进行截取。其中getYValue和getYBitmap方法，可以通过x_coord_values的值计算y坐标和相应的表情。两方法如：

[java]  view plain copy print ?

1. //得到y坐标  
2.     private float getYValue(String value)  
3.     {  
4.         if(value.equalsIgnoreCase("A")){  
5.             return  yori-interval/2;  
6.         }  
7.         else if(value.equalsIgnoreCase("B")){  
8.             return  yori-interval;  
9.         }  
10.         else if(value.equalsIgnoreCase("C")){  
11.             return  (float) (yori-interval*1.5);  
12.         }  
13.         else if(value.equalsIgnoreCase("D")){  
14.             return yori-interval*2;  
15.         }else{  
16.             return yori;  
17.         }  
18.     }  
19.       
20.       
21.     //得到表情图  
22.     private Bitmap getYBitmap(String value){  
23.         Bitmap bitmap=null;  
24.         if(value.equalsIgnoreCase("A")){  
25.             bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.facea);  
26.         }  
27.         else if(value.equalsIgnoreCase("B")){  
28.             bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.faceb);  
29.         }  
30.         else if(value.equalsIgnoreCase("C")){  
31.             bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.facec);  
32.         }  
33.         else if(value.equalsIgnoreCase("D")){  
34.             bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.faced);  
35.         }  
36.         return bitmap;  
37.     }  

6 画好了坐标点，折线，表情，接下来就简单，就可以画x y轴了，x y轴只要确定的原点坐标，就非常简单了，代码如下：

[java]  view plain copy print ?

1. //画坐标轴  
2. private void drawXY(Canvas canvas){  
3.     Paint paint=new Paint();  
4.     paint.setColor(xylinecolor);  
5.     paint.setStrokeWidth(xylinewidth);  
6.     canvas.drawLine(xori, 0, xori, yori, paint);  
7.     canvas.drawLine(xori, yori, width, yori, paint);  
8. }  

7 最后就可以画y轴上的坐标小原点和y轴的文字了：

[java]  view plain copy print ?

1. //画Y轴坐标点  
2.     private void drawY(Canvas canvas){  
3.         Paint paint=new  Paint();  
4.         paint.setColor(xylinecolor);  
5.         paint.setStyle(Paint.Style.FILL);  
6.         for(int i=1;i<5 ;i++){  
7.             canvas.drawCircle(xori, yori-(i*interval/2), xylinewidth*2, paint);  
8.         }  
9.           
10.         paint.setTextSize(xytextsize);  
11.         paint.setColor(xytextcolor);  
12.         canvas.drawText("D",xori-textwidth-6-xylinewidth , yori-(2*interval)+xytextsize/2, paint);  
13.         canvas.drawText("C",xori-textwidth-6-xylinewidth , (float) (yori-(1.5*interval)+xytextsize/2), paint);  
14.         canvas.drawText("B",xori-textwidth-6-xylinewidth , yori-interval+xytextsize/2, paint);  
15.         canvas.drawText("A",xori-textwidth-6-xylinewidth , (float) (yori-(0.5*interval)+xytextsize/2), paint);  
16.     }  

8 写完了以上三个方法：只需要重写onDraw方法，就可以进行绘制了。

[java]  view plain copy print ?

1. @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         drawX(canvas);  
4.         drawXY(canvas);  
5.         drawY(canvas);  
6.     }  

9 为了可以进行水平滑动，需要重写控件的onTouchEvent方法，在滑动时候，实时计算手指滑动的距离来改变第一个点的x坐标，然后调用invalidate();就可以刷新控件，重新绘制达到滑动效果。

[java]  view plain copy print ?

1. @Override  
2.     public boolean onTouchEvent(MotionEvent event) {  
3.           
4.         //如果不用滑动就可以展示所有数据，就不让滑动  
5.         if(interval*x_coord_values.size()<=width-xori){  
6.             return false;  
7.         }  
8.           
9.         switch (event.getAction()) {  
10.         case MotionEvent.ACTION_DOWN:  
11.             startX=event.getX();  
12.             break;  
13.   
14.         case MotionEvent.ACTION_MOVE:  
15.             float dis=event.getX()-startX;  
16.             startX=event.getX();  
17.             if(xinit+dis>maxXinit){  
18.                 xinit=maxXinit;  
19.             }else if(xinit+dis<minXinit){  
20.                 xinit=minXinit;  
21.             }else{  
22.                 xinit=(int) (xinit+dis);  
23.             }  
24.             invalidate();  
25.               
26.             break;  
27.         }  
28.         return true;  
29.     }  

10 最后添加一个设置数据源的方法，设置x_coords，x_coord_values这个两个List集合，在设置完成之后调用invalidate()，进行控件刷新：

[java]  view plain copy print ?

1. /** 
2.  * 设置坐标折线图值 
3.  * @param x_coords 横坐标坐标点 
4.  * @param x_coord_values 每个点的值 
5.  */  
6. public void  setValue( List<String> x_coords ,List<String> x_coord_values) {  
7.     if(x_coord_values.size()!=x_coords.size()){  
8.         throw new IllegalArgumentException("坐标轴点和坐标轴点的值的个数必须一样!");  
9.     }  
10.     this.x_coord_values=x_coord_values;  
11.     this.x_coords=x_coords;  
12.     invalidate();  
13. }  

代码下载