自定義View實現折線圖：

執行效果：

少說廢話，實現起來還是比較簡單的，無非就是使用canvas進行繪圖，以及座標的計算，下面直接貼程式碼：

ChartView.java

/**
 * Created by wangke on 2017/2/20.
 * 自定義折線圖
 */

public class ChartView extends View{

    private int mViewHeight; //當前View的高
    private int mViewWidth; //當前View的寬

    private Paint mPaintCdt;// 繪製座標系的畫筆
    private
 
 Paint mPaintSysPoint; //繪製座標系上刻度點
    private Paint mPaintLinePoint; //繪製折線上的點
    private Paint mPaintText; //繪製文字
    private Paint mPaintLine; //繪製折線
    private Paint mPaintDash; //繪製虛線
    private Paint mPaintSys; //x,y軸

    private Rect mXBound;
    private Rect mYBound;

    private ArrayList<Point> pointList = null
 
;
    private int X_MAX; //傳入點的X的最大座標
    private int Y_MAX; //傳入點的Y的最大座標
    private float mScreenXdistance; //x軸刻度在螢幕上的間隔
    private float mScreenYdistance; //y軸刻度在螢幕上的間隔

    //折線圖距離四周的畫素大小
    private int Margin = 80;

    private int coordinateSystemColor;
    private float coordinateSystemSize;
    private
 
 int lineColor;
    private float lineSize;
    private int lineColorPoint;
    private float lineColorPointRadius;
    private int scalePointColor;
    private float scalePointRadius;
    private boolean isShowDash;
    private int xScale;
    private int yScale;
    private float dashSize;
    private int dashColor;


    public ChartView(Context context) {
        super(context);
        InitPaint();
    }

    //設定點的資料
    public void setPoint(ArrayList<Point> points) {

        pointList = new ArrayList();

        pointList = points;


        int []xPointArray = new int[100];
        int []yPointArray = new int[100];

        //遍歷傳入的點的座標，獲取最大的x,y點的座標，用來計算刻度
        for(int i=0;i<pointList.size();i++){

            Point point = pointList.get(i);
            xPointArray[i] = point.x;
            yPointArray[i] = point.y;

        }

        Arrays.sort(xPointArray);
        Arrays.sort(yPointArray);

        X_MAX = xPointArray[xPointArray.length-1];
        Y_MAX = yPointArray[yPointArray.length-1];

        Log.i("wk","X的最大座標："+xPointArray[xPointArray.length-1]);
        Log.i("wk","y的最大座標："+yPointArray[yPointArray.length-1]);

        //呼叫繪製
        invalidate();


    }

    //初始化畫筆
    private void InitPaint() {

        mPaintCdt = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定畫線
        mPaintCdt.setStyle(Paint.Style.STROKE);
        //設定線的寬度
        mPaintCdt.setStrokeWidth(lineSize);
        mPaintCdt.setColor(lineColor);
        mPaintSysPoint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定填充
        mPaintSysPoint.setStyle(Paint.Style.FILL);
        mPaintSysPoint.setColor(scalePointColor);
        mPaintLinePoint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定填充
        mPaintLinePoint.setStyle(Paint.Style.FILL);
        Log.i("wk","線上點的顏色："+lineColor);
        mPaintLinePoint.setColor(lineColorPoint);
        //繪製xy軸
        mPaintSys = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定畫線
        mPaintSys.setStyle(Paint.Style.STROKE);
        //設定線的寬度
        mPaintSys.setStrokeWidth(coordinateSystemSize);
        mPaintSys.setColor(coordinateSystemColor);
        mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setColor(Color.WHITE);
        mPaintText.setTextSize(30);
        mPaintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定畫線
        mPaintLine.setStyle(Paint.Style.STROKE);
        //設定線的寬度
        mPaintLine.setStrokeWidth(lineSize);
        //設定畫筆的顏色
        mPaintLine.setColor(lineColor);
        mPaintDash = new Paint();
        mPaintDash.setStyle(Paint.Style.STROKE);
        mPaintDash.setStrokeWidth(dashSize);
        mPaintDash.setColor(dashColor);
        mPaintDash.setPathEffect(new DashPathEffect(new float[]{10,10},0));

        mXBound = new Rect();
        mYBound = new Rect();

        invalidate();

    }

