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

Source: Internet
Author: User

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.

 

 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.