android自定义ImageView仿图片上传

看下效果图

主要看下自定义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://download.csdn.net/detail/xiabing082/9738742