一步步搞定Android行情K线蜡烛图（带十字光标）

行情K线图也就是我们常说的烛炬图，是金融类软件里可以说必不可少的，不管日K, 周K,月K，还是分钟K,准确的来表达个股在1定时间内涨跌走势，K线图有着不可疏忽的作用，其绘制进程也是彰显1个程序员对自定义控件的熟练程度，特别是对Canvas的灵活应用，绘线，绘边框，及位置的选取，比例的分配，今天这个Demo,则1步步为你诠释。

按惯例，先看下今天要实现的效果，全部Demo地址为：http://download.csdn.net/detail/ming_147/9732963，也能够关注公众号后（评论区第1条评论扫描便可）回复“行情k线图”，源码就会发送给您，公众号有很多android及其它技术文章，还请大家承蒙关注。

相对来讲比较简单的1个小Demo,为何来讲简单呢，1数据是固定的，2，时间是固定的，相比较实际项目中来讲，这已相当的简单了，我们可以简单的分1下步骤模块，然后再依照顺次来进行实现，通过上面的图片，我们可以大致分为，边框，横线，纵线，底部时间，左侧刻度，柱状图（烛炬图），10字光标这几个部份，好，分好以后，我们就来1步步实现吧。

由于代码稍多，为显得代码结构清晰，我们可以先写1个父类，用于实现边框，横纵线，及底部时间，左部刻度的绘制，柱状图（烛炬图）及10字光标我们放在子类中实现。

自定义1个父类继承于View,实现其构造方法，在onMeasure方法里设置View的大小：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(measureWidth(widthMeasureSpec),
            measureHeight(heightMeasureSpec));
}

private int measureWidth(int measureSpec) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);//得到模式
    int specSize = MeasureSpec.getSize(measureSpec);//得到尺寸

    if (specMode == MeasureSpec.EXACTLY) {
        result = specSize;
    } else if (specMode == MeasureSpec.AT_MOST) {
        result = Math.min(result, specSize);
    }
    return result;
}

private int measureHeight(int measureSpec) {
    int result = 0;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if (specMode == MeasureSpec.EXACTLY) {
        result = specSize;
    } else if (specMode == MeasureSpec.AT_MOST) {
        result = Math.min(result, specSize);
    }
    return result;
}

这里简单对两个类型做下解释：

MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如：andorid:layout_width="50dip"，或为FILL_PARENT是，都是控件大小已肯定的情况，都是精确尺寸。

MeasureSpec.AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，控件大小1般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸便可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。

设置完大小以后，我们先在构造方法里初始化1些信息，比如背风景，画笔：

/**
 * 设置背风景及初始化画笔
 */
private void init() {
    setBackgroundColor(Color.parseColor("#222222"));
    mPaint = new Paint();
    mPaint.setStrokeWidth(1);
    mPaint.setStyle(Paint.Style.STROKE);
}

重写onDraw方法，并在方法内绘制相干信息。绘制边框，距离左上各位10，距离右侧为View宽度－10，距离底部为View高度－50：

private void drawBorder(Canvas canvas) {
    mPaint.setColor(Color.WHITE);
    Rect r = new Rect();
    r.left = 10;
    r.top = 10;
    r.right = this.getRight() - 10;
    r.bottom = this.getHeight() - 50;
    canvas.drawRect(r, mPaint);
}

绘制横线，由于要留出1段区域做刻度绘制，所以，距离左侧要有1段距离，这里我设置的100，所以每条横线的起始位置1定，都是100，由于边框的最右侧为View宽度－10，所以横线的终止位置也是1致，起始y的位置和终止y的位置应当1致，依照1定的距离等分开来，这里的lineSize是要分成几份，我定义的是4份，则每份的长度就为：（当前View的高度-距离底部的距离－距离上部的距离）／lineXSize：

private int lineXSize = 4;

private void drawXLine(Canvas canvas) {
    mPaint.setColor(Color.WHITE);
    float height = (this.getHeight() - 10f - 50f) / lineXSize;//平均分为几分
    for (int a = 0; a < lineXSize; a++) {
        float h = height * a + 10f;
        Log.i("BaseLine", h + "===");
        canvas.drawLine(100f, h, this.getRight() - 10f, h, mPaint);
    }
}

