Android自定义横线滑动折线图，点击，加载更多

项目地址：https://github.com/604982372/HorizontalLine

实现步骤：

1.设置属性；

2.绘制内容；

3.处理滑动事件；

4.添加选中，滑动更多功能。

设置属性

1.在attrs.xml文件中添加设置：

 

<declare-styleable name="HorizontalLineView">
        <attr name="linecolor" format="color"/>
        <attr name="textsizedefault"  format="dimension"/>
        <attr name="textsizeselected"  format="dimension"/>
        <attr name="textcolorselected" format="color"/>
        <attr name="textcolordefault" format="color"/>
        <attr name="bg" format="color"/>
    </declare-styleable>

2.初始化画笔，折线图画笔，线上数字画笔，x轴文字画笔

private void initPaint()
    {
        mValueTextPaint = new Paint();
        mValueTextPaint.setAntiAlias(true);
        mValueTextPaint.setTextSize(mTextSizeDefault);
        //mValueTextPaint.setStrokeCap(Paint.Cap.ROUND);
        mValueTextPaint.setColor(mTextColorSelected);
        //mValueTextPaint.setStyle(Paint.Style.STROKE);
        mValueTextPaint.setStyle(Paint.Style.FILL);

        mXTextPaint = new Paint();
        mXTextPaint.setAntiAlias(true);
        mXTextPaint.setTextSize(mTextSizeDefault);
        //mValueTextPaint.setStrokeCap(Paint.Cap.ROUND);
        mXTextPaint.setColor(getColor(R.color.orange));
        //mValueTextPaint.setStyle(Paint.Style.STROKE);
        mXTextPaint.setStyle(Paint.Style.FILL);

        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);
        mLinePaint.setStrokeCap(Paint.Cap.ROUND);
        mLinePaint.setColor(mLinecolor);
        mLinePaint.setStyle(Paint.Style.FILL);
        mLinePaint.setStrokeWidth(dpToPx(1.3f));
    }

绘制内容，绘制点，线，文字

 

for (int i = 0; i < mValueTotalList.size(); i++)
        {
            if (maxValue < mValueTotalList.get(i))
            {
                maxValue = mValueTotalList.get(i);
            }
        }
        for (int i = 0; i < mValueTotalList.size(); i++)
        {
            float valuei = (maxValue - mValueTotalList.get(i)) * mMeasureHeight / maxValue + xValueTextHeight + mPaddingTop;
            String testString = String.valueOf(mValueTotalList.get(i));
            mValueTextPaint.setColor(mIsSelected == i ? mTextColorSelected : mTextColorDefault);
            mXTextPaint.setColor(mIsSelected == i ? mTextColorSelected : mTextColorDefault);
            mValueTextPaint.setTextSize(mIsSelected == i ? mTextSizeSelected : mTextSizeDefault);
            Rect bounds = getTextBounds(testString, mValueTextPaint);
            Rect bou = getTextBounds(mXValueList.get(i), mValueTextPaint);
            canvas.drawText(mXValueList.get(i),
                    mMeasureWidth / 10 + i * mMeasureWidth / 5 - bou.width() / 2, mMeasureHeight + 2 * xValueTextHeight + mPaddingTop,
                    mXTextPaint);

            if (i == 0)
            {
                canvas.drawCircle(mMeasureWidth / 10, valuei, dpToPx(3.5f), mLinePaint);
                canvas.drawText(testString, mMeasureWidth / 10 - bounds.width() / 2, valuei - mTextdistancePoint, mValueTextPaint);
            }
            else
            {
                float valuei1 = (maxValue - mValueTotalList.get(i - 1)) * mMeasureHeight / maxValue + xValueTextHeight + mPaddingTop;
                canvas.drawLine(mMeasureWidth / 10 + (i - 1) * mMeasureWidth / 5, valuei1
                        , mMeasureWidth / 10 + i * mMeasureWidth / 5, valuei, mLinePaint);// 画线
                canvas.drawCircle(mMeasureWidth / 10 + i * mMeasureWidth / 5, valuei, dpToPx(3.5f), mLinePaint);
                Log.v("3699318", bounds.width() + "");
                canvas.drawText(testString,
                        mMeasureWidth / 10 + i * mMeasureWidth / 5 - bounds.width() / 2, valuei - mTextdistancePoint,
                        mValueTextPaint);
            }
        }

处理滑动事件，添加选中，右滑加载更多功能

 

