看下效果图

主要看下自定义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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。