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.