Android绘制动态折线图

所谓动态折线图，就是折线图能随着手指的滑动进行动态绘制，这里很定会产生动画效果。基于这个效果，这里使用SurfaceView进行制图。

实现步奏如下：

(1): 这里新建一个绘图ChartView，继承SurfaceView并实现SurfaceHolder.Callback , Runnable接口，主要绘图工作在子线程中完成。
(2):现实 SurfaceHolder.Callback接口的三个方法，并在 surfaceCreated中开启子线程进行绘图。
(3):重写onTouchEvent方法，在Move事件中，根据手指的滑动距离计算偏移量，具体实现请看代码。
(4): 这里的折线图的坐标值是随意添加的，可以在实际项目中根据需求自己添加。
(5):此例中有大量从集合中添加和删除元素，建议使用LinkedList来进行保存数据。

自定义ChartView：

public class ChartView extends SurfaceView implements SurfaceHolder.Callback , Runnable
{
private Context mContext;
private Paint mPaint;
private Resources res;
private DisplayMetrics dm;

private int canvasHeight;
private int canvasWidth;
private int bHeight = 0;
private int bWidth;
private boolean isMeasure = true;
private boolean canScrollRight = true;
private boolean canScrollLeft = true;

//y轴最大值
private int maxValue;
//y轴间隔值
private int averageValue;
private int marginTop = 20;
private int marginBottom = 80;

//曲线上的总点数
private Point[] mPoints;
//纵坐标值
private LinkedList<Double> yRawData;
//横坐标值
private LinkedList<String> xRawData;
//根据间隔计算出的每个X的值
private LinkedList<Integer> xList = new LinkedList<>();
private LinkedList<String> xPreData = new LinkedList<>();
private LinkedList<Double> yPreData = new LinkedList<>();

private LinkedList<String> xLastData = new LinkedList<>();
private LinkedList<Double> yLastData = new LinkedList<>();
private int spacingHeight;

private SurfaceHolder holder;
private boolean isRunning = true;
private int lastX;
private int offSet;
private Rect mRect;

private int xAverageValue = 0;

public ChartView(Context context)
{
 this(context , null);
}

public ChartView(Context context , AttributeSet attrs)
{
 super(context, attrs);
 this.mContext = context;
 initView();
}

private void initView()
{
 this.res = mContext.getResources();
 this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 dm = new DisplayMetrics();
 WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
 wm.getDefaultDisplay().getMetrics(dm);

xPreData.add("05-18");
 xPreData.add("05-17");
 xPreData.add("05-16");
 xPreData.add("05-15");
 xPreData.add("05-14");
 xPreData.add("05-13");

yPreData.add(4.53);
 yPreData.add(3.45);
 yPreData.add(6.78);
 yPreData.add(5.21);
 yPreData.add(2.34);
 yPreData.add(6.32);

xLastData.add("05-26");
 xLastData.add("05-27");
 xLastData.add("05-28");
 xLastData.add("05-29");
 xLastData.add("05-30");
 xLastData.add("05-31");

yLastData.add(2.35);
 yLastData.add(5.43);
 yLastData.add(6.23);
 yLastData.add(7.33);
 yLastData.add(3.45);
 yLastData.add(2.45);

holder = this.getHolder();
 holder.addCallback(this);
}

@Override
protected void onSizeChanged(int w , int h , int oldW , int oldH)
{
 if (isMeasure)
 {
  this.canvasHeight = getHeight();
  this.canvasWidth = getWidth();
  if (bHeight == 0)
  {
   bHeight = canvasHeight - marginBottom;
  }
  bWidth = dip2px(30);
  xAverageValue = (canvasWidth - bWidth) / 7;
  isMeasure = false;
 }
}

@Override
public void run()
{
 while (isRunning)
 {
  drawView();
  try
  {
   Thread.sleep(100);
  }
  catch (InterruptedException e)
  {
   e.printStackTrace();
  }
 }
}

private void drawView()
{
 Canvas canvas = holder.lockCanvas();
 canvas.drawColor(Color.WHITE);
 mPaint.setColor(res.getColor(R.color.color_f2f2f2));
 drawAllXLine(canvas);
 mRect = new Rect(bWidth - 3, marginTop - 5 ,
   bWidth + (canvasWidth - bWidth) / yRawData.size() * (yRawData.size() - 1) + 3, bHeight + marginTop + marginBottom);
 //锁定画图区域
 canvas.clipRect(mRect);
 drawAllYLine(canvas);

mPoints = getPoints();

mPaint.setColor(res.getColor(R.color.color_ff4631));
 mPaint.setStrokeWidth(dip2px(2.5f));
 mPaint.setStyle(Paint.Style.STROKE);
 drawLine(canvas);

mPaint.setStyle(Paint.Style.FILL);
 for (int i = 0 ; i < mPoints.length ; i++)
 {
  canvas.drawCircle(mPoints[i].x , mPoints[i].y , 5 , mPaint);
 }

holder.unlockCanvasAndPost(canvas);
}

//绘制折线图
private void drawLine(Canvas canvas)
{
 Point startP = null;
 Point endP = null;
 for (int i = 0 ; i < mPoints.length - 1; i++)
 {
  startP = mPoints[i];
  endP = mPoints[i + 1];
  canvas.drawLine(startP.x , startP.y , endP.x , endP.y , mPaint);
 }
}

//绘制所有的纵向分割线
private void drawAllYLine(Canvas canvas)
{
 for (int i = 0 ; i < yRawData.size() ; i++)
 {
  if (i == 0)
  {
   canvas.drawLine(bWidth, marginTop , bWidth, bHeight + marginTop , mPaint);
  }
  if (i == yRawData.size() - 1)
  {
   canvas.drawLine(bWidth + xAverageValue * i, marginTop , bWidth + xAverageValue * i , bHeight + marginTop , mPaint);
  }
  xList.add(bWidth + xAverageValue * i);
  canvas.drawLine(bWidth + xAverageValue * i + offSet, marginTop , bWidth + xAverageValue * i + offSet , bHeight + marginTop , mPaint);
  drawText(xRawData.get(i) , bWidth + xAverageValue * i - 30 + offSet, bHeight + dip2px(26) , canvas);

}
}

//绘制所有的横向分割线
private void drawAllXLine(Canvas canvas)
{
 for (int i = 0 ; i < spacingHeight + 1 ; i++)
 {
  canvas.drawLine(bWidth , bHeight - (bHeight / spacingHeight) * i + marginTop ,
    bWidth + xAverageValue * (yRawData.size() - 1) , bHeight - (bHeight / spacingHeight) * i + marginTop , mPaint);
  drawText(String.valueOf(averageValue * i) , bWidth / 2 , bHeight - (bHeight / spacingHeight) * i + marginTop, canvas);
 }
}

//绘制坐标值
private void drawText(String text , int x , int y , Canvas canvas)
{
 Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
 p.setTextSize(dip2px(12));
 p.setColor(res.getColor(R.color.color_999999));
 p.setTextAlign(Paint.Align.LEFT);
 canvas.drawText(text , x , y , p);
}

@Override
public void surfaceCreated(SurfaceHolder surfaceHolder)
{
 new Thread(this).start();
 Log.d("OOK" , "Created");
}

@Override
public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2)
{
 Log.d("OOK" , "Changed");
}

