android webview中的进度条

Posted 2023-04-18

【中文标题】android webview中的进度条

【英文标题】：progress bar in android webview

【发布时间】：2019-03-26 05:53:18

【问题描述】：

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

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

有人可以帮我解决这个问题吗？如何在顶部显示进度条的同时保持当前页面摄入量，直到下一页加载 100%。

【问题讨论】：

请添加一些代码sn-ps！

【参考方案1】：

这可能会有所帮助，来源：ProgressBar with WebView

您可以通过webview 类中的getProgress 方法跟踪进度状态。

初始化进度状态

private int mProgressStatus = 0;

然后是这样加载的 AsyncTask：

private class Task_News_ArticleView extends AsyncTask<Void, Void, Void> 
    private final ProgressDialog dialog = new ProgressDialog(
            your_class.this);

    // can use UI thread here
    protected void onPreExecute() 
        this.dialog.setMessage("Loading...");
        this.dialog.setCancelable(false);
        this.dialog.show();
    

    @Override
    protected Void doInBackground(Void... params) 
        try 
            while (mProgressStatus < 100) 
                mProgressStatus = webview.getProgress();

            
         catch (Exception e) 

        
        return null;

    

    protected void onPostExecute(Void result) 
        if (this.dialog.isShowing()) 
            this.dialog.dismiss();
        
    

【参考方案2】：

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_
    android:layout_
    android:orientation="horizontal"
    tools:context=".About">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/ToolbarColoredBackArrow" />
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/frame_loading"
        android:layout_
        android:layout_
        android:layout_below="@id/app_bar"
        android:background="@android:color/transparent">

        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_
            android:layout_
            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_
        android:layout_
        android:layout_below="@id/frame_loading" />

</RelativeLayout>

如果 100% 加载可见，则尝试使用 2 个 webview