自定义View-柱状图和折线图的合体

前端时间，工作中有个需求，柱状图和折线图合体，左右两个坐标分别表示柱状图和折线图，是不是看的有点抽象？没关系，先上个效果图来看一下

左边坐标用来表示柱状图的高度，右边坐标用来表示折线图的点的位置。

然后触摸柱子需要出现一条标识线和一个小卡片，如下图：

图中柱子中间有一根白色的标识线，手势滑动标识线和小卡片需要跟着改变。

虽然网上很多强大的图表库，不过由于时间关系，需要去改别人代码，不如自己动手来的快，记录下来，也给需要的朋友作个小参考。

属性动态设置

各种属性还是建议动态赋值，以后修改起来也方便很多

class ChartParam {        private int verNumberSpace;        private int horNumberSpace;        private int numberSize;        private int rectangleWidth;        private int circleRadius; // 小圆半径        private int baseLineWidth;        private int screenWidth;        private int sideSpace; // 距两边边距        private int leftNumSpace;// 左边数字终点距y轴的距离        private int leftToBaseLine; // 左边数字终点距基线的距离        private int baseLineToYear; // 基线到年份的距离        private int baseLineToLeft;        private int firstRectCenterX; // 第一个矩形中点距边界距离        private int firstRectLeft; // 第一个矩形left属性        private int firstRextRight;        private int rectSpace;        private int overRectHeight;  // 高出相对柱状图的高度        private int cardToBaseLine; // 提示相对基线的高度        private int cardToRect; // 提示相对柱状图的边距        private int roundRectAngle; // card圆角大小        private int cardWidth;// card宽        private int cardHeight;// card高        private int card_textMarginTop;        private int card_textMarginLeft;        private int card_text_1to2;// 第一行文字距第二行文字距离        private int card_text_2to3; // 第二行文字距第三行文字距离        private int card_text_1toRect;// 第一行文字的x距圆角矩形的距离        private int card_text_2toRect;//        private int card_text_3toRect;//    }

然后在构造函数中进行初始化赋值

private void init() {        mContext = getContext();        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mChartParam = new ChartParam();        mChartParam.baseLineWidth = getWidth(mContext) - dpToPx(mContext, 38 * 2);        mChartParam.screenWidth = dpToPx(mContext, 375);        mChartParam.horNumberSpace = dpToPx(mContext, 28);        mChartParam.verNumberSpace = dpToPx(mContext, 23);        mChartParam.rectangleWidth = dpToPx(mContext, 12);        mChartParam.circleRadius = dpToPx(mContext, 2);        mChartParam.numberSize = dpToPx(mContext, 11);        mChartParam.sideSpace = dpToPx(mContext, 15);        mChartParam.leftNumSpace = dpToPx(mContext, 30);        mChartParam.leftToBaseLine = dpToPx(mContext, 8);        mChartParam.baseLineToYear = dpToPx(mContext, 5);        mChartParam.baseLineToLeft = dpToPx(mContext, 38);        mChartParam.firstRectCenterX = dpToPx(mContext, 79);        mChartParam.firstRectLeft = dpToPx(mContext, 73);        mChartParam.firstRextRight = dpToPx(mContext, 85);        mChartParam.rectSpace = dpToPx(mContext, 40);        mChartParam.overRectHeight = dpToPx(mContext, 20);        mChartParam.cardToBaseLine = dpToPx(mContext, 58);        mChartParam.cardToRect = dpToPx(mContext, 8);        mChartParam.roundRectAngle = dpToPx(mContext, 2);        mChartParam.cardWidth = dpToPx(mContext, 127);        mChartParam.cardHeight = dpToPx(mContext, 63);        mChartParam.card_textMarginTop = dpToPx(mContext, 8);        mChartParam.card_textMarginLeft = dpToPx(mContext, 8);        mChartParam.card_text_1to2 = dpToPx(mContext, 8);        mChartParam.card_text_2to3 = dpToPx(mContext, 6);        mChartParam.card_text_1toRect = dpToPx(mContext,20);        mChartParam.card_text_2toRect = dpToPx(mContext,38);        mChartParam.card_text_3toRect = dpToPx(mContext,55);        rectStartX = new float[5];        rectStopX = new float[5];        rectStopY = new float[5];        touchSlop = ViewConfiguration.get(mContext).getScaledTouchSlop();    }

具体的值看大家的需求自己定义啦。

---

下面开始画具体的图了。

左侧坐标栏

