Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android系統教程 >> Android開發教程 >> Android自定義View之實現理財類APP七日年化收益折線圖效果

Android自定義View之實現理財類APP七日年化收益折線圖效果

編輯:Android開發教程

這段時間的自定義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/));



    }
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved