Android Development simulation of micro-letter open Web page progress bar effect (high imitation) _android

One, why is it true that the high imitation?

Before we explain this question, I would like to say that before the Internet, you can copy this phrase, go to Baidu "imitation micro-letter open Web page progress bar effect", you will see a lot of similar articles, but they have a common point is that the implementation of the method are the same, but also ignored the micro-letter loading page, the progress bar of the slow animation effect, It is not a blunt slip over, but the user experience is very good, there is a change in speed, from slow to fast effect, language difficult to describe, I believe you have to download micro-letter, you can open a public number of articles to see the effect.

OK, said above, before the online methods are all ignore the micro-letter loading page, progress bar slow animation effect, the implementation code is the same as the following:

/** first instantiate a progress bar/
ProgressBar Mprogressbar = (ProgressBar) Findviewbyid (R.id.progressbar);
/** a webview * * *
webview WebView = (webview) Findviewbyid (R.id.webview);
/** then directly in the webClient callback function inside the set progress, this approach is blunt effect * * *
webview.setwebchromeclient (new Webchromeclient () {
 @Override Public
 void onprogresschanged (webview view, int newprogress) {
 super.onprogresschanged (view, newprogress); C11/>mprogressbar.setprogress (newprogress);
 }
);
/** other is the color style, etc., not the key.

I thought it was progressbar. Control may itself provide the animation API, unfortunately, did not, so I wrote this, if you find, tell me.

Two, why do slow effect?

Yes, why bother, if you want to get a Web page to load the progress bar, the above code is only 10 lines, duly implemented. Because of the user experience, I am not a product manager, I am a programmer, and this effect is not who told me to do so, I was looking at the awkward, micro-letter success, I believe not only a circle of friends so simple!

Programmers should have the idea of focusing on the user experience.

Three, my idea of realization

There are a lot of ways that I say in front of me this is certainly not the best, but without losing the use or improvement.

Mainly by changing the view of the Layoutparam to achieve a different speed of the moving effect, in each of the progress segments, such as the first 0~24, the second 24~56, this is the two progress segment, the two progress segments, with different speeds, which need to be computed, first based on the screen width of the phone and 0~ 100 of the progress value to calculate the actual width, and then calculate the speed of movement, calculate the data for each progress section, said they put into a list of containers, and then through a handler to recycle the same time data, constantly send messages, Non-stop Setlayoutparam. After reaching 100, it is proved that the loading is complete.

In this process need to deal with the error of calculation, such as the first load 20, the second 24,24-20 = 4,4/100, the program is 0, if the speed of calculation, will be poor 0, so to slightly add an if judgment.

Four, code, connotation annotation

Core classes:

Package Com.slowlyprogressbar;
Import Android.os.Handler;
Import Android.os.Message;
Import Android.util.Log;
Import Android.view.View;
Import Android.widget.RelativeLayout;
Import java.util.ArrayList;
Import java.util.List;
 /** * Created by Lin Kuo-hong on 2016/7/11. * * Real Imitation micro-letter Web page Open Progress bar * * All attributes below can be customized with Get set from * * */public class Slowlyprogressbar {private static final int St
 Artanimation = 0x12;
 Private Handler Handler;
 Private view view;
 /** current displacement distance and speed * * Private int thiswidth = 0;
 private int thisspeed = 0; private int progress = 0; /** Current Progress Length * * Private int record = 0; /** Mobile unit */private int width = 10; /** 10DP each time */private int height = 3;
 /** 3DP */private Boolean isstart = false; private int phonewidth = 0;
 /** Screen Width */private int i = 0;
 /** each time the mobile record container, the displacement corresponds to each frame time * * Private list<integer> Progressquery = new arraylist<> ();
 Private list<integer> speedquery = new arraylist<> (); Public Slowlyprogressbar (view view, int phonewidth) {Inithandler ();
 This.phonewidth = Phonewidth;
 This.view = view;
 /** the aftermath of the release of the reference to the holding, the party can be effective GC/public void Destroy () {if (progressquery!=null) {progressquery.clear ();
 Progressquery = null;
 } if (Speedquery!=null) {speedquery.clear ();
 Speedquery = null;
 view = null;
 Handler.removecallbacksandmessages (NULL);
 handler = NULL;
 public void setprogress (int progress) {if (progress>100 | | Progress <= 0) {/** cannot exceed/return; /** each incoming width should be the number that contains the previous value, so below to subtract * * */** to remember the conversion ratio, formula (screen width * progress/100) * * * This.width = (Progress * phonewidth)
 /100;
 /** Lp.width always gets the previous size * * The speed of the/** move 100px is 2 */int size = Progressquery.size ();
 if (size!= 0) {size = Progressquery.get (size-1);
 } log.d ("Zzzzz", "width-size =" + (width-size));
 /** calculation magnification, 2/100 = x/width/int distance = Width-size;
 int speedtime;
 if (distance<=100) {speedtime = 2;
 }else{speedtime = (int) ((2 * distance)/100.0);
 /** Add * * Progressquery.add (this.width); Speedquery. Add (Speedtime);
 /** Start */if (!isstart) {Isstart = true;
 Handler.sendemptymessage (startanimation);
 } public slowlyprogressbar setviewheight (int height) {this.height = height;
 return this; private void Inithandler () {handler = new handler () {@Override public void Handlemessage (msg) {Super.handl
 Emessage (msg); Switch (msg.what) {case startanimation:/** Extract Queue information */if (Progress >= thiswidth) {/** If it has run out, remove the/if (progress
  Query.size () = = i) {log.d ("zzzzz", "break");
  if (Progress >= 100) {/** all gone, hide the progress bar */view.setvisibility (view.invisible);
  } Isstart = false;
  Break
  } log.d ("Zzzzz", "size is" + progressquery.size ());
  Thiswidth = Progressquery.get (i);
  Thisspeed = Speedquery.get (i);
  i + +;
  } Move (Thisspeed,view.getlayoutparams (). width);
  LOG.D ("Zzzzz", "send" +thisspeed);
  The delay length of the/** message does not affect the speed/handler.sendemptymessagedelayed (startanimation,1);
 Break
 }
 }
 }; /** Mobile */private void Move (int speedtime,int lastWidth) {if (Speedtime > 9) {speedtime = 9;/** control maximum magnification */}/** Multiply 3 is the correct error/progress = (record * speedtime);
 /** correction/if (Progress >= lastwidth) {view.setlayoutparams (new Relativelayout.layoutparams (progress,height*3));
 }else{log.d ("Zzzzz", "hit" +progress+ "---" +lastwidth);
 Record + +; }
}

Five, the use of methods and screenshots

Super Simple introduction, view can be a random, such as TextView, give it a background on the line, there are colors.

public class Mainactivity extends Appcompatactivity {
 private slowlyprogressbar slowlyprogressbar;
 @Override
 protected void onCreate (Bundle savedinstancestate) {
 super.oncreate (savedinstancestate);
 Setcontentview (r.layout.activity_main);
 Slowlyprogressbar =
 new Slowlyprogressbar
  (
  Findviewbyid (R.ID.P),
  Getwindowmanager (). Getdefaultdisplay (). GetWidth ()
  )
 . Setviewheight (3);
 WebView WebView = (webview) Findviewbyid (R.id.webview);
 Webview.setwebchromeclient (New Webchromeclient () {
 @Override public
 void onprogresschanged (WebView view, int newprogress) {
 super.onprogresschanged (view, newprogress);
 Slowlyprogressbar.setprogress (newprogress);
 }
 );
 Webview.loadurl ("Http://www.cnblogs.com/linguanh");
 }
 @Override public
 void Finish () {
 super.finish ();
 if (slowlyprogressbar!=null) {
 Slowlyprogressbar.destroy ();
 Slowlyprogressbar = null;
 }
 }

The above is a small set to introduce the Android development of The Imitation Micro-letter open Web page progress bar effect (high imitation), if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!