 private void drawLeftNumber(Canvas canvas) {        for (int i = 0; i < 6; i++) {            setPaint(NUMBER_TEXT);            String text = ((5.0 - i) + "").equals("0.0") ? "0" : 5.0 - i + "";            float number = Float.parseFloat(text);            int textWidth = (int) mPaint.measureText(text);            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();            canvas.drawText(text, mChartParam.leftNumSpace - textWidth,                    mChartParam.verNumberSpace * i + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) * (i + 1),                    mPaint);            if (number == 0 || Math.abs(number) <= 0.2) {                baseNumber = number + "";                // 该值是基线相关数字最上面的值                baseLineY = mChartParam.verNumberSpace * i + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) * i;            }            if (i == 5) {                yearY = mChartParam.verNumberSpace * i + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) * (i + 1);            }        }    }

这里需要注意一点的是drawText()绘制文字的起点是差不多文字左下角的位置（这里只是差不多，其实不完全准确，这里我忽略了那小差别）。由于需求是数字靠右对齐，所以在计算文字的起点坐标的时候，需要用文字靠右的距离减去文字的宽度，也就是x轴坐标：

mChartParam.leftNumSpace - textWidth,

文字宽度的计算如下：

int textWidth = (int) mPaint.measureText(text);

然后是文字y轴计算，这里需要计算文字的高度，关于文字的高度问题参考下面这张图：

（注：copy from http://hencoder.com/ui-1-3/）

---

基线

基线也就是底部的那根线了 ，这个就比较简单了

 /**     * 基线     *     * @param canvas     */    private void drawBaseLine(Canvas canvas) {        setPaint(BASE_LINE);        canvas.drawLine(mChartParam.baseLineToLeft, baseLineY - mChartParam.baseLineToYear, mChartParam.baseLineToLeft + mChartParam.baseLineWidth, baseLineY - mChartParam.baseLineToYear, mPaint);    }

---

右侧坐标栏

右侧坐标栏的绘制和左侧是一样的，值得注意的点也只有是文字的高度

/**     * 右边数字栏     *     * @param canvas     */    private void drawRightNumber(Canvas canvas) {        for (int i = 0; i < 6; i++) {            setPaint(NUMBER_TEXT);            String text = ((100 - 20 * i) + "").equals("0") ? "0" : (100 - 20 * i + "%");            int textWidth = (int) mPaint.measureText(text);            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();            canvas.drawText(text, getWidth(mContext) - mChartParam.sideSpace - textWidth,                    mChartParam.verNumberSpace * i + (Math.abs(fontMetrics.ascent) + fontMetrics.descent) * (i + 1),                    mPaint);        }    }

---

年份

年份的绘制也很简单，也就是文字绘制，由于标注图有给出各种距离，所以绘制起来也很顺利

/**     * 年份     *     * @param canvas     */    private void drawYear(Canvas canvas) {        setPaint(NUMBER_TEXT);        Calendar calendar = Calendar.getInstance();        int year = calendar.get(Calendar.YEAR);        for (int i = 0; i < 5; i++) {            String text = year - (4 - i) + "";            int textWidth = (int) mPaint.measureText(text);            canvas.drawText(text, mChartParam.firstRectCenterX - textWidth / 2 + (textWidth + mChartParam.horNumberSpace) * i, yearY, mPaint);            rectLeft = mChartParam.firstRectCenterX - textWidth / 2 + (textWidth + mChartParam.horNumberSpace) * i + textWidth / 2 - dpToPx(mContext, 6);        }    }

---

柱状图

柱状图的话，只要你知道第一个柱形图的x轴的位置，柱形的宽度，和个柱形之间的距离，也和很顺利

/**     * 柱状图     *     * @param canvas     */    private void drawRectangle(Canvas canvas) {        setPaint(RECTANGLE);        for (int i = 0; i < 5; i++) {            canvas.drawRect(mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i,                    dpToPx(mContext, 60) - i * 2,                    mChartParam.firstRextRight + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i,                    baseLineY - mChartParam.baseLineToYear, mPaint);            rectStartX[i] = mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i;            rectStopX[i] = mChartParam.firstRextRight + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i;            rectStopY[i] = dpToPx(mContext, 60) - i * 2;        }    }

这里的：

 rectStartX[i] = mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i;            rectStopX[i] = mChartParam.firstRextRight + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i;            rectStopY[i] = dpToPx(mContext, 60) - i * 2;

是为了记录柱形的坐标，因为后面需要在触摸柱形图范围内显示标识线。

---

点和折线

接下里是先把点绘制出来，然后再连接起来，形成折线

/**     * 点和折线     *     * @param canvas     */    private void drawPointAndLine(Canvas canvas) {        setPaint(BROKE_LINE);        for (int i = 0; i < 5; i++) {            canvas.drawCircle(mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i + mChartParam.rectangleWidth / 2,                    50 * i + 20, mChartParam.circleRadius, mPaint);            if (i != 4) {                float startX = mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * i + mChartParam.rectangleWidth / 2;                float stopX = mChartParam.firstRectLeft + (mChartParam.rectangleWidth + mChartParam.rectSpace) * (i + 1) + mChartParam.rectangleWidth / 2;                float startY = 50 * i + 20;                float stopY = 50 * (i + 1) + 20;                canvas.drawLine(startX, startY, stopX, stopY, mPaint);            }        }    }

两个点作为一条线的起点和终点。

---

标志线

前面在绘制矩形图的时候已经记录了各个矩形的坐标，所以这里标志线在每个柱形图的中间位置

/**     * 触摸柱状图时中间的竖线     * @param canvas     */    private void drawVerLine(Canvas canvas) {        if (touchRectPoi != -1) {            setPaint(CARD_LINE);            float lineX = rectStartX[touchRectPoi] + (rectStopX[touchRectPoi] - rectStartX[touchRectPoi]) / 2;            canvas.drawLine(lineX, baseLineY - mChartParam.baseLineToYear, lineX, rectStopY[touchRectPoi] - mChartParam.overRectHeight, mPaint);        }    }

---

小卡片

接下来是小卡片的展示，我这里的小卡片的位置是根据触摸 的柱状图的位置来确定的，前面三个是显示在柱状图的右边，后面两个是显示在柱状图的左边，但是卡片相对柱状图的距离和高度是确定的，小卡片的背景是用的一张图片。

/**     * 卡片     * @param canvas     */    private void drawTipsCard(Canvas canvas) {        // 圆角矩形与其中的文字        float roundRectLeft = 0, roundRectTop = 0;        if (touchRectPoi != -1) {            setPaint(ROUND_RECT);            float lineX = rectStartX[touchRectPoi] + (rectStopX[touchRectPoi] - rectStartX[touchRectPoi]) / 2;            if (touchRectPoi >= 0 && touchRectPoi < 3) {                // 显示在柱状图右边                canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.roundrect), lineX + mChartParam.cardToRect, baseLineY - mChartParam.cardToBaseLine - mChartParam.cardHeight,mPaint);                roundRectLeft = lineX + mChartParam.cardToRect;                roundRectTop = baseLineY - mChartParam.cardToBaseLine - mChartParam.cardHeight;            } else {                // 显示在柱状图左边                canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.roundrect), lineX - mChartParam.cardToRect - mChartParam.cardWidth, baseLineY - mChartParam.cardToBaseLine - mChartParam.cardHeight,mPaint);                roundRectLeft = lineX - mChartParam.cardToRect - mChartParam.cardWidth;                roundRectTop = baseLineY - mChartParam.cardToBaseLine - mChartParam.cardHeight;            }            // 文字            setPaint(CARD_TEXT);            String text1 = "2017年年报";            String text2 = "每股收益：1.83元";            String text3 = "同比增长率：-12.00%";            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();            canvas.drawText(text1, roundRectLeft + mChartParam.card_textMarginLeft,                    roundRectTop + mChartParam.card_text_1toRect, mPaint);            canvas.drawText(text2, roundRectLeft + mChartParam.card_textMarginLeft,                    roundRectTop + mChartParam.card_text_2toRect, mPaint);            canvas.drawText(text3, roundRectLeft + mChartParam.card_textMarginLeft,                    roundRectTop + mChartParam.card_text_3toRect, mPaint);        }    }

---

手势识别

标识线和小卡片是需要根据手势移动来改变展示的，所以这里需要监听onTouchEvent事件：

@Override    public boolean onTouchEvent(MotionEvent event) {        float touchX = event.getX();        float touchY = event.getY();        switch (event.getActionMasked()) {            case MotionEvent.ACTION_DOWN:                touchToRect(touchX);                lastX = touchX;                return true;            case MotionEvent.ACTION_MOVE:                float moveX = event.getX();                if (Math.abs(moveX - lastX) > touchSlop) {                    lastX = moveX;                    touchToRect(moveX);                }                break;            case MotionEvent.ACTION_UP:                break;        }        return super.onTouchEvent(event);    }

这里记录下手指触摸和手指滑动时的x值，然后判断是否在对应的柱状图的范围之内，来展示标识线和小卡片：

 /**     * 在柱状图范围     * @param x     */    private void touchToRect(float x) {        if (x >= rectStartX[0] && x <= rectStopX[0]) {            touchRectPoi = 0;            Log.d("wyk", "第一个柱状图");        } else if (x >= rectStartX[1] && x <= rectStopX[1]) {            touchRectPoi = 1;            Log.d("wyk", "第二个柱状图");        } else if (x >= rectStartX[2] && x <= rectStopX[2]) {            touchRectPoi = 2;            Log.d("wyk", "第三个柱状图");        } else if (x >= rectStartX[3] && x <= rectStopX[3]) {            touchRectPoi = 3;            Log.d("wyk", "第四个柱状图");        } else if (x >= rectStartX[4] && x <= rectStopX[4]) {            touchRectPoi = 4;            Log.d("wyk", "第五个柱状图");        }        invalidate();    }

最后记得要调用invalidate()方法进行重绘

---

写的比较匆忙，有问题可以在下面评论或者私我。

最后附上完整的项目地址：
https://github.com/upperLucky/CombineChartDemo