@Override
    public boolean onTouchEvent(MotionEvent event)
    {
        if (mVelocityTracker == null)
        {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:
                mTouchX = (int) event.getX();
                mTouchY = (int) event.getY();
                mMoveX = mTouchX;
                return true;

            case MotionEvent.ACTION_MOVE:
                if (monthLineWidth > mMeasureWidth)
                {
                    int dx = (int) event.getX() - mMoveX;
                    if (dx > 0)
                    { // 右滑
                        Log.v("3699右滑", "********" + mScroller.getFinalX());
                        if (mScroller.getFinalX() > 0)
                        {
                            mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), -dx, 0, 400);
                        }
                        else
                        {
                            mScroller.setFinalX(0);
                            if (mIOnScrollStateListener != null && !mIsScrollBottom)
                            {
                                Log.v("3699加载185", "0000000000000");
                                mIsScrollBottom = true;
                                mIOnScrollStateListener.onScrollbottom();
                            }
                        }
                    }
                    else
                    { //左滑
                        Log.v("3699左滑", "---------" + (mScroller.getFinalX() + mMeasureWidth - dx < monthLineWidth) + "++++" + monthLineWidth +
                                "·······" + (mScroller.getFinalX() + mMeasureWidth - dx));
                        if (mScroller.getFinalX() + mMeasureWidth - dx < monthLineWidth)
                        {
                            mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), -dx, 0, 400);
                        }
                        else
                        {
                            mScroller.setFinalX(monthLineWidth - mMeasureWidth);
                        }
                    }
                    mMoveX = (int) event.getX();
                    invalidate();
                }
                break;

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if (monthLineWidth > mMeasureWidth)
                {
                    final MotionEvent vtev = MotionEvent.obtain(event);
                    final ViewConfiguration vc = ViewConfiguration.get(getContext());
                    mTouchSlop = vc.getScaledTouchSlop();
                    mMaxFlingVelocity = vc.getScaledMaximumFlingVelocity();
                    mVelocityTracker.addMovement(vtev);
                    mVelocityTracker.computeCurrentVelocity(1000, mMaxFlingVelocity);
                    int max = Math.max(Math.abs(mScroller.getCurrX()), Math.abs(monthLineWidth - mMeasureWidth - mScroller.getCurrX()));
                    mIsStop = false;
                    mScroller.fling(mScroller.getFinalX(), mScroller.getFinalY()
                            , (int) -mVelocityTracker.getXVelocity(), (int) -mVelocityTracker.getYVelocity(),
                            0, monthLineWidth - mMeasureWidth, mScroller.getFinalY(), mScroller.getFinalY());
                    //手指抬起时，根据滚动偏移量初始化位置
                    float lv = ((mScroller.getFinalX() - mMeasureWidth / 10) * 1.00f) / (mMeasureWidth / 5);
                    Log.v("3699max", max + "*****" + mScroller.getCurrX() + "--->" + ((int) lv) * mMeasureWidth / 5 + "-----lv>" + lv
                            + "   getFinalX:" + mScroller.getFinalX());
                    Log.v("3699lv", lv - ((int) lv) + "");

                    if (mScroller.getFinalX() < 0)
                    {
                        Log.v("3699145", "1451451545145");
                        mScroller.abortAnimation();
                        mScroller.startScroll(mScroller.getCurrX(), mScroller.getCurrY(), -mScroller.getCurrX(), 0, 400);
                    }
                    else if (mScroller.getFinalX() > monthLineWidth - mMeasureWidth)
                    {
                        Log.v("3699145", "151151151151151");
                        mScroller.abortAnimation();
                        mScroller.startScroll(mScroller.getCurrX(), mScroller.getCurrY(), monthLineWidth - mMeasureWidth - mScroller.getCurrX(), 0, 400);
                    }
                }
                if (event.getAction() == MotionEvent.ACTION_UP)
                {
                    mIsScrollBottom = false;
                    Log.v("3699up", "***" + mScroller.getFinalX());
                    int mUpX = (int) event.getX();
                    int mUpY = (int) event.getY();
                    //模拟点击操作
                    if (Math.abs(mUpX - mTouchX) <= mTouchSlop && Math.abs(mUpY - mTouchY) <= mTouchSlop)
                    {
                        for (int i = 0; i < mValueTotalList.size(); i++)
                        {
                            if (Math.abs((mScroller.getCurrX() + mUpX) - (mMeasureWidth / 10 + (i * mMeasureWidth / 5))) <= 15)
                            {
                                setSelected(i);
                                Log.v("3699点击", "" + i);
                                return super.onTouchEvent(event);
                            }
                        }
                    }
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }

滑动完成监听

 

@Override
    public void computeScroll()
    {
        //先判断mScroller滚动是否完成
        if (mScroller.computeScrollOffset())
        {
            //这里调用View的scrollTo()完成实际的滚动
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            //必须调用该方法，否则不一定能看到滚动效果
            postInvalidate();
        }
        if (mScroller.isFinished() && !mIsStop)
        {
            mIsStop = true;
            int lv = mScroller.getFinalX() % (mMeasureWidth / 5);
            int n = mScroller.getFinalX() / (mMeasureWidth / 5);

            Log.v("3699停止", mScroller.getCurrX() + "    " + mScroller.getFinalX() + "      " + mMeasureWidth / 5 + "   lv:" + lv);
            //if (Math.abs(lv - ((int) lv)) < 0.1)
            {
                mScroller.abortAnimation();
                if (lv > mMeasureWidth / 10)//+
                {
                    mScroller.startScroll(mScroller.getFinalX(), mScroller.getCurrY(),
                            (mMeasureWidth / 5 - lv), 0, 400);
                    if (mIOnScrollStateListener != null)
                    {
                        mIOnScrollStateListener.onScrollStop(n + 1);
                    }
                }
                else
                {
                    mScroller.startScroll(mScroller.getFinalX(), mScroller.getCurrY(),
                            -lv, 0, 400);
                    if (mIOnScrollStateListener != null)
                    {
                        mIOnScrollStateListener.onScrollStop(n);
                    }
                }
            }
        }
        super.computeScroll();
    }

项目地址：https://github.com/604982372/HorizontalLine