Android WebView顶部进度条

作者: 洪生鹏 | 来源:发表于2016-06-27 09:40 被阅读11676次

项目中用到WebView加上进度条放在顶部,让用户知道加载进度情况,可以提高用户体验:
效果:


加载显示进度条.jpg

下面我们来实现这个效果:

自定义ProgressWebView 继承WebView

  1. 创建WebChromeClient 继承WebChromeClie
public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                mProgressBar.setVisibility(GONE);
            } else {
                if (mProgressBar.getVisibility() == GONE)
                    mProgressBar.setVisibility(VISIBLE);
                mProgressBar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }
    }
  1. 重新onScrollChanged
@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) mProgressBar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        mProgressBar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
  1. 构造方法
public ProgressWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mProgressBar = new ProgressBar(context, null,
                android.R.attr.progressBarStyleHorizontal);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, 8);
        mProgressBar.setLayoutParams(layoutParams);

        Drawable drawable = context.getResources().getDrawable(
                R.drawable.web_progress_bar_states);
        mProgressBar.setProgressDrawable(drawable);
        addView(mProgressBar);
        setWebChromeClient(new WebChromeClient());
    }

完整ProgressWebView类代码 :

public class ProgressWebView extends WebView {
    private ProgressBar mProgressBar;

    public ProgressWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mProgressBar = new ProgressBar(context, null,
                android.R.attr.progressBarStyleHorizontal);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, 8);
        mProgressBar.setLayoutParams(layoutParams);

        Drawable drawable = context.getResources().getDrawable(
                R.drawable.web_progress_bar_states);
        mProgressBar.setProgressDrawable(drawable);
        addView(mProgressBar);
        setWebChromeClient(new WebChromeClient());
    }

    public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                mProgressBar.setVisibility(GONE);
            } else {
                if (mProgressBar.getVisibility() == GONE)
                    mProgressBar.setVisibility(VISIBLE);
                mProgressBar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LayoutParams lp = (LayoutParams) mProgressBar.getLayoutParams();
        lp.x = l;
        lp.y = t;
        mProgressBar.setLayoutParams(lp);
        super.onScrollChanged(l, t, oldl, oldt);
    }
}

如何使用

  1. xml布局引用
<com.aikaifa.webview.ProgressWebView
        android:id="@+id/baseweb_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

其中com.aikaifa.webview 为包名,你可以改成你自己的包名

  1. 找到ProgressWebView控件

  mWebView = (ProgressWebView) findViewById(R.id.baseweb_webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
                mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return false;
            }
        });
        String url ="http://mp.weixin.qq.com/s?__biz=MzAwODQ5MTA2NQ==&mid=402389923&idx=1&sn=3c89c329e7bf83ce8ff2364726ebd6a7#rd";
        mWebView.loadUrl(url);

注意一点,不要漏了在AndroidManifest.xml 加上网络权限

<uses-permission android:name="android.permission.INTERNET" />

最终效果:

加载中.jpg

这样WebView顶部进度条就实现完毕了。

相关文章

网友评论

  • NewInstance:在进度条存在的时候快速滑动webview,进度条的位置显示会有问题
  • e1260fdeea97:写的不错,但有些情况下效果是有问题,谢谢分享
    https://blog.csdn.net/menglele1314/article/details/49421693 里看到有几种,有一种正合适我用,
  • ytousxl:你好,为什么加载网页的时候滑动后,上面的进度条就消失了
    三棵猴面包树:我也在想这是为啥
  • 城平京:谢谢,已打赏
  • f49cef042ed7:进度条不会加载到右边界,因为newprogress这个值是不连续的,有可能从50直接调到了100 求解决😰
    微凉一季:@韩老板 。。。。估计只能自己写个假的了
    f49cef042ed7:@微凉一季 没
    微凉一季:@韩老板 解决了吗
  • 乘风破浪的程序员:楼主能否把R.drawable.web_progress_bar_states 贴一下
    乘风破浪的程序员:@爱开发 好的 ,谢谢
    洪生鹏:@hante <layer-list xmlns:android="http://schemas.android.com/apk/res/android&quot;>

    <item android:id="@android:id/background">
    <shape>
    <gradient
    android:startColor="#ff0000"
    android:centerColor="#ffa600"
    android:endColor="#ff5500"

    />
    </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
    <clip>
    <shape>
    <gradient
    android:startColor="#234"
    android:centerColor="#234"
    android:endColor="#a24"
    />
    </shape>
    </clip>
    </item>

    <item android:id="@android:id/progress">
    <clip>
    <shape>
    <gradient
    android:startColor="#33000001"
    android:centerColor="#40000000"
    android:endColor="#44000000"
    />
    </shape>
    </clip>
    </item>

    </layer-list>
    洪生鹏:@hante 好,在外面,回去贴
  • MarkShaun:为什么我的progress只出现了两个值,一个15, 一个100,进度不是很明显。
    微凉一季:@MarkShaun 这个回调本来就不是连续的,所以实现的进度条也不会是连续的。效果不是很好
    洪生鹏:@o柚子o 是不是网速太快了:smile:
  • 811c6f3efa99:学习
    洪生鹏:@杜远航 一起学习,一起进步
  • 我说今晚月光这么美你说是的:你好,这个重写方法onScrollChanged()没找到???为什么
    洪生鹏:@子陌清扬 :smile: 有这回事
    我说今晚月光这么美你说是的: @爱开发 老兄,你这个进度貌似不准确吧,这么一进来就是100%
    洪生鹏:@子陌清扬 应该是sdk版本的问题 你在前面加上@SuppressWarnings("deprecation") 这个试试
  • coco猫:progressbar onsrcoll 滑动时好像不稳定
    洪生鹏:@coco猫 我试了,暂时没发现

本文标题:Android WebView顶部进度条

本文链接:https://www.haomeiwen.com/subject/sfszdttx.html