Android自定义折线图 不用三方库

没有发博文的习惯，这算是个小开始吧，写个关于折线的例子，网上找了一大堆，好在能看懂部分内容了 就照着写了一个，有点简单，本人是小白，所以有点low 不喜勿喷呐 嘿~嘿~嘿~

先上代码吧 注释很详细，

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

public class DrawView extends View{
    public int XPoint = 60; // 原点的X坐标
    public int YPoint ;// 原点的Y坐标260
    public int XScale ; // X的刻度长度55
    public int YScale ; // Y的刻度长度40
    public int XLength ; // X轴的长度380
    public int YLength ; // Y轴的长度240
//  private int scaleLength = 10;//刻度线的长度 TTTTTT
    private int top = 10;//上边缘距离
    private int left = 40;//左边缘距离
    private int right = 10;//右边缘距离
    private int bottom = 40;//下边缘距离
    private String[] YLabel;//y轴的刻度值
    private String[] XLabel;//X轴的刻度值
    public String[] DataStr; // 数据
    public String[] DataStr1; // 数据

//  private Bitmap mBackGround;
    public DrawView(Context context) {
        super(context);
//      mBackGround  = ((BitmapDrawable) this.getResources().getDrawable(R.drawable.viewbackground)).getBitmap(); //获取背景图片
    }
    public void setDate(String[] YLabel,String[] XLabel,String[] DataStr,String[] DataStr1) {//如果只需要一条折线，最后这个参数给null就行了
        this.YLabel = YLabel;
        this.XLabel = XLabel;
        this.DataStr = DataStr;
        this.DataStr1 = DataStr1;
        invalidate();
    }
    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Log.i("Main", "Width = " + getWidth());//1280
        Log.i("Main", "Height = " + getHeight());//670  测量整个view的高度不包括状态栏

        Log.i("Main", "Width = " + getMeasuredWidth());//一个是测量整个view的高度  一个是测量view里内容的高度
        Log.i("Main", "Height = " + getMeasuredHeight());

        YLength = getHeight()-bottom-top;//整个Y轴的长度
        XLength = getWidth()-right-left;
        YPoint = getHeight()-bottom;
        XScale = (XLength/XLabel.length);//--x轴的刻度平均长度
        YScale = (YLength/YLabel.length);//Y--Y轴的刻度平均长度

        Paint paint = new Paint();
        paint.setStrokeWidth(2);
        paint.setColor(Color.GRAY);
        paint.setTextSize(20);
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);

//      canvas.drawBitmap(mBackGround, 0, 0, paint); //画背景图片
        //画竖线
        canvas.drawLine(XPoint,YPoint, XPoint,top, paint);
        for (int i = 1; i * YScale <= YLength; i++) {//画横刻度
            canvas.drawLine(XPoint, YPoint - i * YScale, XLength, YPoint - i* YScale, paint);
            paint.setColor(Color.BLACK);
            canvas.drawText(YLabel[i-1], XPoint - 30,YPoint - i * YScale +7, paint);  
            paint.setColor(Color.GRAY);
        }
        //画横线
        canvas.drawLine(XPoint, YPoint, XLength, YPoint, paint);
        for (int i = 1; i * XScale <= XLength; i++) {//画竖刻度
            canvas.drawLine(XPoint + (i-1) * XScale, YPoint, XPoint + (i-1) * XScale,top, paint);
            paint.setColor(Color.BLACK);
            canvas.drawText(XLabel[i-1], XPoint + (i-1) * XScale - 3,YPoint+30, paint);
            paint.setColor(Color.GRAY);
        }
        //画数据图
        paint.setColor(Color.GREEN);
        for (int i = 0; i<DataStr.length; i++) {
            canvas.drawCircle((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr[i]),5, paint);
            if (i+1<DataStr.length){
                canvas.drawLine((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr[i])
                        ,(float)XPoint+(i+2)*XScale,(float)calcuLations(DataStr[i+1]), paint);
            }
        }

        if (null!=DataStr1) {
            //画数据图第二条线(待封装扩展)
            paint.setColor(Color.RED);
            for (int i = 0; i<DataStr1.length; i++) {
                canvas.drawCircle((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr1[i]),5, paint);
                if (i+1<DataStr1.length){
                    canvas.drawLine((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr1[i])
                            ,(float)XPoint+(i+2)*XScale,(float)calcuLations(DataStr1[i+1]), paint);
                }
            }
        }
    }
    private int calcuLations(String y0) //计算y轴坐标
    {
        double y;
        try {
            y = Double.parseDouble(y0);
        } catch (Exception e) {
            return -100; 
        }
        return (int)(YPoint-YPoint*(y/Double.parseDouble(YLabel[YLabel.length-1])));
    }
}

