Android自定义View之实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习，学会了绘制柱状图、绘制折线图、绘制进度控件，那我们今天就来聊聊另外一种自定义的View，这就是我们常见的七日年化收益折线图效果。先看看长什么样。

这就是效果图了，元素相对而言还是比较多的，这里有线、柱状图、文字、折线、点等等。看起来好像很复杂，但是呢，只要一步一步的实现，那还是可以达到这种效果的，之前我们说过的， 自定义View，就像是在photo shop里面画图，想要什么就画什么，我们可以有很多的画笔工具，也可以有很多的图层。

先看看我们这一次用到哪些变量。

     Paint mTextPaint, mLinePaint,mPathPaint,mPointPaint;

      mPaintRectWidth;

     Path mPath;

      mWidth, mHeight;

       mCount = ;

       offsets=;

      mRectHeight;

     List<Float> xline= ArrayList<Float>();

     List<Float> yline= ArrayList<Float>();

      []x={f,f,f,f,f,f,f};

     String [] day={,,,,,,};

注释标记的也是够详细了，为了大家能够看得懂，也为了提高的博客质量，我们注意到，这里有文字，有数量，基本涵盖了我们这里索要用到的所有的变量。

下面开始初始化操作。

      () {

        mTextPaint =  Paint();
        mTextPaint.setAntiAlias();
        mTextPaint.setColor(Color.parseColor());
        mTextPaint.setTextSize();
        mTextPaint.setStrokeWidth();

        mPointPaint=  Paint();
        mPointPaint.setAntiAlias();
        mPointPaint.setColor(Color.parseColor());
        mPointPaint.setTextSize();
        mPointPaint.setStrokeWidth();

        mLinePaint =  Paint();
        mLinePaint.setAntiAlias();

        mPathPaint=  Paint();
        mPathPaint.setAntiAlias();
        mPathPaint.setColor(Color.parseColor());
        mPathPaint.setStyle(Style.STROKE);

        mPath= Path();

    }

这里主要就是给画笔初始化，可以看到每一个画笔的颜色、宽度都是不一样的，值的注意的是，这里面的画笔并没有设置镂空样式。

接下来我们看看怎么去赋值，老规矩，我们还是选择在onSizeChange()里面进行赋值，代码如下：

      ( w,  h,  oldw,  oldh) {
        .onSizeChanged(w, h, oldw, oldh);
        mWidth=()(getWidth()-getWidth()*);
        mHeight=()(getHeight()-getHeight()*);
        mRectHeight=()(getHeight()-getHeight()*);
        mPaintRectWidth=() (mWidth*/mCount);
        mLinePaint.setStrokeWidth(mPaintRectWidth);
    }

跟之前的不一样，我们以前所要用的宽度跟高度，直接就是使用方法里的，但是现在我们没有这么做，例如：(float)(getWidth()-getWidth()*0.1);我们进行了一定的处理，这样可以提高页面的舒适性，提高用户体验。

好了，准备工作做好了，接下来看看onDraw方法里面的操作，代码如下：

      (Canvas canvas) {
        .onDraw(canvas);
        onDrawRect(canvas);
        onDrawLine(canvas);
        canvasPath(canvas);
    }

哟呵，怎么这么简单，就三个东西？对的，就是这么简单粗暴，从名字中也可以看出，第一个是绘制矩形，第二个绘制线，第三个就是绘制折线。是不是很快呢，下面看看具体的实现方式。

第一个方法：

      (Canvas canvas) {
         ( i = ; i < ; i++) {
             (i%==) {
                mLinePaint.setColor(Color.parseColor());
            } {
                mLinePaint.setColor(Color.parseColor());
            }
             left  =() (mWidth *  /  + mPaintRectWidth * i + offsets);
             right=() (mWidth *  /  + mPaintRectWidth* (i + ));

            canvas.drawRect(left,()(mRectHeight*),right, mHeight, mLinePaint);
        }

    }

第二个：

    private void onDrawLine(Canvas ){

        .drawLine(mPaintRectWidth-mPaintRectWidth/, ()(mRectHeight), getWidth(),  ()(mRectHeight), mTextPaint);

         height;

         ( i = ; i < ; i++) {

             (i==) {
                height=i;
            } {
                height=mRectHeighti/);
                 =mTextPaint.measureText(x[()i]+);

                .drawLine(mPaintRectWidth+mPaintRectWidth/, height, getWidth(),  height, mTextPaint);

                .drawText(x[()i]+, ()(mPaintRectWidth-mPaintRectWidth), height+/, mTextPaint);
            }

        }

        .drawLine(() (mPaintRectWidth-mPaintRectWidth/),, () (mPaintRectWidth-mPaintRectWidth/),  mHeight, mTextPaint);
         ( i = ; i < ; i++) {

            .drawLine(() (mWidth *  /  + mPaintRectWidth * i),, () (mWidth *  /  + mPaintRectWidth * i),  mHeight, mTextPaint);

            .drawText(day[() i], () (mWidth *  /  + mPaintRectWidth * i), ()(mHeight+mHeight), mTextPaint);

            xline.add(() (mWidth *  /  + mPaintRectWidth * i));
        }

        xline.add(() (mPaintRectWidth-mPaintRectWidth/));

    }

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android自定义view
， canvas
， 自定义view
， drawtext
， android 柱状图
， 自定义view的实现
， 自定义view类
， 自定义折线图
， 自定义折线
， view画折线图
， android天气折线图
， android折线图demo
， Android画图
View绘制
理财产品七日平均收益、七日年化收益率、七日年化收益计算器、七日年化收益率怎么算、七日年化收益率计算器，以便于您获取更多的相关知识。