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>

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

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