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.set Progress(progress)를 통 해view 클래스 의 progress 를 변경 하여 이 정의 view 를 다시 그립 니 다.
그리고 사용자 정의 view 클래스,주요 onDraw()방법 을 보십시오.
그림%1 개의 캡 션 을 편 집 했 습 니 다.
첫 번 째 부분 은 윗부분 반투명 구역 입 니 다.
두 번 째 부분 은 아래 부분 전체 투명 구역 입 니 다.
세 번 째 부분 은 중간 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); 
    } 

원본 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.