绘制纵线，其原理和绘制横线差不多，起始x的位置为距离左侧的距离既100，则每份的宽度就是，（当前View的宽度－距离左侧的距离－距离右侧的距离）／要分为几份，这里我定义的是lineYSize=3：

private int lineYSize = 3;

private void drawYLine(Canvas canvas) {
    mPaint.setColor(Color.WHITE);
    float width = (this.getRight() - 10f - 100f) / lineYSize;
    for (int a = 0; a < lineYSize; a++) {
        float w = width * a + 100f;
        canvas.drawLine(w, 10f, w, this.getHeight() - 50f, mPaint);
    }
}

绘制底部时间，times是自己定义的1个时间数组，其坐标位置和纵线类似，y值是固定不变的，x轴增加的距离和纵线1致：

private int[] times = {5, 6, 7, 8};

private void drawTimes(Canvas canvas) {
    mPaint.setColor(Color.parseColor("#FF00FF"));
    mPaint.setTextSize(24);
    float width = (this.getRight() - 10f - 100f) / lineYSize;
    for (int a = 0; a < lineYSize + 1; a++) {
        float w = width * a + 100f;
        if (a == lineYSize) {
            canvas.drawText(times[a] + "月", w - 30f, this.getHeight() - 25f, mPaint);
        } else {
            canvas.drawText(times[a] + "月", w - 15f, this.getHeight() - 25f, mPaint);
        }
    }
}

绘制Y轴价格刻度，价格刻度的绘制，就和绘制横线有点类似了，price是自己定义的1个刻度数组：

private float[] price = {260f, 240f, 220f};

private void drawYPrice(Canvas canvas) {
    mPaint.setColor(Color.WHITE);
    float height = (this.getHeight() - 10f - 50f) / lineXSize;//平均分为几分
    for (int a = 1; a < lineXSize; a++) {
        float h = height * a + 10f;
        canvas.drawText(price[a - 1] + "", 40f, h, mPaint);
    }
}

经过以上父 类中的绘制，基本的边框，横线，纵线，底部时间，左部价格刻度，就完成了，接下来就是柱状图和10字光标：

自定义1个view集成于父类，实现其构造方法，初始化1些信息，设置画笔为实心的：

private void init() {
    mPaint = new Paint();
    mPaint.setStrokeWidth(1);
    mPaint.setStyle(Paint.Style.FILL);
}

绘制烛炬图之前，我们需要初始化1些我们需要的数据，这里我定义了1个javaBean,里面我定义了1些数据，开盘，收盘，最高，最低，日期，实现其构造方法和get,set方法。

/**
 * 开盘价
 */
private float open;

/**
 * 最高价
 */
private float high;

/**
 * 最低价
 */
private float low;

/**
 * 收盘价
 */
private float close;

/**
 * 日期
 */
private int date;

javaBean实现以后，我们就能够添加摹拟数据了，毕竟不是真实的项目中，所以数据，只能自己去创造了，listData是自己定义存储数据的：

protected List<StockLineBean> listData = new ArrayList<>();

/**
 * 添加数据
 */
private void setLineData() {
    List<StockLineBean> list = new ArrayList<StockLineBean>();
    list.add(new StockLineBean(250, 251, 248, 250, 20170731));
    list.add(new StockLineBean(249, 252, 248, 252, 20170730));
    list.add(new StockLineBean(250, 251, 248, 250, 20170729));
    list.add(new StockLineBean(249, 252, 248, 252, 20170728));
    list.add(new StockLineBean(248, 250, 247, 250, 20170727));
    list.add(new StockLineBean(256, 256, 248, 248, 20170726));
    list.add(new StockLineBean(257, 258, 256, 257, 20170725));
    list.add(new StockLineBean(259, 260, 256, 256, 20170724));
    list.add(new StockLineBean(261, 261, 257, 259, 20170723));
    list.add(new StockLineBean(259, 260, 256, 256, 20170722));
    list.add(new StockLineBean(261, 261, 257, 259, 20170721));
    list.add(new StockLineBean(260, 260, 259, 259, 20170720));
    list.add(new StockLineBean(262, 262, 260, 261, 20170719));
    list.add(new StockLineBean(260, 262, 259, 262, 20170718));
    list.add(new StockLineBean( 生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