Android WebView基本使用

轉(zhuǎn)載請注明出處:

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

WebView介紹

Android WebView在Android平臺上是一個特殊的View橄仆, 基于webkit引擎、展現(xiàn)web頁面的控件衅斩,這個類可以被用來在你的app中僅僅顯示一張?jiān)诰€的網(wǎng)頁盆顾,還可以用來開發(fā)瀏覽器。WebView內(nèi)部實(shí)現(xiàn)是采用渲染引擎來展示view的內(nèi)容畏梆,提供網(wǎng)頁前進(jìn)后退您宪,網(wǎng)頁放大奈懒,縮小,搜索宪巨。Android的Webview在低版本和高版本采用了不同的webkit版本內(nèi)核磷杏,4.4后直接使用了Chrome。

現(xiàn)在很多APP都內(nèi)置了Web網(wǎng)頁捏卓,比如說很多電商平臺极祸,淘寶、京東怠晴、聚劃算等等贿肩。WebView比較靈活,不需要升級客戶端龄寞,只需要修改網(wǎng)頁代碼即可。一些經(jīng)常變化的頁面可以用WebView這種方式去加載網(wǎng)頁汤功。例如中秋節(jié)跟國慶節(jié)打開的頁面不一樣物邑,如果是用WebView顯示的話,只修改修改html頁面就行滔金,而不需要升級客戶端色解。

Webview功能強(qiáng)大,可以直接使用html文件(本地sdcard/assets目錄)餐茵,還可以直接加載url科阎,使用JavaScript可以html跟原生APP互調(diào)。

加載html四種方式

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

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

//方式3:加載手機(jī)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區(qū)別

使用WebView基本都會使用這兩個類忿族,那他們有哪些區(qū)別呢锣笨?

WebViewClient主要幫助WebView處理各種通知、請求事件的道批,有以下常用方法:

  • onPageFinished 頁面請求完成
  • onPageStarted 頁面開始加載
  • shouldOverrideUrlLoading 攔截url
  • onReceivedError 訪問錯誤時回調(diào)错英,例如訪問網(wǎng)頁時報(bào)錯404隆豹,在這個方法回調(diào)的時候可以加載錯誤頁面。

WebChromeClient主要輔助WebView處理Javascript的對話框璃赡、網(wǎng)站圖標(biāo)判哥、網(wǎng)站title碉考、加載進(jìn)度等,有以下常用方法侯谁。

  • onJsAlert webview不支持js的alert彈窗瞒渠,需要自己監(jiān)聽然后通過dialog彈窗
  • onReceivedTitle 獲取網(wǎng)頁標(biāo)題
  • onReceivedIcon 獲取網(wǎng)頁icon
  • onProgressChanged 加載進(jìn)度回調(diào)

簡單使用

因?yàn)樾枰虞d網(wǎng)頁url,所以需要在AndroidManifest.xml中添加訪問網(wǎng)絡(luò)權(quán)限技扼。

