Android开发之模仿微信打开网页的进度条效果(高仿)

2022-06-06 08:07

短信预约 -IT技能 免费直播动态提醒

一，为什么说是真正的高仿？

　　阐述这个问题前，先说下之前网上的，各位可以复制这段字，去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章，不过他们有个共同点，就是实现方法都是一样的，而且，都忽略了微信加载网页时，进度条的缓慢动画效果，它不是生硬地一滑而过，而是用户体验很好，有个速度的变化，由慢到快的效果，语言难于描述，相信各位都有下载微信，可以随便打开个公众号的文章看看效果。

　　好了，上面说到，之前网上的方法都是都忽略了微信加载网页时，进度条的缓慢动画效果，实现代码也是千篇一律，如下：



ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.ProgressBar);

WebView webView = (WebView) findViewById(R.id.webview);

webView.setWebChromeClient(new WebChromeClient(){
 @Override
 public void onProgressChanged(WebView view, int newProgress) {
 super.onProgressChanged(view, newProgress);
 mProgressBar.setProgress(newProgress);
 }
});

.....

　　我以为是 ProgressBar 控件可能自身提供了动画的 API，可惜，没有,故自己动手写了这个，你如果找到了，告诉下我。

二，为什么要搞缓慢效果？

　　对，为什么要这么麻烦，你如果要搞个网页加载进度条，上面的代码不过 10 行，妥妥地实现了。因为用户体验，我不是产品经理，我是个程序员，而且这个效果也不是有谁叫我这样去做的，我就是看着别扭，微信的成功，我相信不仅仅是个朋友圈那么简单！

　　程序员应该具备注重用户体验的想法。

三，我的实现思路

　　方法很多，这话我说在前面，我的这种肯定不是最好的，但不失一用或改进。

　　主要是通过改变 view 的 LayoutParam 来实现有不同速度的移动效果，在每一次的进度段，例如第一次0~24，第二次24~56，这就是两个进度段，这两个进度段，具有不同的速度，这个需要计算出来，先根据手机屏幕宽度和 0~100 的进度数值来等比计算出实际的宽度，再计算出移动的速度，计算出来每个进度段的数据后，讲它们放进一个列表容器里面，然后通过一个 handler 来循环提取同期数据，不断地发消息，不停地 setLayoutParam。在达到 100 后，就证明加载完毕。

　　在这个过程需要处理计算的误差，例如第一个加载 20，第二次24，24-20 = 4,4/100，程序里面是 0 ，如果计算速度的话，就会差生0，所以要稍微加个 if 判断。

四，代码，内涵注释

　　核心类：


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;

public class SlowlyProgressBar {
 private static final int StartAnimation = 0x12;
 private Handler handler;
 private View view;
 
 private int thisWidth = 0;
 private int thisSpeed = 0;
 private int progress = 0; 
 private int record = 0; 
 private int width = 10; 
 private int height = 3; 
 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;
 }
 public void setProgress(int progress){
 if(progress>100 || progress <= 0){ 
 return;
 }
 
 
 this.width = (progress * phoneWidth)/100;
 
 
 int size = progressQuery.size();
 if(size != 0){
 size = progressQuery.get(size-1);
 }
 Log.d("zzzzz","width - size = "+(width - size));
 
 int distance = width - size;
 int speedTime;
 if(distance<=100){
 speedTime = 2;
 }else{
 speedTime = (int) ((2 * distance)/100.0);
 }
 
 progressQuery.add(this.width);
 speedQuery.add(speedTime);
 
 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(progress >= thisWidth){ 
  if(progressQuery.size() == i){
  Log.d("zzzzz","break");
  if(progress >= 100){ 
   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);
  
  handler.sendEmptyMessageDelayed(StartAnimation,1);
  break;
 }
 }
 };
 }
 
 private void move(int speedTime,int lastWidth){
 if(speedTime > 9){
 speedTime = 9; 
 }
 
 progress = (record * speedTime);
 
 if(progress >= lastWidth){
 view.setLayoutParams(new RelativeLayout.LayoutParams(progress,height*3));
 }else{
 Log.d("zzzzz","hit "+progress+"---"+lastWidth);
 }
 record ++;
 }
}

五，使用方法与截图

　　超简单引入，view 可以是随便一个，例如 TextView，给它一个 background 就行了，就有颜色了。


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;
 }
 }
}