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/));



    }