【Android】自定義帶進度條的WebView，修復不彈出軟鍵盤的BUG
阿新 • • 發佈：2019-02-20
記錄下最近開發中研究的帶進度條的WebView 自定義類吧。
其實網上有不少這樣的帖子，但是都沒有一個完整的好用的例子，最關鍵的是，用網上的例子後有一個很明顯的bug，就是遇到輸入框的話沒法彈出軟鍵盤。研究了好久總算搞定了。特此記錄下。
直接上原始碼，關於程式碼的解釋，個人感覺註釋中已經新增的足夠清楚了。
ProgressWebView
import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.ProgressBar; import com.touziqu.sealily.newinvestmentgo.R; import com.touziqu.sealily.newinvestmentgo.Utils.LogUtils; import com.touziqu.sealily.newinvestmentgo.Utils.OnWebCallBack; /** * File Description: 自定義帶有進度條的webview * 繼承自{@link WebView} * Created by KAKA on 16/1/19 22:21 * 主要在{@link ProgressWebView#ProgressWebView(Context, AttributeSet, int)}中完成例項的構建 * 使用{@link ProgressWebView#ProgressWebView(Context, AttributeSet)}時要注意destyle型別的設定 */ @SuppressWarnings("deprecation") public class ProgressWebView extends WebView { /** * 進度條 */ private ProgressBar progress_bar_; /** * 回撥 */ private OnWebCallBack onweb_callback_; /** * Description: Default Constructor * Created by KAKA on 16/1/19 22:23 */ public ProgressWebView(Context context) { super(context); } /** * 不能直接呼叫this(context, attrs,0),最後style是0的話，會導致無法響應點選動作。 * 但是如果直接把最後一位寫成 com.android.internal.R.attr.webViewStyle 編譯時會彈出錯誤提示，原因： * You cannot access id's of com.android.internal.R at compile time, but you can access the * defined internal resources at runtime and get the resource by name. * You should be aware that this is slower than direct access and there is no guarantee. */ public ProgressWebView(Context context, AttributeSet attrs) { this(context, attrs, Resources.getSystem().getIdentifier("webViewStyle","attr","android")); } /** * Description: Copy Constructor * Created by KAKA on 16/1/19 22:23 * isInEditMode函式的作用是去除開啟XML文件時提示的錯誤 */ public ProgressWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); if (!isInEditMode()) { initView(context); } setWebViewClient(new MyWebViewClient()); setWebChromeClient(new WebChromeClient()); } /** * Description: 初始化介面元素 * Created by KAKA on 16/1/20 09:43 * LayoutParams中第2個引數表示的是progress_bar的高度大小 */ private void initView(final Context context) { progress_bar_ = new ProgressBar(context,null, android.R.attr.progressBarStyleHorizontal); progress_bar_.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 20, 0, 0)); // 新增drawable Drawable drawable = context.getResources().getDrawable(R.drawable.progress_bar_states); progress_bar_.setProgressDrawable(drawable); this.addView(progress_bar_); } /** * Description: 設定webview的回撥器 * Created by KAKA on 16/1/20 13:56 */ public void setOnWebCallback(OnWebCallBack onwebcallback) { this.onweb_callback_ = onwebcallback; } /** * Description: 重寫WebViewClient類，不重寫的話會跳轉預設瀏覽器 * Created by KAKA on 16/1/19 23:26 */ public class MyWebViewClient extends WebViewClient { @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { // Handle the goBack() ; } @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } /** * Description: 獲取請求頁面的URL * Created by KAKA on 16/1/20 13:54 */ @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { if (onweb_callback_ != null) { onweb_callback_.getUrl(url); } } } /** * Description: 重寫webChromeClient類 * Created by KAKA on 16/1/19 22:40 */ public class WebChromeClient extends android.webkit.WebChromeClient { @Override public void onProgressChanged(WebView view, int newProgress) { LogUtils.i("當前進度",newProgress + "%"); if (newProgress == 100) { progress_bar_.setVisibility(GONE); } else { if (progress_bar_.getVisibility() == GONE) { progress_bar_.setVisibility(VISIBLE); } progress_bar_.setProgress(newProgress); } super.onProgressChanged(view,newProgress); } /** * Description: 獲取頁面的標題 * Created by KAKA on 16/1/20 13:54 */ @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view,title); if (onweb_callback_ != null ) { onweb_callback_.getTitle(title); } } } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { LayoutParams lp = (LayoutParams) progress_bar_.getLayoutParams(); lp.x = l; lp.y = t; progress_bar_.setLayoutParams(lp); super.onScrollChanged(l, t, oldl, oldt); } }
兩個要點：
1. 在建構函式中 不能直接呼叫this(context, attrs,0),最後style是0的話，會導致無法響應點選動作。同時也不能直接寫成
com.android.internal.R.attr.webview ，具體的原因註釋裡面已經寫的很清楚了
2. 在initView之前先判斷了一個情況： isInEditMode()， 加入這個函式是不會在XML檔案開啟時彈出一個冗長的錯誤。其實不加這個判斷條件也可以，但是作為重度強迫症患者，必須把XML檔案上煩人的提示給去掉才行。。。
接下來看一下進度條的drawable檔案
progress_bar_states.XML
<?xml version="1.0" encoding="utf-8"?> <!--WebView頂端的進度條的樣式--> <!--layer-list 層疊樣式--> <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>
最後對我們自定義的progresswebview的呼叫就像普通的web view一樣了。
例如在某個activity中用下面的方式來呼叫（XML檔案我就不列出了，非常簡單）：
web_view_ 是我們定義的private 成員變數，然後它對應這XML檔案中id是web_view的progressWebView控制元件。web_view_ = (ProgressWebView) view.findViewById(R.id.web_view); web_view_.setOnWebCallback(new OnWebCallBack() { // 設定回撥 @Override public void getTitle(String title) { LogUtils.i("當前頁面的標題", title); } @Override public void getUrl(String url) { LogUtils.i("訪問頁面的url是", url); } }); web_view_.loadUrl("http://m.baidu.com"); web_view_.getSettings().setJavaScriptEnabled(true);
回撥的作用你可以看到當前訪問的URL的頁面標題和地址。
最後如果你的頁面有用到JS，一定要設定JS為enable。