Android WebView基本使用

時間  2019-12-07
標籤 android webview 基本 使用 欄目 Android 简体版
原文   原文鏈接

轉載請註明出處:javascript

http://blog.csdn.net/lowprofile_coding/article/details/77928614

WebView介紹

Android WebView在Android平臺上是一個特殊的View， 基於webkit引擎、展示web頁面的控件，這個類能夠被用來在你的app中僅僅顯示一張在線的網頁，還能夠用來開發瀏覽器。WebView內部實現是採用渲染引擎來展現view的內容，提供網頁前進後退，網頁放大，縮小，搜索。Android的Webview在低版本和高版本採用了不一樣的webkit版本內核，4.4後直接使用了Chrome。html

如今不少APP都內置了Web網頁，好比說不少電商平臺，淘寶、京東、聚划算等等。WebView比較靈活，不須要升級客戶端，只須要修改網頁代碼便可。一些常常變化的頁面能夠用WebView這種方式去加載網頁。例如中秋節跟國慶節打開的頁面不同，若是是用WebView顯示的話，只修改修改html頁面就行，而不須要升級客戶端。java

Webview功能強大，能夠直接使用html文件（本地sdcard/assets目錄），還能夠直接加載url，使用JavaScript能夠html跟原生APP互調。android

加載html四種方式

webView.loadUrl("http://139.196.35.30:8080/OkHttpTest/apppackage/test.html");//加載url

webView.loadUrl("file:///android_asset/test.html");//加載asset文件夾下html

//方式3：加載手機sdcard上的html頁面
webView.loadUrl("content://com.ansen.webview/sdcard/test.html");

//方式4 使用webview顯示html代碼
webView.loadDataWithBaseURL(null,"<html><head><title> 歡迎您 </title></head>" +
        "<body><h2>使用webview顯示 html代碼</h2></body></html>", "text/html" , "utf-8", null);

WebViewClient與WebChromeClient區別

使用WebView基本都會使用這兩個類，那他們有哪些區別呢？git

WebViewClient主要幫助WebView處理各類通知、請求事件的，有如下經常使用方法：github

  • onPageFinished 頁面請求完成
  • onPageStarted 頁面開始加載
  • shouldOverrideUrlLoading 攔截url
  • onReceivedError 訪問錯誤時回調，例如訪問網頁時報錯404，在這個方法回調的時候能夠加載錯誤頁面。

WebChromeClient主要輔助WebView處理Javascript的對話框、網站圖標、網站title、加載進度等，有如下經常使用方法。web

  • onJsAlert webview不支持js的alert彈窗，須要本身監聽而後經過dialog彈窗
  • onReceivedTitle 獲取網頁標題
  • onReceivedIcon 獲取網頁icon
  • onProgressChanged 加載進度回調

簡單使用

由於須要加載網頁url，因此須要在AndroidManifest.xml中添加訪問網絡權限。chrome

<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資源。

運行代碼，效果圖以下:
效果圖

源碼下載

若是你想第一時間看個人後期文章，掃碼關注公衆號，每週不按期推送Android開發實戰教程文章...

Android開發666 - 安卓開發技術分享
             掃描二維碼加關注

Android開發666

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程