android自訂View實現圖片上傳進度顯示（仿手機QQ上傳效果）

標籤：android   imageview自訂控制項   進度條   

首先看下我們想要實現的效果如（qq聊天中發送圖片時的效果）：

再看一下我實現的效果：

1、效果已經看見了，下面我們來實現它。首先我建立一個android工程ProgressImageView。然後我們重寫ImageView控制項，建立ProcessImageView類代碼如下：

package com.example.processimageview;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.view.ViewGroup.LayoutParams;import android.widget.ImageView;public class ProcessImageView extends ImageView {    private Paint mPaint;// 畫筆    int width = 0;    int height = 0;    Context context = null;    int progress = 0;    public ProcessImageView(Context context) {        super(context);        // TODO Auto-generated constructor stub    }    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;        mPaint = new Paint();    }    @SuppressLint("DrawAllocation")    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPaint.setAntiAlias(true); // 消除鋸齒        mPaint.setStyle(Paint.Style.FILL);                mPaint.setColor(Color.parseColor("#70000000"));// 半透明        canvas.drawRect(0, 0, getWidth(), getHeight()- getHeight() * progress                / 100, mPaint);        mPaint.setColor(Color.parseColor("#00000000"));// 全透明        canvas.drawRect(0, getHeight() - getHeight() * progress / 100,                getWidth(), getHeight(), mPaint);        mPaint.setTextSize(30);        mPaint.setColor(Color.parseColor("#FFFFFF"));        mPaint.setStrokeWidth(2);        Rect rect = new Rect();        mPaint.getTextBounds("100%", 0, "100%".length(), rect);// 確定文字的寬度        canvas.drawText(progress + "%", getWidth() / 2 - rect.width() / 2,                getHeight() / 2, mPaint);    }    public void setProgress(int progress) {        this.progress = progress;        postInvalidate();    };}

2、將ProcessImageView控制項加入activity_layout.xml布局檔案中,代碼如下;

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.example.processimageview.MainActivity" >    <com.example.processimageview.ProcessImageView     android:id="@+id/image"     android:layout_centerInParent = "true"     android:layout_width="200dp"     android:layout_height="300dp"     android:contentDescription="This is a ProcessImage"     android:src="@drawable/image" />   </RelativeLayout>

3、最後一步，顯示效果(是不是很激動)，在MainActivity類加入顯示進度條的ImageView，代碼如下：

package com.example.processimageview;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup.LayoutParams;import android.widget.Toast;public class MainActivity extends Activity {    ProcessImageView processImageView =null;    private final int SUCCESS=0;    int progress=0;        Handler handler=new Handler(){        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what) {            case SUCCESS:                Toast.makeText(MainActivity.this, "圖片上傳完成", Toast.LENGTH_SHORT).show();                processImageView.setVisibility(View.GONE);                break;            }        }    };        @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){//圖片上傳完成                         handler.sendEmptyMessage(SUCCESS);                         return;                     }                     progress++;                     processImageView.setProgress(progress);                    try{                          Thread.sleep(200);  //暫停0.2秒                    } catch (InterruptedException e){                          e.printStackTrace();                      }                  }              }        }).start();    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        if (id == R.id.action_settings) {            return true;        }        return super.onOptionsItemSelected(item);    }}

4、編譯運行，大功告成。

android自訂View實現圖片上傳進度顯示（仿手機QQ上傳效果）