<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橫向進(jìn)度條窍箍,高度3dip,按照FrameLayout布局規(guī)則丽旅,ProgressBar會覆蓋在WebView之上椰棘,默認(rèn)是隱藏不顯示。

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);//進(jìn)度條

        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監(jiān)聽 這樣html就能調(diào)用客戶端
        webView.setWebChromeClient(webChromeClient);
        webView.setWebViewClient(webViewClient);

        WebSettings webSettings=webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//允許使用js

        /**
         * LOAD_CACHE_ONLY: 不使用網(wǎng)絡(luò)榄笙,只讀取本地緩存數(shù)據(jù)
         * LOAD_DEFAULT: (默認(rèn))根據(jù)cache-control決定是否從網(wǎng)絡(luò)上取數(shù)據(jù)邪狞。
         * LOAD_NO_CACHE: 不使用緩存,只從網(wǎng)絡(luò)獲取數(shù)據(jù).
         * LOAD_CACHE_ELSE_NETWORK茅撞,只要本地有帆卓,無論是否過期,或者no-cache米丘,都使用緩存中的數(shù)據(jù)剑令。
         */
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);//不使用緩存,只從網(wǎng)絡(luò)獲取數(shù)據(jù).

        //支持屏幕縮放
        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,"國內(nèi)不能訪問google,攔截該url",Toast.LENGTH_LONG).show();
                return true;//表示我已經(jīng)處理過了
            }
            return super.shouldOverrideUrlLoading(view, url);
        }

    };

    //WebChromeClient主要輔助WebView處理Javascript的對話框吁津、網(wǎng)站圖標(biāo)、網(wǎng)站title堕扶、加載進(jìn)度等
    private WebChromeClient webChromeClient=new WebChromeClient(){
        //不支持js的alert彈窗碍脏,需要自己監(jiān)聽然后通過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()表示:
            //處理結(jié)果為確定狀態(tài)同時喚醒WebCore線程
            //否則不能繼續(xù)點(diǎn)擊按鈕
            result.confirm();
            return true;
        }

        //獲取網(wǎng)頁標(biāo)題
        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            Log.i("ansen","網(wǎng)頁標(biāo)題:"+title);
        }

        //加載進(jìn)度回調(diào)
        @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){//點(diǎn)擊返回按鈕的時候判斷有沒有上一頁
            webView.goBack(); // goBack()表示返回webView的上一頁面
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }

    /**
     * JS調(diào)用android的方法
     * @param str
     * @return
     */
    @JavascriptInterface //仍然必不可少
    public void  getClient(String str){
        Log.i("ansen","html調(diào)用客戶端:"+str);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        //釋放資源
        webView.destroy();
        webView=null;
    }
}
  • onCreate 查找控件,給webView設(shè)置加載url稍算,添加js監(jiān)聽潮酒,監(jiān)聽的名稱是"android",設(shè)置webChromeClient跟webViewClient回調(diào),通過getSettings方法獲取WebSettings對象邪蛔,設(shè)置允許加載js急黎,設(shè)置緩存模式,支持縮放侧到。
  • webViewClient 重寫了幾個方法,onPageFinished頁面加載完成隱藏進(jìn)度條勃教,onPageStarted頁面開始加載顯示進(jìn)度條,shouldOverrideUrlLoading攔截url匠抗,如果請求url是打開google故源,不讓他請求,因?yàn)間oogle在國內(nèi)不能訪問汞贸,就算請求也請求不到還不如攔截掉绳军,直接告訴用戶不能訪問印机。
  • webChromeClient onJsAlert()因?yàn)閃ebView不支持alert彈窗门驾,在這個方法中用AlertDialog去彈窗。onReceivedTitle獲取網(wǎng)頁標(biāo)題楣责。onProgressChanged頁面加載進(jìn)度,把加載進(jìn)度給progressBar秆麸。
  • onKeyDown 如果點(diǎn)擊系統(tǒng)自帶返回鍵&&webView有上一級頁面及汉,調(diào)用goBack返回。否則不處理房铭。什么時候輝有上一級頁面呢?就是你從首頁跳轉(zhuǎn)到了一個新頁面,點(diǎn)擊返回的時候會返回首頁。如果本來就在首頁點(diǎn)擊返回的時候會退出app迅脐。
  • getClient html頁面的JS可以通過這個方法回調(diào)原生APP,這個方法有個注解@JavascriptInterface豌骏,這個是必須的,這個方法有個字符串參數(shù)窃躲,這個方法跟我們在onCreate中調(diào)用addJavascriptInterface傳入的name一起使用的钦睡。例如html中想要回調(diào)這個方法可以這樣寫:javascript:android.getClient("傳一個字符串給客戶端");
  • onDestroy activity銷毀時釋放webView資源。

運(yùn)行代碼洒琢,效果圖如下:


效果圖

源碼下載

      Android開發(fā)666 - 安卓開發(fā)技術(shù)分享
             掃描二維碼加關(guān)注
Android開發(fā)666
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末衰抑,一起剝皮案震驚了整個濱河市荧嵌,隨后出現(xiàn)的幾起案子砾淌,更是在濱河造成了極大的恐慌谭网,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骄崩,死亡現(xiàn)場離奇詭異薄辅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)站楚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門窿春,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人旧乞,你說我怎么就攤上這事〕咂埽” “怎么了?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵除盏,是天一觀的道長挫以。 經(jīng)常有香客問我,道長掐松,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任泻仙,我火速辦了婚禮量没,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘殴蹄。我一直安慰自己猾担,他們只是感情好刺下,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布橘茉。 她就那樣靜靜地躺著,像睡著了一般畅卓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上翁潘,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天拜马,我揣著相機(jī)與錄音,去河邊找鬼俩莽。 笑死,一個胖子當(dāng)著我的面吹牛扮超,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瞒津,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼括尸,長吁一口氣:“原來是場噩夢啊……” “哼巷蚪!你這毒婦竟也來了屁柏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤淌喻,失蹤者是張志新(化名)和其女友劉穎雀摘,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涯塔,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年匕荸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诺凡。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡践惑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出童本,到底是詐尸還是另有隱情,我是刑警寧澤穷娱,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站配深,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏篓叶。R本人自食惡果不足惜羞秤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瘾蛋。 院中可真熱鬧俐镐,春花似錦哺哼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽枢里。三九已至,卻和暖如春栏豺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背冰悠。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工溉卓, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人桑寨。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像尉尾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子沙咏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容