美文网首页
Android ScrollChartView 可滑动的自动回滚

Android ScrollChartView 可滑动的自动回滚

作者: VictoryOver | 来源:发表于2018-12-03 15:54 被阅读0次

    1、效果展示

    file_chartview.gif

    2、核心代码

    • ScrollChartView 可滚动的自定义图表

    每次滚动完成 计算滚动的位置,使indicate居中并回调当前位置的position 供外部使用

        /**
         * 调整indicate,使其居中。
         */
        private void adjustIndicate() {
            if (!mOverScroller.isFinished()) {
                mOverScroller.abortAnimation();
            }
    
            int position = computeSelectedPosition();
            int scrollX = getScrollByPosition(position);
            scrollX -= getScrollX();
            this.position = position;
    
            if (scrollX != 0) {
                mOverScroller.startScroll(getScrollX(), getScrollY(), scrollX, 0);
                invalidateView();
            }
    
            //滚动完毕回调
            onScaleChanged(position);
        }
    

    根据传入的position 计算出每个indicate的位置,用于画图

    例如position = 5 * indicate总宽度(indicate宽度+indicatePadding间隔*2) = 80

    则该下标的位置为 left = 400 , right = left+indicate。

        /**
         * 计算indicate的位置
         */
        private void computeIndicateLoc(Rect outRect, int position) {
            if (outRect == null) {
                return;
            }
    
            int height = getHeight();
            int indicate = getIndicateWidth();
    
            int left = (indicate * position);
            int right = left + indicate;
            int top = getPaddingTop();
            int bottom = height - getPaddingBottom();
    
            if (isAlignTop()) {
                bottom -= mIndicateBottomPadding;
            } else {
                top += mIndicateBottomPadding;
            }
    
            outRect.set(left, top, right, bottom);
        }
    

    上面两个方法是调整indicate 并计算出他的位置,得到这些参数后,就可以开始画图了

        /**
         * 绘制网格线
         */
        private void drawGridLine(Canvas canvas) {
            for (int i = 0; i < mList.size(); i++) {
                computeIndicateLoc(mIndicateLoc, i);
                int left = mIndicateLoc.left + mIndicatePadding;
                int right = mIndicateLoc.right - mIndicatePadding;
                int bottom = getHeight() - mShadowMarginHeight;
                canvas.drawRect(left, 0, right, bottom, mGridPaint);
            }
        }
    

    this.position == position 判断当前的position与将要绘制的position是否一致

    是则改变其颜色并判断SDK版本是否大于21(支持画圆角的矩形)

        /**
         * 绘制指示标
         */
        private void drawIndicate(Canvas canvas, int position) {
            computeIndicateLoc(mIndicateLoc, position);
            int left = mIndicateLoc.left + mIndicatePadding;
            int right = mIndicateLoc.right - mIndicatePadding;
            int bottom = mIndicateLoc.bottom;
            int top = bottom - mIndicateHeight;
            if (this.position == position) {
                mIndicatePaint.setColor(mSelectedColor);
            } else {
                mIndicatePaint.setColor(mIndicateColor);
            }
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                canvas.drawRoundRect(left, top, right, bottom, 5, 5, mIndicatePaint);
            } else {
                canvas.drawRect(left, top, right, bottom, mIndicatePaint);
            }
        }
    

    同上,如果position一致则改变其大小和颜色

        /**
         * 绘制文字
         */
        private void drawText(Canvas canvas, int position, String text) {
            computeIndicateLoc(mIndicateLoc, position);
    
            if (this.position == position) {
                mTextPaint.setTextSize(mTextSelectedSize);
                mTextPaint.setColor(mSelectedColor);
            } else {
                mTextPaint.setTextSize(mTextSize);
                mTextPaint.setColor(mTextColor);
            }
    
            int x = (mIndicateLoc.left + mIndicateLoc.right) / 2;
            int y = mIndicateLoc.bottom + mIndicateBottomPadding - mTextBottomPadding;
    
            if (!isAlignTop()) {
                y = mIndicateLoc.top;
                mTextPaint.getTextBounds(text, 0, text.length(), mIndicateLoc);
                //增加一些偏移
                y += mIndicateLoc.top / 2;
            }
    
            canvas.drawText(text, x, y, mTextPaint);
        }
    

    绘制Line,支持折线和曲线,后续还会支持柱状图,曲线的绘制方式可以去了解下贝塞尔曲线。

      /**
        * 绘制折线图
        */
       private void drawLine(Canvas canvas) {
           Path path = new Path();
           path.moveTo(mList.get(0).x, mList.get(0).y);
           for (int i = 1; i < mList.size(); i++) {
               path.lineTo(mList.get(i).x, mList.get(i).y);
           }
           canvas.drawPath(path, mLinePaint);
       }
    
    
       /**
        * 绘制曲线图
        */
       private void drawScrollLine(Canvas canvas) {
           Point pStart;
           Point pEnd;
           Path path = new Path();
           for (int i = 0; i < mList.size() - 1; i++) {
               pStart = mList.get(i);
               pEnd = mList.get(i + 1);
               Point point3 = new Point();
               Point point4 = new Point();
               float wd = (pStart.x + pEnd.x) / 2;
               point3.x = wd;
               point3.y = pStart.y;
               point4.x = wd;
               point4.y = pEnd.y;
               path.moveTo(pStart.x, pStart.y);
               path.cubicTo(point3.x, point3.y, point4.x, point4.y, pEnd.x, pEnd.y);
               canvas.drawPath(path, mLinePaint);
           }
       }
    

    最后是绘制阴影,判断是折线还是曲线, 绘制阴影的方式跟绘制Line的方式差不多

    重点是path.close() 如果连接Path起点和终点能形成一个闭合图形

    则会将起点和终点连接起来形成一个闭合图形

        /**
         * 绘制阴影
         */
        private void drawShadow(Canvas canvas) {
            if (mLineType == LineType.ARC) {
                Point pStart;
                Point pEnd;
                Path path = new Path();
                for (int i = 0; i < mList.size() - 1; i++) {
                    pStart = mList.get(i);
                    pEnd = mList.get(i + 1);
                    Point point3 = new Point();
                    Point point4 = new Point();
                    float wd = (pStart.x + pEnd.x) / 2;
                    point3.x = wd;
                    point3.y = pStart.y;
                    point4.x = wd;
                    point4.y = pEnd.y;
                    path.moveTo(pStart.x, pStart.y);
                    path.cubicTo(point3.x, point3.y, point4.x, point4.y, pEnd.x, pEnd.y);
                    //减去文字和指示标的高度
                    path.lineTo(pEnd.x, getHeight() - mShadowMarginHeight);
                    path.lineTo(pStart.x, getHeight() - mShadowMarginHeight);
                }
                path.close();
                canvas.drawPath(path, mShadowPaint);
            } else {
                Path path = new Path();
                path.moveTo(mList.get(0).x, mList.get(0).y);
                for (int i = 1; i < mList.size(); i++) {
                    path.lineTo(mList.get(i).x, mList.get(i).y);
                }
                //链接最后两个点
                int index = mList.size() - 1;
                path.lineTo(mList.get(index).x, getHeight() - mShadowMarginHeight);
                path.lineTo(mList.get(0).x, getHeight() - mShadowMarginHeight);
                path.close();
                canvas.drawPath(path, mShadowPaint);
            }
        }
    
    • CircleIndicatorView 圆形的指示器

    这个自定义控件就比较简单,总共就三个重要的方法

    1、画圆 2、画线 3、设置圆的Y坐标

        private void drawCircle(Canvas canvas) {
            mCirclePaint.setColor(mCircleColor);
            canvas.drawCircle(getWidth() / 2, mCircleY, mCircleRadius, mCirclePaint);
            mCirclePaint.setColor(mCircleBackColor);
            canvas.drawCircle(getWidth() / 2, mCircleY, mCircleRadius / 2, mCirclePaint);
        }
    
        private void drawLine(Canvas canvas) {
            int left = getWidth() / 2;
            int bottom = getHeight();
            int top = 0;
            Path path = new Path();
            path.moveTo(left, top);
            path.lineTo(left, bottom);
            canvas.drawPath(path, mLinePaint);
        }
    
        public void setCircleY(float circleY) {
            mCircleY = circleY;
            invalidate();
        }
    

    结合之前的图表控件回调,获取到position 然后根据position获取到当前下标的坐标,赋值Y轴值给圆形控件

        scrollChartView.setOnScaleListener(new ScrollChartView.OnScaleListener() {
                @Override
                public void onScaleChanged(int position) {
                    ScrollChartView.Point point = scrollChartView.getList().get(position);
                    circleIndicatorView.setCircleY(point.y);
                }
            });
    

    附上Github地址:https://github.com/Victory-Over/SuperChartView

    相关文章

      网友评论

          本文标题:Android ScrollChartView 可滑动的自动回滚

          本文链接:https://www.haomeiwen.com/subject/svwycqtx.html