Android custom View to display the upload progress of images (similar to the QQ upload result of mobile phones)

Android custom View to display the upload progress of images (similar to the QQ upload result of mobile phones)

First, let's take a look at the effect we want to achieve (the effect when sending images in QQ chat ):

Let's take a look at my implementation results:

 

1. The effect has been seen. Let's implement it. First, I create an android project ProgressImageView. Then we override the ImageView control and create the ProcessImageView Class Code as follows:

 

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; // brush 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); // eliminate the Sawtooth mPaint. setStyle (Paint. style. FILL); mPaint. setColor (Color. parseColor ("#70000000"); // translucent canvas. drawRect (0, 0, getWidth (), getHeight ()-getHeight () * progress/100, mPaint); mPaint. setColor (Color. parseColor ("#00000000"); // fully transparent canvas. drawRect (0, getHeight ()-getHeight () * progress SS/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); // determines the width of the text canvas. drawText (progress + "%", getWidth ()/2-rect. width ()/2, getHeight ()/2, mPaint);} public void setProgress (int progress) {this. progress = progress; postInvalidate ();};}

 

2. Add the ProcessImageView control to the activity_layout.xml layout file. The Code is as follows;

 

 

 

3. In the last step, add the ImageView that shows the progress bar to the MainActivity class. The Code is as follows:

 

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, "image uploaded", 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); // simulate the image Upload progress new Thread (new Runnable () {@ Override public void run () {while (true) {if (progress = 100) {// handler is completed after the image is uploaded. sendEmptyMessage (SUCCESS); return;} progress ++; processImageView. setProgress (progress); try {Thread. sleep (200); // pause for 0.2 seconds} 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. Compile and run.