带进度条的WebVeiw实现以及进度条和webview之间有空隙的解决方法

带进度条的WebVeiw实现以及进度条和webview之间有空隙的解决方法

给WebView顶部添加加载进度条是非常常用的功能，实现方法也很简单，主要有两种方案：

解决思路

• 在布局文件里直接添加ProgressBar

简单粗暴，但是自带的ProgressBar的样式固定，不可控，很可能不满足项目需求

• 集成在WebView里

定制灵活，可完美解决进度条与webview之间的空隙的BUG

实现方法

一、直接在布局文件里实现

布局文件如下：webview_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressbar"
        android:layout_width="match_parent"
        android:layout_height="5dp"/>

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

代码如下：

public class WebViewActivity extends BaseActivity  {
  @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.webview_layout);
       webView = (WebView) findViewById(R.id.webview);
       progressbar =(ProgressBar) findViewById(R.id.progressbar);

      //重写WebChromeClient的onProgressChanged()方法显示进度
       webView.setWebChromeClient(new WebChromeClient() {
         @Override
         public void onProgressChanged(WebView view, int newProgress) {
             if (newProgress == 100) {
                 progressbar.setVisibility(View.INVISIBLE);
             } else {
                 if (View.INVISIBLE == progressbar.getVisibility()) {
                     progressbar.setVisibility(View.VISIBLE);
                 }
                 progressbar.setProgress(newProgress);
             }
             super.onProgressChanged(view, newProgress);
         }

     });
       }
}

二、集成在WebView控件中

该方法需要将progressbar集成到webview，需要重写webview并自定义progressbar的样式

自定义progressbar样式：

progress_bar_states.xml

<?xml version="1.0" encoding="utf-8"?>  
<!--WebView顶端的进度条的样式-->  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- 进度条背景色 -->
    <item android:id="@android:id/background">  
        <shape>  
            <corners android:radius="2dp" />  
            <gradient  
                android:angle="270"  
                android:centerColor="#E3E3E3"  
                android:endColor="#E6E6E6"  
                android:startColor="#C8C8C8" />  
        </shape>  
    </item>  
    <!--加载中的进度条的样式-->
    <item android:id="@android:id/progress">  
        <clip>  
            <shape>  
                <corners android:radius="2dp" />  
                <!-- 颜色可随便定义为自己需要的颜色 -->
                <gradient  
                    android:centerColor="#4AEA2F"  
                    android:endColor="#31CE15"  
                    android:startColor="#5FEC46" />  
            </shape>  
        </clip>  
    </item>  
</layer-list>

重写Webview

WebViewWithProgress.java

public class WebViewWithProgress extends WebView {
    private ProgressBar progressBar;

    public WebViewWithProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        /** 在initView之前先判断了一个情况： isInEditMode()， 加入这个函数是不会在XML文件
          * 打开时弹出一个冗长的错误。也可以不判断
          */
        if (!isInEditMode()) {
            initView(context);
        }
        getSettings().setDomStorageEnabled(true);

    }

    private void initView(Context context) {
        progressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 10, 0, 0);
        progressBar.setLayoutParams(params);
        Drawable drawable;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            drawable = context.getResources().getDrawable(R.drawable.progress_bar_states, null);
        } else {
            drawable = context.getResources().getDrawable(R.drawable.progress_bar_states);

        }
        progressBar.setProgressDrawable(drawable);
        addView(progressBar);

    }

    public ProgressBar getProgressBar() {
        return progressBar;
    }

  }

布局文件

布局文件直接使用用WebViewWithProgress

...

<com.bsty.library.webview.WebViewWithProgress
   android:id="@+id/webview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   />

...

代码调用自定义的Webview

调用的代码也直接调用，就如初始的Webview一样

ProgressBar progressBar;
private WebViewWithProgress webView;
@Override
   public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.webview_layout);
         webView = (WebViewWithProgress) findViewById(R.id.webview);
         progressBar = webview.getProgressBar();


         progressBar = webView.getProgressBar();
          //重写WebChromeClient的onProgressChanged()方法显示进度
         webView.setWebChromeClient(new WebChromeClient() {
           @Override
           public void onProgressChanged(WebView view, int newProgress) {
               if (newProgress == 100) {
                   progressbar.setVisibility(View.INVISIBLE);
               } else {
                   if (View.INVISIBLE == progressbar.getVisibility()) {
                       progressbar.setVisibility(View.VISIBLE);
                   }
                   progressbar.setProgress(newProgress);
               }
               super.onProgressChanged(view, newProgress);
           }

       });