    public ChartView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //獲取屬性值
        getAttrs(context,attrs);
        InitPaint();
    }
    //獲取設定的屬性
    private void getAttrs(Context context,AttributeSet attrs) {

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ChartView);


        //座標系顏色
        coordinateSystemColor = ta.getColor(R.styleable.ChartView_coordinateSystemColor, Color.RED);
        coordinateSystemSize = ta.getDimension(R.styleable.ChartView_coordinateSystemLineSize, 3f);


        //折線顏色
        lineColor = ta.getColor(R.styleable.ChartView_lineColor, Color.BLACK);
        lineSize = ta.getDimension(R.styleable.ChartView_lineSize, 2f);


        //折線上座標點顏色
        lineColorPoint = ta.getColor(R.styleable.ChartView_linePointColor, Color.RED);
        //折線上座標點的半徑
        lineColorPointRadius = ta.getDimension(R.styleable.ChartView_linePointRadius,6f);


        //刻度點顏色
        scalePointColor = ta.getColor(R.styleable.ChartView_scalePointColor, Color.RED);
        //刻度點半徑
        scalePointRadius = ta.getDimension(R.styleable.ChartView_scalePointRadius, 6);

        //設定是否顯示虛線
        isShowDash = ta.getBoolean(R.styleable.ChartView_showDash,false);

        dashSize = ta.getDimension(R.styleable.ChartView_setDashSize,2f);

        dashColor = ta.getColor(R.styleable.ChartView_setDashColor, Color.WHITE);

        xScale = ta.getInt(R.styleable.ChartView_setXScale,5);
        yScale = ta.getInt(R.styleable.ChartView_setYScale,5);

        ta.recycle();


        Log.i("wk","coordinateSystemColor:"+ coordinateSystemColor +"\n coordinateSystemSize:"+ coordinateSystemSize +"\n"+"lineColor:"+ lineColor +"\n"+"lineSize:"+ lineSize);




    }

    public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        getAttrs(context,attrs);
        InitPaint();

    }


    //測量view
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));




    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        //獲取當前View的寬高
        mViewWidth = w;
        mViewHeight = h;

        Log.i("wk","寬度："+w);
        Log.i("wk","高度："+h);

    }

    //繪製
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //繪製X軸Y軸 以及原點
        canvas.drawLine(Margin,mViewHeight-Margin, Margin,5, mPaintSys);

        canvas.drawLine(Margin,mViewHeight-Margin,mViewWidth-5,mViewHeight-Margin, mPaintSys);

        //繪製原點
        canvas.drawCircle(Margin,mViewHeight-Margin,scalePointRadius,mPaintSysPoint);

        //

        /**
         * 計算兩個刻度之間的間距：
         *
         *     1.刻度的個數 = 傳入座標最大的座標點/座標軸間距
         *     2.兩個刻度之間的間距 = 螢幕的寬或高 /刻度的個數
         *
         */


        int num_x = X_MAX/xScale; //x軸上需要繪製的刻度的個數
        mScreenXdistance = (mViewWidth- Margin *2)/(num_x*1f);

        Log.i("wk","需要繪製的刻度個數==>"+num_x+"兩個刻度間間隔："+ mScreenXdistance);

        int num_y = Y_MAX/yScale;
        mScreenYdistance = (mViewHeight-Margin*2)/(num_y*1f);
        Log.i("wk","需要繪製的刻度個數==>"+num_x+"兩個刻度間間隔："+ mScreenXdistance);


        //繪製 X,y軸刻度標記
        for(int i=0;i<pointList.size();i++){

            canvas.drawCircle(Margin +(i* mScreenXdistance),mViewHeight-Margin,scalePointRadius,mPaintSysPoint);

            canvas.drawCircle(Margin,mViewHeight-Margin-(i* mScreenYdistance),scalePointRadius,mPaintSysPoint);

            //計算刻度字型的寬高
            String index_x = String.valueOf(i*xScale);
            String index_y = String.valueOf(i*yScale);
            mPaintText.getTextBounds(index_x,0,index_x.length(),mXBound);
            mPaintText.getTextBounds(index_y,0,index_x.length(),mYBound);
            int indexWidth_x = mXBound.width();
            int indexHeight_x = mXBound.height();
            int indexWidth_y = mYBound.width();
            int indexHeight_y = mYBound.height();

            Log.i("wk","字型的寬度："+indexWidth_x+"字型的高度："+indexHeight_x);
            canvas.drawText(index_x, Margin +(i* mScreenXdistance),mViewHeight-Margin+indexHeight_x+indexHeight_x/2,mPaintText);
            if(i!=0) {
                canvas.drawText(index_y, Margin - indexHeight_y-indexWidth_y/2, mViewHeight - Margin - (i * mScreenYdistance), mPaintText);
            }

        }

        /**
         * 繪製折線
         */
        Point LastPoint = new Point(); //記錄上一個座標點
        LastPoint.x = Margin;
        LastPoint.y = mViewHeight-Margin;

        for(int i=1;i<pointList.size();i++){


            /**
             * 計算繪製點的座標位置
             * 繪製點的座標 =  (傳入點的的最大的xy座標/座標軸上的間隔） * 座標間隔對應的螢幕上的間隔
             */
//            canvas.drawCircle(LastPoint.x,LastPoint.y,4f,mPaintPoint);
            //計算出脫離座標系的點所處的位置
            float point_x = (pointList.get(i).x/(xScale*1f))* mScreenXdistance;
            float point_y = (pointList.get(i).y/(yScale*1f))* mScreenYdistance;

            //座標系內的點的位置

            float startX = LastPoint.x;
            float startY = LastPoint.y;

            float endX = Margin +point_x;
            float endY = mViewHeight-Margin-point_y;

            //需要計算此處


            canvas.drawLine(startX,startY,endX,endY,mPaintLine);

            //記錄上一個座標點的位置
            LastPoint.x = (int) endX;
            LastPoint.y = (int) endY;


            if(isShowDash) {
                //繪製橫向虛線
                canvas.drawLine(Margin, mViewHeight - Margin - point_y -lineColorPointRadius/2, Margin + point_x - lineColorPointRadius/2, mViewHeight - Margin - point_y -lineColorPointRadius/2, mPaintDash);
                //繪製豎向虛線
                canvas.drawLine(LastPoint.x, LastPoint.y, LastPoint.x, mViewHeight - Margin - lineColorPointRadius, mPaintDash);
            }

            canvas.drawCircle(LastPoint.x, LastPoint.y, lineColorPointRadius, mPaintLinePoint);

        }


    }

    //測量view高度
    private int measureHeight(int heightMeasureSpec) {

        int result = 0;

        int specSize = MeasureSpec.getSize(heightMeasureSpec); //獲取高的高度 單位 為px

        int specMode = MeasureSpec.getMode(heightMeasureSpec);//獲取測量的模式

        //如果是精確測量，就將獲取View的大小設定給將要返回的測量值
        if(specMode == MeasureSpec.EXACTLY){

            Log.i("wk","高度:精確測量 + specSize:==>"+specSize);

            result = specSize;

        }else{

            Log.i("wk","高度:UNSPECIFIED + specSize:==>"+specSize);

            result = 400;

            //如果設定成wrap_content時，給高度指定一個值
            if(specMode == MeasureSpec.AT_MOST){

                Log.i("wk","高度:最大值模式 + specSize:==>"+specSize);

                result = Math.min(result,specSize);

            }
        }



        return result;
    }

    //測量view寬度
    private int  measureWidth(int widthMeasureSpec) {


        int result = 0;

        int specSize = MeasureSpec.getSize(widthMeasureSpec); //獲取高的高度

        int specMode = MeasureSpec.getMode(widthMeasureSpec);//獲取測量的模式

        //如果是精確測量，就將獲取View的大小設定給將要返回的測量值
        if(specMode == MeasureSpec.EXACTLY){

            Log.i("wk","寬度:精確測量 + specSize:==>"+specSize);

            result = specSize;

        }else{

            Log.i("wk","寬度:UNSPECIFIED + specSize:==>"+specSize);

            result = 400;
            //如果設定成wrap_content時，給高度指定一個值
            if(specMode == MeasureSpec.AT_MOST){

                Log.i("wk","寬度:最大值模式 + specSize:==>"+specSize);

                result = Math.min(result,specSize);
            }
        }

        return result;
    }
}

