android自定義ImageView仿圖片上傳

Activity代碼

 1 public class MainActivity extends AppCompatActivity {  
 2     ProcessImageView processImageView =null;  
 3     int progress=0;  
 4   
 5     @Override  
 6     protected void onCreate(Bundle savedInstanceState) {  
 7         super.onCreate(savedInstanceState);  
 8         setContentView(R.layout.activity_main);  
 9   
10         processImageView=(ProcessImageView) findViewById(R.id.image);  
11         //模擬圖片上傳進度  
12         new Thread(new Runnable() {  
13             @Override  
14             public void run() {  
15                 while (true){  
16                     if(progress==100){//圖片上傳完成  
17                         return;  
18                     }  
19                     progress++;  
20                     processImageView.setProgress(progress);  
21                     try{  
22                         Thread.sleep(200);  //暫停0.2秒  
23                     } catch (InterruptedException e){  
24                         e.printStackTrace();  
25                     }  
26                 }  
27             }  
28         }).start();  
29     }  
30 }  

自定義view

 1 public class ProcessImageView extends ImageView{  
 2     private Context context;  
 3     private Paint paint;  
 4     private LogUtil log=LogUtil.getInstance();  
 5     int progress = 0;  
 6     private boolean flag;  
 7   
 8     public ProcessImageView(Context context) {  
 9         super(context);  
10     }  
11   
12     public ProcessImageView(Context context, AttributeSet attrs) {  
13         this(context, attrs,0);  
14     }  
15   
16     public ProcessImageView(Context context, AttributeSet attrs, int defStyleAttr) {  
17         super(context, attrs, defStyleAttr);  
18         this.context=context;  
19         paint=new Paint();  
20     }  
21   
22     @Override  
23     protected void onDraw(Canvas canvas) {  
24         super.onDraw(canvas);  
25         paint.setAntiAlias(true); //消除鋸齒  
26         paint.setStyle(Paint.Style.FILL); //設置paint為實心，  Paint.Style.STROKE為空心  
27         paint.setColor(Color.parseColor("#70000000")); //設置為半透明  
28         canvas.drawRect(0,0,getWidth(),getHeight()-getHeight()*progress/100,paint); //這裡getWidth() 獲取的是image對象寬高度 xml值*2  
29   
30         paint.setColor(Color.parseColor("#00000000"));// 全透明  
31         canvas.drawRect(0, getHeight() - getHeight() * progress / 100,  
32                 getWidth(), getHeight(), paint);  
33   
34         if(!flag){  
35             paint.setTextSize(30);  
36             paint.setColor(Color.parseColor("#FFFFFF"));  
37             paint.setStrokeWidth(2);  
38             Rect rect = new Rect();  
39             paint.getTextBounds("100%", 0, "100%".length(), rect);// 確定文字的寬度  
40             canvas.drawText(progress + "%", getWidth() / 2 - rect.width() / 2,  
41                     getHeight() / 2, paint);  
42         }  
43     }  
44   
45     public void setProgress(int progress) {  
46         this.progress = progress;  
47         if(progress==100){  
48             flag=true;  
49         }  
50         postInvalidate();  
51     }  
52 }  

看下自定義view 類，主要onDraw（）方法中.

繪製中分為三部分，

第一部分為上部分半透明區域

paint.setAntiAlias(true); //消除鋸齒  
paint.setStyle(Paint.Style.FILL); //設置paint為實心，  Paint.Style.STROKE為空心  
paint.setColor(Color.parseColor("#70000000")); //設置為半透明  
canvas.drawRect(0,0,getWidth(),getHeight()-getHeight()*progress/100,paint); 

第二部分為下部分全透明區域

paint.setColor(Color.parseColor("#00000000"));// 全透明  
canvas.drawRect(0, getHeight() - getHeight() * progress / 100,  
               getWidth(), getHeight(), paint);  

第三部分就是中間的progress值變化

if(!flag){  
      paint.setTextSize(30);  
      paint.setColor(Color.parseColor("#FFFFFF"));  
      paint.setStrokeWidth(2);  
      Rect rect = new Rect();  
      paint.getTextBounds("100%", 0, "100%".length(), rect);// 確定文字的寬度  
      canvas.drawText(progress + "%", getWidth() / 2 - rect.width() / 2,  
                    getHeight() / 2, paint);  
}