android webview中的进度条 [英] progress bar in android webview

问题描述

我正在尝试使用 WebViewClient 在 android webview 中添加进度条.它显示进度条、文本(正在加载)，页面的其余部分只是一个空白页面.

I am trying to add a progress bar in android webview using WebViewClient. It displays the progress bar, a text (loading) and rest of the page is just a blank page.

我想在加载下一页时保留当前页面并在当前页面顶部显示进度条，这样用户就不必看到空白的加载页面..

I want to keep the current page while loading the next page and display the progress bar on the top of the current page, so that user don't have to see the blank loading page..

有人可以帮我吗?如何在顶部显示进度条的同时保持当前页面的摄入量，直到下一页 100% 加载.

May someone please help me with that? How to keep the current page intake while showing the progress bar on top, until the next page is 100% loaded.

推荐答案

public class About extends AppCompatActivity {

    WebView myWebView;
    ProgressBar progressBar;
    FrameLayout frameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_about);

        Toolbar toolbar = findViewById(R.id.toolbar);
        toolbar.setTitle("About CreativeGraphy");
        setSupportActionBar(toolbar);
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }

        progressBar = findViewById(R.id.progress_bar);
        frameLayout = findViewById(R.id.frame_loading);
        progressBar.setMax(100);

        myWebView = findViewById(R.id.webview);
        myWebView.loadUrl("http://www.google.co.in/");
        myWebView.setWebViewClient(new HelpClient());

        myWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                frameLayout.setVisibility(View.VISIBLE);
                progressBar.setProgress(newProgress);
                setTitle("Loading....");
                if (newProgress == 100) {
                    frameLayout.setVisibility(View.GONE);
                    //setTitle(View.getTitle());
                }
                super.onProgressChanged(view, newProgress);
            }
        });
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.setVerticalScrollBarEnabled(false);
        progressBar.setProgress(0);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        }//close activity when click back button
        return super.onOptionsItemSelected(item);
    }

    public void onBackPressed() {
        if (myWebView.canGoBack()) {
            myWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK)) {
            if (myWebView.canGoBack()) {
                myWebView.goBack();
                return true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

    private class HelpClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            frameLayout.setVisibility(View.VISIBLE);
            return true;
        }
    }
}

试试这个它有加载

布局

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".About">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/ToolbarColoredBackArrow" />
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/frame_loading"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_below="@id/app_bar"
        android:background="@android:color/transparent">

        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="8dp"
            android:layout_gravity="top"
            android:layout_marginTop="-3dp"
            android:background="@android:color/transparent"
            android:progress="20"
            android:progressDrawable="@drawable/progress_cyclic" />
    </FrameLayout>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/frame_loading" />

</RelativeLayout>

如果它的 100% 加载可见，请尝试使用 2 个 webview，另一个第一个消失的将保留，而其他加载时第二个 web 视图开始加载

try using 2 webview if its 100% loaded visible it other one gone first will stay while other loads when it is loaded second web view starts loading

这篇关于android webview中的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！