@Override
public void surfaceDestroyed(SurfaceHolder surfaceHolder)
{
 isRunning = false;
 try
 {
  Thread.sleep(500);
 }
 catch (InterruptedException e)
 {
  e.printStackTrace();
 }
}

@Override
public boolean onTouchEvent(MotionEvent event)
{
 int action = event.getAction();
 int rawX = (int) event.getX();
 switch (action)
 {
  case MotionEvent.ACTION_DOWN:
   lastX = rawX;
   break;
  case MotionEvent.ACTION_MOVE:
   int offsetX = rawX - lastX;
   if (xPreData.size() == 0 && offSet > 0)
   {
    offSet = 0;
    canScrollRight = false;
   }
   if (xLastData.size() == 0 && offSet < 0)
   {
    offSet = 0;
    canScrollLeft = false;
   }
   offSet = offSet + offsetX;
   if (offSet > xAverageValue && canScrollRight)
   {
    offSet = offSet ％ xAverageValue;
    xRawData.addFirst(xPreData.pollFirst());
    yRawData.addFirst(yPreData.pollFirst());
    xLastData.addFirst(xRawData.removeLast());
    yLastData.addFirst(yRawData.removeLast());
    canScrollLeft = true;
   }

if (offSet < -xAverageValue && canScrollLeft)
   {
    offSet = offSet ％ xAverageValue;
    xRawData.addLast(xLastData.pollFirst());
    yRawData.addLast(yLastData.pollFirst());
    xPreData.addFirst(xRawData.removeFirst());
    yPreData.addFirst(yRawData.removeFirst());
    canScrollRight = true;
   }
   lastX = rawX;
   break;
  case MotionEvent.ACTION_UP:
   break;
 }
 return true;
}

private Point[] getPoints()
{
 Point[] points = new Point[yRawData.size()];
 for (int i = 0 ; i < yRawData.size() ; i++)
 {
  int ph = bHeight - (int)(bHeight * (yRawData.get(i) / maxValue));

points[i] = new Point(xList.get(i) + offSet , ph + marginTop);
 }
 return points;
}

public void setData(LinkedList<Double> yRawData , LinkedList<String> xRawData , int maxValue , int averageValue)
{
 this.maxValue = maxValue;
 this.averageValue = averageValue;
 this.mPoints = new Point[yRawData.size()];
 this.yRawData = yRawData;
 this.xRawData = xRawData;
 this.spacingHeight = maxValue / averageValue;
}

private int dip2px(float dpValue)
{
 return (int) (dpValue * dm.density + 0.5f);
}
}

MainActivity代码：

public class MainActivity extends Activity
{
LinkedList<Double> yList;
LinkedList<String> xRawData;
ChartView chartView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main_activity);
 chartView = (ChartView) findViewById(R.id.chartView);

yList = new LinkedList<>();
 yList.add(2.203);
 yList.add(4.05);
 yList.add(6.60);
 yList.add(3.08);
 yList.add(4.32);
 yList.add(2.0);
 yList.add(5.0);

xRawData = new LinkedList<>();
 xRawData.add("05-19");
 xRawData.add("05-20");
 xRawData.add("05-21");
 xRawData.add("05-22");
 xRawData.add("05-23");
 xRawData.add("05-24");
 xRawData.add("05-25");

chartView.setData(yList , xRawData , 8 , 2);
}
}

此例页面布局比较简单，就是在主页面布局中添加一个自定义的ChartView即可，这里不再贴出。可能写得有点仓促，如果不妥之处，请大家批评指正，谢谢！

来源：https://blog.csdn.net/qq_33022345/article/details/52459232