Android custom ImageView image-like upload,

Android custom ImageView image-like upload,

Activity Code

1 public class MainActivity extends AppCompatActivity {2 ProcessImageView processImageView = null; 3 int progress = 0; 4 5 @ Override 6 protected void onCreate (Bundle savedInstanceState) {7 super. onCreate (savedInstanceState); 8 setContentView (R. layout. activity_main); 9 10 processImageView = (ProcessImageView) findViewById (R. id. image); 11 // simulate the image Upload progress 12 new Thread (new Runnable () {13 @ Override 14 public void run () {15 while (true) {16 if (progress = 100) {// The Image Upload is completed 17 return; 18} 19 progress ++; 20 processImageView. setProgress (progress); 21 try {22 Thread. sleep (200); // pause for 0.2 seconds 23} catch (InterruptedException e) {24 e. printStackTrace (); 25} 26} 27} 28 }). start (); 29} 30}

 

Custom view

1 public class ProcessImageView extends ImageView {2 private Context context; 3 private Paint paint; 4 private LogUtil log = LogUtil. getInstance (); 5 int progress = 0; 6 private boolean flag; 7 8 public ProcessImageView (Context context) {9 super (context); 10} 11 12 public ProcessImageView (Context context, attributeSet attrs) {13 this (context, attrs, 0); 14} 15 16 public ProcessImageView (Context co Ntext, AttributeSet attrs, int defStyleAttr) {17 super (context, attrs, defStyleAttr); 18 this. context = context; 19 paint = new Paint (); 20} 21 22 @ Override 23 protected void onDraw (Canvas canvas) {24 super. onDraw (canvas); 25 paint. setAntiAlias (true); // clear the tooth 26 paint. setStyle (Paint. style. FILL); // set paint to solid, Paint. style. STROKE is a hollow 27 paint. setColor (Color. parseColor ("#70000000"); // set to translucent 28 canvas. DrawRect (100, getWidth (), getHeight ()-getHeight () * progress/, paint); // getWidth () the obtained xml value of the image object width and height is * 2 29 30 paint. setColor (Color. parseColor ("#00000000"); // fully transparent 31 canvas. drawRect (0, getHeight ()-getHeight () * progress/100, 32 getWidth (), getHeight (), paint); 33 34 if (! Flag) {35 paint. setTextSize (30); 36 paint. setColor (Color. parseColor ("# FFFFFF"); 37 paint. setStrokeWidth (2); 38 Rect rect = new Rect (); 39 paint. getTextBounds ("100%", 0, "100% ". length (), rect); // determines the width of the text 40 canvas. drawText (progress + "%", getWidth ()/2-rect. width ()/2, 41 getHeight ()/2, paint); 42} 43} 44 45 public void setProgress (int progress) {46 this. progress = progress; 47 if (progress = 100) {48 flag = true; 49} 50 postInvalidate (); 51} 52}

Take a look at the custom view class, mainly in the onDraw () method.

The rendering is divided into three parts,

The first part is the last part of the translucent area.

Paint. setAntiAlias (true); // removes the Sawtooth paint. setStyle (Paint. style. FILL); // set paint to solid, Paint. style. STROKE is a hollow paint. setColor (Color. parseColor ("#70000000"); // sets it to a translucent canvas. drawRect (100, getWidth (), getHeight ()-getHeight () * progress/, paint );

The second part is the entire transparent area.

Paint. setColor (Color. parseColor ("#00000000"); // fully transparent canvas. drawRect (0, getHeight ()-getHeight () * progress/100, getWidth (), getHeight (), paint );

The third part is the progress SS value change in the middle.

If (! Flag) {paint. setTextSize (30); paint. setColor (Color. parseColor ("# FFFFFF"); paint. setStrokeWidth (2); Rect rect = new Rect (); paint. getTextBounds ("100%", 0, "100% ". length (), rect); // determines the width of the text canvas. drawText (progress + "%", getWidth ()/2-rect. width ()/2, getHeight ()/2, paint );}