安卓自定義View實現圖片上傳進度顯示（仿QQ）

yangxi_001發表於2015-07-27
安卓View

實現原理很簡單，首先我們上傳圖片時需要一個進度值progress，這個不管是自己寫的上傳的方法還是使用第三方開源庫，其次，需要自定義一個View並重寫onDraw方法，此例中的進度是開啟了一個執行緒，然後模仿進度遞增，然後將進度值通過自定義View呼叫一個自定義方法傳進自定義View並根據進度進行重繪。

繪製分為三部分：

1.繪製矩形（圖片面積）上半部分陰影區；

2.繪製矩形（圖片面積）下半部分非陰影區；

3.繪製中間進度值（文字）；

onDraw程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Override
protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
     mPaint.setAntiAlias(true); // 消除鋸齒
     mPaint.setStyle(Paint.Style.FILL);
 
     mPaint.setColor(Color.parseColor("#70000000"));//半透明
     canvas.drawRect(0, 0, getWidth(), getHeight()-getHeight()*progress/100, mPaint);
 
     mPaint.setColor(Color.parseColor("#00000000"));//全透明
     canvas.drawRect(0, getHeight()-getHeight()*progress/100, getWidth(),  getHeight(), mPaint);
 
     mPaint.setTextSize(30);
     mPaint.setColor(Color.parseColor("#FFFFFF"));
     mPaint.setStrokeWidth(2);
     Rect rect=new Rect();
     mPaint.getTextBounds("100%", 0, "100%".length(), rect);//確定文字的寬度
     canvas.drawText(progress+"%", getWidth()/2-rect.width()/2,getHeight()/2, mPaint);
 
}

傳入進度值的方法：

1
2
3
4
public void setProgress(int progress){
     this.progress=progress;
     postInvalidate();
};

主介面呼叫方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
customView=(CustomView6) findViewById(R.id.customView);
 
//模擬圖片上傳進度
new Thread(new Runnable() {
    @Override
    public void run() {
         while (true){
              if(progress==100){//圖片上傳完成
                  handler.sendEmptyMessage(SUCCESS);
              return;
         }
         progress++;
         customView.setProgress(progress);
         try{
               Thread.sleep(200);  //暫停0.2秒
         } catch (InterruptedException e){
               e.printStackTrace();
         }
    }
}
}).start();

demo下載地址：http://download.csdn.net/detail/baiyuliang2013/8690773

相關文章