说明一下：代码虽然很low 但是通俗易懂，所以这里是借鉴来用 自己可以稍微改改外观，完善以后我再来修改一下吧

activity里：

public class DiyViewsActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.diy_layout);
        init();
    }
    @SuppressWarnings("deprecation")
    private void init() {
        LinearLayout layout = (LinearLayout) findViewById(R .id.root);
        DrawView view = new DrawView(this);
        String[] DataStr1 = new String[]{"223","245","110","236","125","232","120","36","45","223","10","136","110","136","145"};  //数据
        String[] DataStr = new String[]{"123","110","136","145","123","110","136","145"};  //数据
        String[] YLabel = new String[]{"50","100","150","200","250","300","350","400"};
        String[] XLabel = new String[]{"0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"};
        view.setDate(YLabel,XLabel,DataStr,DataStr1);
//      view.setBackgroundDrawable(getResources().getDrawable(R.drawable.viewbackground));//给整个View加背景
        layout.addView(view);
    }
}

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout 
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    </LinearLayout>
</LinearLayout>

这是改过之后的 一个是修改了上次多条线的封装的问题， 一个是去掉了网格 改成短刻度

package com.muze.hrip.resident.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

public class DrawView extends View{
    public int XPoint = 60; // 原点的X坐标
    public int YPoint ;// 原点的Y坐标260
    public int XScale ; // X的刻度长度55
    public int YScale ; // Y的刻度长度40
    public int XLength ; // X轴的长度380
    public int YLength ; // Y轴的长度240
//  private int scaleLength = 10;//刻度线的长度 TTTTTT
    private int top = 10;//上边缘距离
    private int left = 40;//左边缘距离
    private int right = 10;//右边缘距离
    private int bottom = 40;//下边缘距离
    private String[] YLabel;//y轴的刻度值
    private String[] XLabel;//X轴的刻度值
    private String[][] dateStr;
//  private Bitmap mBackGround;
    public DrawView(Context context) {
        super(context);
//      mBackGround  = ((BitmapDrawable) this.getResources().getDrawable(R.drawable.viewbackground)).getBitmap(); //获取背景图片
    }
    public void setDate(String[] YLabel,String[] XLabel,String[][] dates) {
        this.YLabel = YLabel;
        this.XLabel = XLabel;
        dateStr = dates;
        invalidate();
    }
    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Log.i("Main", "Width = " + getWidth());//1280
        Log.i("Main", "Height = " + getHeight());//670  测量整个view的高度不包括状态栏

        Log.i("Main", "Width = " + getMeasuredWidth());//一个是测量整个view的高度  一个是测量view里内容的高度
        Log.i("Main", "Height = " + getMeasuredHeight());

        YLength = getHeight()-bottom-top;//整个Y轴的长度
        XLength = getWidth()-right-left;
        YPoint = getHeight()-bottom;
        XScale = (XLength/XLabel.length);//--x轴的刻度平均长度
        YScale = (YLength/YLabel.length);//Y--Y轴的刻度平均长度

        Paint paint = new Paint();
        paint.setStrokeWidth(2);
        paint.setColor(Color.GRAY);
        paint.setTextSize(20);
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);

