看下效果图
主要看下自定义view 代码
public class ProcessImageView extends ImageView{
private Context context;
private Paint paint;
private LogUtil log=LogUtil.getInstance();
int progress = 0;
private boolean flag;
public ProcessImageView(Context context) {
super(context);
}
public ProcessImageView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public ProcessImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context=context;
paint=new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
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); //这里getWidth() 获取的是image对象宽高度 xml值*2
paint.setColor(Color.parseColor("#00000000"));// 全透明
canvas.drawRect(0, getHeight() - getHeight() * progress / 100,
getWidth(), getHeight(), paint);
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);
}
}
public void setProgress(int progress) {
this.progress = progress;
if(progress==100){
flag=true;
}
postInvalidate();
}
}
里面代码很详细了。
然后看下 Activity代码
public class MainActivity extends AppCompatActivity {
ProcessImageView processImageView =null;
int progress=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
processImageView=(ProcessImageView) findViewById(R.id.image);
//模拟图片上传进度
new Thread(new Runnable() {
@Override
public void run() {
while (true){
if(progress==100){//图片上传完成
return;
}
progress++;
processImageView.setProgress(progress);
try{
Thread.sleep(200); //暂停0.2秒
} catch (InterruptedException e){
e.printStackTrace();
}
}
}
}).start();
}
}
下面来详细介绍view代码。
首先从图中可以看到 中间有个参数变化，这个进度值不断变化，我们再activity 中使用了一个线程 ，每隔0.2 秒会增加progress这个值，然后通过 processImageView.setProgress(progress); 改变view类中 progress重绘制这个定义view.
然后看下自定义view 类，主要onDraw（）方法中.
绘制中分为三部分，
第一部分为上部分半透明区域
第二部分为下部分全透明区域
第三部分就是中间的progress值变化
先看第一个部分画出上部分半透明，
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);
第三部分动态改变字符串
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);
}
源码地址 http://xiazai.jb51.net/201701/yuanma/ProcessImageDemo_jb51.rar
