Android图片上传蒙层进度条

需求

上传图片时在图片上增加蒙层，蒙层随着上传的大小由下自上逐渐缩短。

分析

1、用xml文件画一个正方形的shape
2、利用ClipdDrawable来实现图片的动态剪切
3、使用AsynTask来控制图片的上传，然后动态的改变ClipDrawable.setLevel（）方法中的值，这样基本就能达到图片上传蒙层的效果。
其中，本文中，在将图片数据流写向网络时，上传进度的值是根据正向的输出流的速度来判断的。也就是说不是服务器接收图片的速度，即使进度条表示图片已完全上传，也只是表示将图片上传到网络的大小。

实现

1、定义正方形的shape，drawable\mask.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--大小-->
<size android:height="82dp" android:width="82dp"/>
<!--<solid android:color="#3f000000" />-->
<solid android:color="#ffff4444"/>
</shape>

2、定义ClipDrawable由下自上的方式剪切，drawable\clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/bg_feedback_mask"
android:clipOrientation="vertical"
android:gravity="top"/>

3、在主界面中定义ImageView，将clip.xml引入

<ImageView
android:id="@+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />

<ImageView
android:id="@+id/picture_upload_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg_feedback_clip"
android:visibility="gone" />

第一个是放缩略图的，第一个是放进度条的，我们可以将它们放在FrameLayout中表示上下层的关系。

4、AsynTask处理上传图片

private class UploadPictureTask extends AsyncTask<String, Integer, UploadPictureResult> {

private String filePath;
private CountingTypedFile.ProgressListener listener;

public UploadPictureTask(String filePath) {
this.filePath = filePath;
}

@Override
protected void onPreExecute() {

uploadProgressImageView.setVisibility(View.VISIBLE);
uploadProgressImageView.getDrawable().setLevel(MAX_LEVEL);
super.onPreExecute();
}

@Override
protected UploadPictureResult doInBackground(String... params) {

File file = new File(filePath);
fileSize = file.length();
listener = new CountingTypedFile.ProgressListener() {
@Override
public void transferred(long num) {
publishProgress((int) ((num / (float) fileSize) * NUM_100));
}
};
UploadPictureResult uploadPictureResult = uploadImage(id, new CountingTypedFile("multipart/form-data", file, listener)
return uploadPictureResult;
}

@Override
protected void onProgressUpdate(Integer... values) {
//蒙层进度条
(uploadProgressImageView.getDrawable()).setLevel(MAX_LEVEL - values[0] * NUM_100);
}

@Override
protected void onPostExecute(UploadPictureResult uploadImageResult) {
findViewById(R.id.send_feedback).setVisibility(View.VISIBLE);
if (exception != null || uploadImageResult == null) {
Toast.makeText(FeedbackActivity.this, "上传失败", Toast.LENGTH_SHORT).show();
return;
}
Toast.makeText(FeedbackActivity.this, "上传成功", Toast.LENGTH_SHORT).show();
pictureUrl = uploadImageResult.getUrl();
super.onPostExecute(uploadImageResult);
}
}

上传进度条的监听需要自己写一个。

public class CountingTypedFile extends TypedFile {

private static final int BUFFER_SIZE = 4096;

private final ProgressListener listener;

/**
* Constructs a new typed file.
*
* @param mimeType
* @param file
* @throws NullPointerException if file or mimeType is null
*/
public CountingTypedFile(String mimeType, File file, ProgressListener listener) {
super(mimeType, file);
this.listener = listener;
}

@Override
public void writeTo(OutputStream out) throws IOException {
byte[] buffer = new byte[BUFFER_SIZE];
FileInputStream in = new FileInputStream(super.file());
long total = 0;
try {
int length;
while ((length = in.read(buffer)) != -1) {
total += length;
this.listener.transferred(total);
out.write(buffer, 0, length);
}
} finally {
in.close();
}
}
public interface ProgressListener {
void transferred(long num);
}
}

好了，以上步骤就差不多完成了。