(this blog as the original, http://www.cnblogs.com/linguanh/)
Directory:
First, why is it true high imitation?
Second, why slow down the effect?
Third, I realize the idea
Code, including comments
5. Use method and screenshots
Sixth, complete project
First, why is it true high imitation?
Expound this problem before, said the first online before, you can copy the words, to baidu “WeChat open the web page of the progress bar effect”, you will see there are a lot of similar articles, they have in common, however, is the realization method are the same, and ignores the WeChat page loading, the slow animation of the progress bar, It is not a stiff slide, but the user experience is very good, there is a change in speed, from slow to fast effect, language is difficult to describe, I believe you have downloaded wechat, you can casually open a public number of the article to see the effect.
Well, as mentioned above, the previous online methods have ignored the slow animation effect of the progress bar when loading wechat web pages, and the implementation code is also monotonous, as follows:
MProgressBar = (ProgressBar) findViewById(r.id.progressbar); WebView webView = (webView) findViewById(r.i.webView); /** Then set the progress in the webClient callback function. This is the effect of blunt * / webView. SetWebChromeClient (new WebChromeClient () {@ Override public void onProgressChanged (webView view, int newProgress) { super.onProgressChanged(view, newProgress); mProgressBar.setProgress(newProgress); }}); /** others are color styles, etc., not important */.....Copy the codeI thought the ProgressBar control might provide an API for animation itself, but it doesn’t, so I wrote it myself. If you find it, let me know.
Second, why slow down the effect?
Yeah, why bother? If you want to make a progress bar for loading a web page, it’s only 10 lines of code, and it works fine. Because of user experience, I am not a product manager, I am a programmer, and the effect is not who asked me to do so, I just look uncomfortable, the success of wechat, I believe that is not just a circle of friends so simple!
Programmers should have a focus on user experience.
Third, I realize the idea
Method many, this I say in front, my this kind of affirmation is not the best, but does not lose a use or improvement.
It is mainly by changing the LayoutParam of the view to achieve the effect of moving at different speeds. In each progress segment, for example, 0~24 for the first time and 24~56 for the second time, there are two progress segments. These two progress segments have different speeds, and this needs to be calculated. Calculate the actual width according to the screen width and the progress value of 0~100, and then calculate the moving speed. After calculating the data of each progress segment, put them into a list container, and then use a handler to cycle and extract the data of the same period, and continuously send messages. Keep setLayoutParam. After 100, the proof is complete.
In this process, we need to deal with the error of calculation, for example, the first load 20, the second load 24, 24-20 = 4,4/100, the program is 0, if the calculation speed, it will be less than 0, so we need to add a little 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 Linguanhong on 2016/7/11. ** * All attributes below the progress bar can be customized by using get set ** / public class SlowlyProgressBar { private static final int StartAnimation = 0x12; private Handler handler; private View view; /** thisWidth = 0; private thisWidth = 0; private int thisSpeed = 0; private int progress = 0; Private int record = 0; private int record = 0; /** private int width = 10; /** 10dp each time */ private int height = 3; /** 3dp */ private boolean isStart = false; private int phoneWidth = 0; /** private int I = 0; 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; } /** public void destroy(){if(progressQuery! =null){ progressQuery.clear(); progressQuery = null; } if(speedQuery! =null){ speedQuery.clear(); speedQuery = null; } view = null; handler.removeCallbacksAndMessages(null); handler = null; {if} public void setProgress (int progress) (progress > 100 | | progress < = 0) {/ * * no more than 100 * / return; } /** each pass in width should contain the previous value, so subtract */ /** next remember to convert scale, Formula (screen width * progress /100) */ this.width = (progress * phoneWidth)/100; /** lp.width always returns the previous size */ ** the speed is 2 */ int size = progressquery.size (); if(size ! = 0){ size = progressQuery.get(size-1); } Log.d("zzzzz","width - size = "+(width - size)); /** width = 1; /** width = 1; /** width = 1; 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(Message msg) { super.handleMessage(msg); switch (msg.what){ case StartAnimation: If (progressquery.size () == I){log.d (" ZZZZZ ","break"); if(progressquery.size () == I){Log. If (progress >= 100){/** Undefined 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 100 "+thisSpeed); / * * send messages delay length will not affect velocity * / handler sendEmptyMessageDelayed (StartAnimation, 1); break; }}}; Private void move(int speedTime,int lastWidth){if(speedTime > 9){speedTime = 9; /** progress = (record * speedTime); / * * correct * / if (progress > = lastWidth) {the setLayoutParams (new RelativeLayout. LayoutParams (progress, height * 3)); }else{ Log.d("zzzzz","hit "+progress+"---"+lastWidth); } record ++; }}Copy the code
5. Use method and screenshots
It’s super easy to introduce, so a view can be anything, like a TextView, and you just give it a background, and it has color.
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; }}}Copy the code
Sixth, complete project
Github.com/af913337456…
If you think this article is good or informative, you can passScan the Alipay QR code belowTip me a cup of coffee [material support], you can also click on the lower right corner“Recommended”Button [spiritual support], because these two kinds of support are the biggest motivation for me to continue to write and share
