Android學習——WebView的用法
WebView介紹
Android WebView在Android平臺上是一個特殊的View, 基於webkit引擎、展現web頁面的控制元件,這個類可以被用來在你的app中僅僅顯示一張線上的網頁,還可以用來開發瀏覽器。WebView內部實現是採用渲染引擎來展示view的內容,提供網頁前進後退,網頁放大,縮小,搜尋。Android的Webview在低版本和高版本採用了不同的webkit版本核心,4.4後直接使用了Chrome。
現在很多APP都內建了Web網頁,比如說很多電商平臺,淘寶、京東、聚划算等等。WebView比較靈活,不需要升級客戶端,只需要修改網頁程式碼即可。一些經常變化的頁面可以用WebView這種方式去載入網頁。例如中秋節跟國慶節開啟的頁面不一樣,如果是用WebView顯示的話,只修改修改html頁面就行,而不需要升級客戶端。
Webview功能強大,可以直接使用html檔案(本地sdcard/assets目錄),還可以直接載入url,使用JavaScript可以html跟原生APP互調。
簡單使用
因為需要載入網頁url,所以需要在AndroidManifest.xml中新增訪問網路許可權。
1 <uses-permission android:name="android.permission.INTERNET" />
佈局檔案:activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"/> <ProgressBar android:id="@+id/progressbar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="3dip" android:max="100" android:progress="0" android:visibility="gone"/> </FrameLayout>
外層FrameLayout,裡面有WebView跟ProgressBar,WebView的寬高匹配父類,ProgressBar橫向進度條,高度3dip,按照FrameLayout佈局規則,ProgressBar會覆蓋在WebView之上,預設是隱藏不顯示。
MainActivity.java
public class MainActivity extends AppCompatActivity { private WebView webView; private ProgressBar progressBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); progressBar= (ProgressBar)findViewById(R.id.progressbar);//進度條 webView = (WebView) findViewById(R.id.webview); // webView.loadUrl("file:///android_asset/test.html");//載入asset資料夾下html webView.loadUrl("http://139.196.35.30:8080/OkHttpTest/apppackage/test.html");//載入url //使用webview顯示html程式碼 // webView.loadDataWithBaseURL(null,"<html><head><title> 歡迎您 </title></head>" + // "<body><h2>使用webview顯示 html程式碼</h2></body></html>", "text/html" , "utf-8", null); webView.addJavascriptInterface(this,"android");//新增js監聽 這樣html就能呼叫客戶端 webView.setWebChromeClient(webChromeClient); webView.setWebViewClient(webViewClient); WebSettings webSettings=webView.getSettings(); webSettings.setJavaScriptEnabled(true);//允許使用js /** * LOAD_CACHE_ONLY: 不使用網路,只讀取本地快取資料 * LOAD_DEFAULT: (預設)根據cache-control決定是否從網路上取資料。 * LOAD_NO_CACHE: 不使用快取,只從網路獲取資料. * LOAD_CACHE_ELSE_NETWORK,只要本地有,無論是否過期,或者no-cache,都使用快取中的資料。 */ webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用快取,只從網路獲取資料. //支援螢幕縮放 webSettings.setSupportZoom(true); webSettings.setBuiltInZoomControls(true); //不顯示webview縮放按鈕 // webSettings.setDisplayZoomControls(false); } //WebViewClient主要幫助WebView處理各種通知、請求事件 private WebViewClient webViewClient=new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) {//頁面載入完成 progressBar.setVisibility(View.GONE); } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) {//頁面開始載入 progressBar.setVisibility(View.VISIBLE); } @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { Log.i("ansen","攔截url:"+url); if(url.equals("http://www.google.com/")){ Toast.makeText(MainActivity.this,"國內不能訪問google,攔截該url",Toast.LENGTH_LONG).show(); return true;//表示我已經處理過了 } return super.shouldOverrideUrlLoading(view, url); } }; //WebChromeClient主要輔助WebView處理Javascript的對話方塊、網站圖示、網站title、載入進度等 private WebChromeClient webChromeClient=new WebChromeClient(){ //不支援js的alert彈窗,需要自己監聽然後通過dialog彈窗 @Override public boolean onJsAlert(WebView webView, String url, String message, JsResult result) { AlertDialog.Builder localBuilder = new AlertDialog.Builder(webView.getContext()); localBuilder.setMessage(message).setPositiveButton("確定",null); localBuilder.setCancelable(false); localBuilder.create().show(); //注意: //必須要這一句程式碼:result.confirm()表示: //處理結果為確定狀態同時喚醒WebCore執行緒 //否則不能繼續點選按鈕 result.confirm(); return true; } //獲取網頁標題 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); Log.i("ansen","網頁標題:"+title); } //載入進度回撥 @Override public void onProgressChanged(WebView view, int newProgress) { progressBar.setProgress(newProgress); } }; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { Log.i("ansen","是否有上一個頁面:"+webView.canGoBack()); if (webView.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK){//點選返回按鈕的時候判斷有沒有上一頁 webView.goBack(); // goBack()表示返回webView的上一頁面 return true; } return super.onKeyDown(keyCode,event); } /** * JS呼叫android的方法 * @param str * @return */ @JavascriptInterface //仍然必不可少 public void getClient(String str){ Log.i("ansen","html呼叫客戶端:"+str); } @Override protected void onDestroy() { super.onDestroy(); //釋放資源 webView.destroy(); webView=null; } }
onCreate 查詢控制元件,給webView設定載入url,新增js監聽,監聽的名稱是”android”,設定webChromeClient跟webViewClient回撥,通過getSettings方法獲取WebSettings物件,設定允許載入js,設定快取模式,支援縮放。
webViewClient 重寫了幾個方法,onPageFinished頁面載入完成隱藏進度條,onPageStarted頁面開始載入顯示進度條,shouldOverrideUrlLoading攔截url,如果請求url是開啟google,不讓他請求,因為google在國內不能訪問,就算請求也請求不到還不如攔截掉,直接告訴使用者不能訪問。
webChromeClient onJsAlert()因為WebView不支援alert彈窗,在這個方法中用AlertDialog去彈窗。onReceivedTitle獲取網頁標題。onProgressChanged頁面載入進度,把載入進度給progressBar。
onKeyDown 如果點選系統自帶返回鍵&&webView有上一級頁面,呼叫goBack返回。否則不處理。什麼時候輝有上一級頁面呢?就是你從首頁跳轉到了一個新頁面,點選返回的時候會返回首頁。如果本來就在首頁點選返回的時候會退出app。
getClient html頁面的JS可以通過這個方法回撥原生APP,這個方法有個註解@JavascriptInterface,這個是必須的,這個方法有個字串引數,這個方法跟我們在onCreate中呼叫addJavascriptInterface傳入的name一起使用的。例如html中想要回調這個方法可以這樣寫:javascript:android.getClient(“傳一個字串給客戶端”);
onDestroy activity銷燬時釋放webView資源。