attrs.xml
自定義屬性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ChartView">
        <!--設定座標系的顏色-->
        <attr name="coordinateSystemColor" format="color" />
        <!--設定座標系線條的尺寸-->
        <attr name="coordinateSystemLineSize" format="dimension" />

        <!--設定刻度點的顏色-->
        <attr name="scalePointColor" format="color" />
        <!--設定刻度點的半徑-->
        <attr name="scalePointRadius" format="dimension" />

        <!--設定折線的顏色-->
        <attr name="lineColor" format="color" />
        <!--設定著折線的寬度-->
        <attr name="lineSize" format="dimension" />

        <!--設定折線點的顏色-->
        <attr name="linePointColor" format="color" />
        <!--設定折線點的半徑-->
        <attr name="linePointRadius" format="dimension" />

        <!--設定是否顯示虛線-->
        <attr name="showDash" format="boolean" />
        <attr name="setDashSize" format="dimension"/>
        <attr name="setDashColor" format="color"/>

        <!--設定座標軸上刻度的間隔-->
        <attr name="setXScale" format="integer" />
        <attr name="setYScale" format="integer" />


    </declare-styleable>


</resources>

activity_main.xml

    <com.merpyzf.studymultimedia.ChartView
        android:id="@+id/myChartView"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:linePointColor="@color/colorAccent"
        app:scalePointColor="#f76"
        app:linePointRadius="5dp"
        app:lineColor="#fff600"
        app:lineSize="2dp"
        app:coordinateSystemColor="#000000"
        app:coordinateSystemLineSize="2dp"
        app:scalePointRadius="6dp"
        app:setDashSize="1dp"
        app:showDash="true"
        />

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private MyService.MyBinder myBinder;
    private ChartView MyChartView;
    private ArrayList<Point> pointList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MyChartView = (ChartView) findViewById(R.id.myChartView);
        Random random = new Random();
        pointList = new ArrayList<Point>();

        for(int i=0;i<=10;i++){
            Point p = new Point(i*5,random.nextInt(30));
            pointList.add(p);
        }

        //給ChartView設定座標
        MyChartView.setPoint(pointList);

    }
}

後面要花一段時間仔細的研究一下自定義View的知識，當然上面的這個折線圖只是腦子一熱敲出來的，不具備實用能力(⊙o⊙)…

量變引起質變

撒花 撒花 ^^O(∩∩)O哈哈~