1. 程式人生 > >自定義View,畫折線圖

自定義View,畫折線圖

最近學到畫折線圖,實現出來了,現在把程式碼貼出來,給大家點評,也給自己做個備忘

1,xml檔案中:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="@drawable/background"   >

    <com.example.linechartdemo.ChartView
        android:id="@+id/chartView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
</LinearLayout>
2,ChartView類中微笑
package com.example.linechartdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class ChartView extends View{
	private int mXPoint = 100;//原點的X軸座標
	private int mYPoint = 460;//原點的Y軸座標
	private int mXScale = 45;//X軸的刻度長度
	private int mYScale = 50;//Y軸的刻度長度
	public int mXLength = 300;//X軸的長度
	private int mYLength = 300;//Y軸的長度
	private String[] mXLabel = null;//X軸上的刻度
	private String[] mYLabel = null;//Y軸上的刻度
	private String[] mData = null;//需要展示的資料
	private String mTitle = null; 

	public void SetInfo(String[] mXLable, String[] mYLable,String[] AllData,String strTitle) {
		mXLabel = mXLable;
		mYLabel = mYLable;
		mData = AllData;
		mTitle = strTitle;
	}
	public ChartView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
	}

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

	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		Paint paint = new Paint();
		paint.setStyle(Paint.Style.STROKE);
		paint.setAntiAlias(true);//去鋸齒
		paint.setColor(Color.DKGRAY);
		paint.setTextSize(12);
		//設定Y軸
		canvas.drawLine(mXPoint, mYPoint, mXPoint, mYPoint-mYLength, paint);
		//設定Y軸上的刻度顯示(如果沒有for迴圈,將只會是一個Y軸的直線)
		for(int i = 0;i*mYScale<mYLength;i++){
			//畫刻度線
			canvas.drawLine(mXPoint, mYPoint-i*mYScale, mXPoint+5, mYPoint-i*mYScale, paint);//刻度
			try {
				//畫軸上的刻度值
				canvas.drawText(mYLabel[i], mXPoint-24, mYPoint-i*mYScale+5,paint);//刻度
			} catch (Exception e) {
				// TODO: handle exception
			}
		}
		canvas.drawLine(mXPoint, mYPoint-mYLength, mXPoint-3, mYPoint-mYLength+6, paint);//箭頭
		canvas.drawLine(mXPoint, mYPoint-mYLength, mXPoint+3, mYPoint-mYLength+6, paint);
		//設定X軸
		canvas.drawLine(mXPoint, mYPoint, mXPoint+mXLength, mYPoint, paint);//畫軸線
		for(int i = 0;i*mXScale<mXLength;i++){
			//畫刻度
			canvas.drawLine(mXPoint+i*mXScale, mYPoint, mXPoint+i*mXScale, mYPoint - 5, paint);
			try {
				//畫刻度值
				canvas.drawText(mXLabel[i], mXPoint+i*mXScale- 15, mYPoint+20, paint);
			} catch (Exception e) {
				// TODO: handle exception
			}
		}
		canvas.drawLine(mXPoint+mXLength, mYPoint, mXPoint+mXLength-6, mYPoint-3, paint);//箭頭
		canvas.drawLine(mXPoint+mXLength, mYPoint, mXPoint+mXLength-6, mYPoint+3, paint);
		for(int i = 0;i*mXScale<mXLength;i++){
		//資料值(兩點確定一條直線)
		if(i>0&&YCoord(mData[i-1])!=-999&&YCoord(mData[i])!=-999)  //保證有效資料
			//畫折線
			canvas.drawLine(mXPoint+(i-1)*mXScale, YCoord(mData[i-1]), mXPoint+i*mXScale, YCoord(mData[i]), paint);
			paint.setColor(Color.RED);
		//畫兩線之間的轉折點
			canvas.drawCircle(mXPoint+i*mXScale,YCoord(mData[i]), 2, paint);
			//設定圓點為實心的(這句話如果放在上面的任何地方,後面只要用到paint,顏色都會是紅色)
			paint.setStyle(Paint.Style.FILL);
			
		}
		
		//設定標題的內容,位置,字型大小
		paint.setTextSize(16);
		canvas.drawText(mTitle, 200, 150, paint);
	}
	private int YCoord(String y0)  //計算繪製時的Y座標,無資料時返回-999
	{
		int y;
		try
		{
			y=Integer.parseInt(y0);
		}
		catch(Exception e)
		{
			return -999;    //出錯則返回-999
		}
		try
		{
			return mYPoint-y*mYScale/Integer.parseInt(mYLabel[1]);
		}
		catch(Exception e)
		{
		}
		return y;
	}
}

3,MainActivity中:吐舌頭
package com.example.linechartdemo;


import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ChartView myView = new ChartView(this);
  myView = (ChartView) findViewById(R.id.chartView1);
  myView.SetInfo(
     new String[]{"第1周","第2周","第3周","第4周","第5周","第6周","第7周"},   //X軸刻度
        new String[]{"","50","100","150","200","250"},   //Y軸刻度
        new String[]{"15","32","134","211","55","40","66"},  //資料
        "歷史記錄");
 }


}