android 非框架 分时图和K线图分时图（一）

去年公司的项目要上分时图和K线图一直没有机会总结，今天赶紧写出来。

基础X、Y轴的绘制

这里用的是基于View的绘制，首先说View的结构，分别是最下层的X、Y轴坐标，中间层的数据绘图，和最上层的十字坐标。最初的设想是能分开刷新，比如单独刷新数据层或者十字坐标层。但是发现这个只在android4.0以后能实现。但是4.0以下的版本调用一个view的刷新机制invalidate()时其他的view也会刷新，这就失去了单独刷新节约资源的最初设想。不过我还是按照最初的设想开发了，当然确实可以3层合一的开发。这里记述的是3层分别制作的过程。

说明，width的大小为左小右大，height上小下大，请注意y轴坐标设置别弄反了。

一、TimeShareViewAxisPortrait（竖屏分数图XY轴图层绘制）

public class TimeShareViewAxisPortrait extends View
{
	private Paint paint = new Paint();
//	private float width = 0 , height = 0;
	
	public TimeShareViewAxisPortrait(Context context)
	{
		super(context);
	}

	public TimeShareViewAxisPortrait(Context context, AttributeSet attrs)
	{
		super(context, attrs);
	}

	public TimeShareViewAxisPortrait(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
	}
	
	/**
	 * 显示图形界面
	 */
	@Override
	public void onDraw(Canvas canvas)
	{
		super.onDraw(canvas);
		if(Tool_Line.view_width==0 || Tool_Line.view_height ==0)
		{
			//获取宽高
			Tool_Line.view_width = getWidth(); 
			Tool_Line.view_height= getHeight();
			Tool_Line.initBoundary(); //设置边界
		}
		paint.setAntiAlias(true); //抗锯齿
		paint.setColor(Color.GRAY);//颜色
		paint.setStrokeWidth(1);//画笔宽度
		draw_Y_Axle(canvas);//绘制Y轴
		draw_X_Axle(canvas);//绘制X轴
		drawText(canvas);//写字
	}
	
	/**
	 * 绘制Y轴 
	 * @param canvas
	 */
	private void draw_Y_Axle(Canvas canvas)
	{
		float fifth = Tool_Line.view_width/5;
		//绘制Y轴一条线位于 Tool.startLine_timeshare_port的位置
		canvas.drawLine(Tool.startLine_timeshare_port, 0,Tool.startLine_timeshare_port, Tool.bottomLine_timeshare_port, paint);
		//绘制Y轴一条线位于 fifth的位置
		canvas.drawLine(fifth,Tool.bottomLine_timeshare_port+5,fifth,Tool_Line.view_height-5, paint);
		//绘制Y轴一条线位于 Tool.startLine_timeshare_port的位置 （一条小短线）
		canvas.drawLine(Tool.startLine_timeshare_port,Tool.bottomLine_timeshare_port+5,Tool.startLine_timeshare_port,Tool_Line.view_height-5, paint);
		//每隔一个fifth的距离就绘制一条平行于Y轴的竖线 底部的5条短线
		for(int i=1;i<6;i++)
		{
			canvas.drawLine(fifth+i*(Tool.stopLine_timeshare_port-fifth)/5, Tool.bottomLine_timeshare_port+6, fifth+i*(Tool.stopLine_timeshare_port-fifth)/5, Tool_Line.view_height-6, paint);
		}
	}
	/**
	 * 绘制X轴
	 * @param canvas
	 */
	private void draw_X_Axle(Canvas canvas)
	{
		float total = Tool.bottomLine_timeshare_port+Tool.topLine_timeshare_port;
		float diff = Tool.bottomLine_timeshare_port-Tool.topLine_timeshare_port;
		//底部横线
		canvas.drawLine(0,Tool.bottomLine_timeshare_port, Tool_Line.view_width,Tool.bottomLine_timeshare_port , paint);  //横坐标轴
		//中间的横线
		canvas.drawLine(0, (float)0.5*total, Tool_Line.view_width,(float)0.5 * total , paint);  //横坐标轴
		//虚线
		PathEffect effects = new DashPathEffect(new float[]{5,5,5,5},1);
		Paint paint1 = new Paint();
		paint1.setAntiAlias(true);
		paint1.setColor(Color.WHITE);
		paint1.setStrokeWidth(1);
		paint1.setPathEffect(effects);
		paint1.setStyle(Paint.Style.STROKE);
		//绘制6条等分横线
		for(int i = 0;i<6;i++)
		{
			if(i!=3)
			{
				Path path = new Path();
				path.moveTo(0,Tool.topLine_timeshare_port + i*diff/6);
				path.lineTo(Tool_Line.view_width,Tool.topLine_timeshare_port + i*diff/6);    
				canvas.drawPath(path, paint1);
			}
		}
	}
	
	/**
	 * 绘制文本
	 * @param canvas
	 */
	private void drawText(Canvas canvas)
	{
		Paint paint = new Paint();
		paint.setTextSize(Tool.textSize);
		paint.setAntiAlias(true);
		paint.setColor(Color.GRAY);
		paint.setStrokeWidth(1);
		paint.setTextAlign(Align.RIGHT);
		//绘制文本
		canvas.drawText(Tool.times[0],Tool.startLine_timeshare_port,Tool_Line.view_height-5, paint);
		canvas.drawText(Tool.times[1],Tool_Line.view_width/5,Tool_Line.view_height-5, paint);
		for(int i=2;i<7;i++)
		{
			canvas.drawText(Tool.times[i],Tool_Line.view_width/5+(i-1)*(Tool.stopLine_timeshare_port-Tool_Line.view_width/5)/5,Tool_Line.view_height-7, paint);
		}
	}
}

这里补充Tool里的一些方法

	/**
	 * 初始化边界
	 */
	public static void initBoundary()
	{
		//设置 底部界限 初始线 结束线 和顶部的界线 分别是4条边界线
		Tool.bottomLine_timeshare_port = 822*Tool_Line.view_height/892;
		Tool.topLine_timeshare_port = 34*Tool_Line.view_height/892;
		Tool.startLine_timeshare_port = 98*Tool_Line.view_width/800;
		Tool.stopLine_timeshare_port = 790*Tool_Line.view_width/800;
	}

public static final String[] times = {"6:00","8:00","12:00","16:00","20:00","00:00","4:00"}; //横坐标时间 这是上边绘制文本的内容

注 ：如果在copy时有一些参数没有，导致无法运行，看英文名应该能猜出来是什么 多是一些宽高的临时变量

在layout的xml中的应用

 <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:layout_marginRight="5dp">

        <com.chart.view.TimeShareViewAxisPortrait
            android:id="@+id/timeshareaxis"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <com.control.chart.view.TimeShareViewPortrait
            android:id="@+id/timeshareview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

        <com.control.chart.view.TimeShareViewCrossPortrait
            android:id="@+id/timesharecross"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </FrameLayout>