android自定義ImageView仿圖片上傳示例

更新時間：2017年01月16日 15:15:59 作者：小小藍(lán)莓082

本篇文章主要介紹了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); //設(shè)置paint為實心， Paint.Style.STROKE為空心 
    paint.setColor(Color.parseColor("#70000000")); //設(shè)置為半透明 
    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(); 
  } 
}

里面代碼很詳細(xì)了。

然后看下 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); 
    //模擬圖片上傳進(jìn)度 
    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(); 
  } 
}

下面來詳細(xì)介紹view代碼。

首先從圖中可以看到中間有個參數(shù)變化，這個進(jìn)度值不斷變化，我們再activity 中使用了一個線程，每隔0.2 秒會增加progress這個值，然后通過 processImageView.setProgress(progress); 改變view類中 progress重繪制這個定義view.

然后看下自定義view 類，主要onDraw（）方法中.

繪制中分為三部分，

第一部分為上部分半透明區(qū)域

第二部分為下部分全透明區(qū)域

第三部分就是中間的progress值變化

先看第一個部分畫出上部分半透明，

paint.setAntiAlias(true); //消除鋸齒 
    paint.setStyle(Paint.Style.FILL); //設(shè)置paint為實心， Paint.Style.STROKE為空心 
    paint.setColor(Color.parseColor("#70000000")); //設(shè)置為半透明 
    canvas.drawRect(0,0,getWidth(),getHeight()-getHeight()*progress/100,paint);

第二部分畫出下面透明區(qū)域

paint.setColor(Color.parseColor("#00000000"));// 全透明 
    canvas.drawRect(0, getHeight() - getHeight() * progress / 100, 
        getWidth(), getHeight(), paint);

第三部分動態(tài)改變字符串

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: