posts - 463, comments - 72, trackbacks - 0, articles - 0

导航

公告

android自定义ImageView仿图片上传

Posted on 2017-04-21 21:12 ganchuanpu 阅读(...) 评论(...) 编辑 收藏

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