Android图片上传蒙层进度条

时间:2022-09-29 青人人气:0

需求

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

分析

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

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

加载全部内容