//      canvas.drawBitmap(mBackGround, 0, 0, paint); //画背景图片
        //画竖线
        canvas.drawLine(XPoint,YPoint, XPoint,top, paint);
        canvas.drawLine(XPoint-5,top+10, XPoint,top,paint);
        canvas.drawLine(XPoint+5,top+10, XPoint,top,paint);
        for (int i = 1; i * YScale <= YLength; i++) {//画横刻度
//          canvas.drawLine(XPoint, YPoint - i * YScale, XLength, YPoint - i* YScale, paint);
            canvas.drawLine(XPoint, YPoint - i * YScale, XPoint+5, YPoint - i* YScale, paint);
            paint.setColor(Color.BLACK);
            canvas.drawText(YLabel[i-1], XPoint - 30,YPoint - i * YScale +7, paint);  
            paint.setColor(Color.GRAY);
        }
        //画横线
        canvas.drawLine(XPoint, YPoint, XLength, YPoint, paint);
        canvas.drawLine(XLength-10, YPoint+5, XLength, YPoint,paint);
        canvas.drawLine(XLength-10, YPoint-5, XLength, YPoint,paint);

        for (int i = 1; i * XScale <= XLength; i++) {//画竖刻度
//          canvas.drawLine(XPoint + (i-1) * XScale, YPoint, XPoint + (i-1) * XScale,top, paint);
            canvas.drawLine(XPoint + (i-1) * XScale, YPoint, XPoint + (i-1) * XScale,YPoint-5, paint);
            paint.setColor(Color.BLACK);
            canvas.drawText(XLabel[i-1], XPoint + (i-1) * XScale - 3,YPoint+30, paint);
            paint.setColor(Color.GRAY);
        }
        //画数据图
        drawData(paint,canvas,dateStr);
    }
    private void drawData(Paint paint,Canvas canvas,String[][] dates) {

        for (int i = 0; i < dates.length; i++) {
            paint.setColor(Color.GREEN);
            for (int j = 0; j < dates[i].length; j++) {
                canvas.drawCircle((float)XPoint+(j+1)*XScale,(float)calcuLations(dates[i][j]),5, paint);
                paint.setColor(Color.BLACK);
                canvas.drawText("("+dates[i][j]+")", (float)XPoint+(j+1)*XScale-5,(float)calcuLations(dates[i][j])-20, paint);
                paint.setColor(Color.GREEN);
                if (j+1<dates[i].length){
                    canvas.drawLine((float)XPoint+(j+1)*XScale,(float)calcuLations(dates[i][j])
                            ,(float)XPoint+(j+2)*XScale,(float)calcuLations(dates[i][j+1]), paint);
                }
            }
        }






//      paint.setColor(Color.GREEN);
//      for (int i = 0; i<DataStr.length; i++) {
//          canvas.drawCircle((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr[i]),5, paint);
//          paint.setColor(Color.BLACK);
//          canvas.drawText("("+DataStr[i]+")", (float)XPoint+(i+1)*XScale-5,(float)calcuLations(DataStr[i])-20, paint);
//          paint.setColor(Color.GREEN);
//          if (i+1<DataStr.length){
//              canvas.drawLine((float)XPoint+(i+1)*XScale,(float)calcuLations(DataStr[i])
//                      ,(float)XPoint+(i+2)*XScale,(float)calcuLations(DataStr[i+1]), paint);
//          }
//      }
    }
    private int calcuLations(String y0) //计算y轴坐标
    {
        double y;
        try {
            y = Double.parseDouble(y0);
        } catch (Exception e) {
            return -100; 
        }
        return (int)(YPoint-YPoint*(y/Double.parseDouble(YLabel[YLabel.length-1])));
    }
}

Activity 里

DrawView view = new DrawView(this);
        String[] DataStr1 = new String[]{"223","245","210","236","225","232","220","236","245"};  //数据
        String[] DataStr = new String[]{"123","110","136","145","123","110","136","145","123"};  //数据
        String[][] datas = new String[][]{DataStr1,DataStr};
        String[] YLabel = new String[]{"50","100","150","200","250","300","350","400"};
        String[] XLabel = new String[]{"0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"};
        view.setDate(YLabel,XLabel,datas);
        view.setBackgroundColor(getResources().getColor(R.color.ffffff));
        ll_graph.addView(view);

这是改了后的效果图