Android -- 真正的 高仿微信 打开网页的进度条效果

(本博客为原创,https://cloud.tencent.com/developer/user/1148436/activities)

目录:

  一,为什么说是真正的高仿?

  二,为什么要搞缓慢效果?

  三,我的实现思路

  四,代码,内含注释

  五,使用方法与截图

  六,完整项目

一,为什么说是真正的高仿?

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

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

/** 先实例化个进度条 */
ProgressBar mProgressBar = (ProgressBar) findViewById(R.id.ProgressBar);

/** 再实例化个 webView */
WebView webView = (WebView) findViewById(R.id.webview);

/** 然后就直接在 webClient 回调函数里面set 进度,这样的做法是生硬的效果 */
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;

/**
 * Created by 林冠宏 on 2016/7/11.
 *
 * 真正的仿微信网页打开的进度条
 *
 * 下面的所有属性都可以自己采用 get set 来自定义
 *
 */

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

    /** 善后工作,释放引用的持有,方能 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){ /** 不能超过100 */
            return;
        }
        /** 每次传入的 width 应该是包含之前的数值,所以下面要减去 */
        /** 下面记得转化比例,公式 (屏幕宽度 * progress / 100) */
        this.width = (progress * phoneWidth)/100;

        /** lp.width 总是获取前一次的 大小 */
        /** 移动 100px 时的速度一次倍率 是 2 */
        int size = progressQuery.size();
        if(size != 0){
            size = progressQuery.get(size-1);
        }
        Log.d("zzzzz","width - size = "+(width - size));
        /** 计算倍率,2/100 = x/width */
        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; /** 控制最大倍率 */
        }
        /** 乘 3 是纠正误差 */
        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;
        }
    }
}

六,完整项目

https://github.com/af913337456/SlowlyProgressBar

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏芋道源码1024

【Netty 专栏】深入浅出 Netty write

上一章节中,分析了Netty如何处理read事件,本节分析Netty如何把数据写会客户端。

690
来自专栏大大的微笑

web项目定时执行任务

首先写了个servlet 例如 package com.uap.weixin.service; import java.text.DateFormat; im...

1816
来自专栏YG小书屋

Hadoop Streaming 读ORC文件

hadoop Streaming的处理流程是先通过inputFormat读出输入文件内容,将其传递mapper,再将mapper返回的key,value传给re...

112
来自专栏程序员互动联盟

Android Metro风格的Launcher开发系列第三篇

前言: 各位小伙伴,又到了每周更新文章的时候了,本来是周日能发出来的,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客 ...

3798
来自专栏developerHaoz 的安卓之旅

Android Volley 源码解析(三),图片加载的实现

在上一篇文章中,我们一起深入探究了 Volley 的缓存机制,通过源码分析对缓存的工作原理进行了了解,这篇文章将带大家一起探究「Volley 图片加载的实现」,...

682
来自专栏闻道于事

Java实现word文档在线预览,读取office(word,excel,ppt)文件

2K6
来自专栏琯琯博客

JavaScript 103 条技能

1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var ic...

2366
来自专栏封碎

Android自由选择TextView的文字 博客分类: Android AndroidUP

      用过EditText的都知道,EditText有个特点,当在里面长按的时候,会出现一个ContextMenu,提供了选择文字,复制,剪切等功能。有时...

681
来自专栏Android干货园

Android源码解析--SwipeMenuListView仿QQ聊天左滑

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50...

891
来自专栏青蛙要fly的专栏

项目需求讨论-Vlayout来快速构建及扩展复杂界面

大家好,今天又带来了项目中具体遇到的需求。做一个首界面,该首界面有很多功能块,同时这些功能块是动态的,因为登录的人的权限的不同,会显示不同的功能块,因为功能模块...

1092

扫码关注云+社区