本節(jié)引言

本節(jié)給大家?guī)淼氖茿ndroid中的一個用于顯示網(wǎng)頁的控件：WebView(網(wǎng)頁視圖)。

現(xiàn)在Android應(yīng)用 層開發(fā)的方向有兩種：客戶端開發(fā)和HTML5移動端開發(fā)！

所謂的HTML5端就是：HTML5 + CSS + JS來構(gòu)建 一個網(wǎng)頁版的應(yīng)用,而這中間的媒介就是這個WebView,而Web和網(wǎng)頁端可以通過JS來進行交互,比如, 網(wǎng)頁讀取手機聯(lián)系人,調(diào)用手機相關(guān)的API等！

而且相比起普通的客戶端開發(fā),HTML5移動端有個優(yōu)勢： 可以用百分比來布局,而且如果HTML5端有什么大改,我們不用像客戶端那樣去重新下一個APP,然后 覆蓋安裝,我們只需修改下網(wǎng)頁即可！而客戶端...慘不忍睹,當(dāng)然HTML5也有個缺點,就是性能的問題, 數(shù)據(jù)積累,耗電問題,還有閃屏等等...

另外,針對這種跨平臺我們可以使用其他的第三方快速開發(fā) 框架,比如PhoneGap,對了,還有現(xiàn)在網(wǎng)絡(luò)上很多一鍵生成APP類的網(wǎng)站,用戶通過拖拉,設(shè)置圖片 之類的簡單操作就可以生成一個應(yīng)用,大部分都是用的HTML5來完成的！有模板,直接套,你懂的~ 好的,話不多說,開始本節(jié)內(nèi)容！

1.什么是WebView？

答：Android內(nèi)置webkit內(nèi)核的高性能瀏覽器,而WebView則是在這個基礎(chǔ)上進行封裝后的一個 控件,WebView直譯網(wǎng)頁視圖,我們可以簡單的看作一個可以嵌套到界面上的一個瀏覽器控件！

2.相關(guān)方法

先上官方文檔：WebView并不打算一個個地去講屬性,用到哪個寫哪個,其他的自行查閱文檔！ 除了直接WebView外我們還可以添加你自己的行為,可以自行定制下述類：

WebChromeClient：輔助WebView處理Javascript的對話框、網(wǎng)站圖標(biāo)、網(wǎng)站title、加載進度等！ 比如下面這些：

WebViewClient：輔助WebView處理各種通知與請求事件！ 比如下面這些方法：

WebSettings：WebView相關(guān)配置的設(shè)置，比如setJavaScriptEnabled()設(shè)置是否允許JS腳本執(zhí)行 部分方法如下：

這里重要區(qū)分三個load方法的區(qū)別：

loadUrl()：直接顯示網(wǎng)頁內(nèi)容(單獨顯示網(wǎng)絡(luò)圖片)，一般不會出現(xiàn)亂碼。loadData(data, "text/html", "UTF-8")：用來加載URI格式的數(shù)據(jù)，不能通過網(wǎng)絡(luò)來加載內(nèi)容， 不能加載圖片，而且經(jīng)常會遇到亂碼的問題，我們知道String類型的數(shù)據(jù)主要是Unicode編碼的， 而WebView一般為了節(jié)省資源使用的是UTF-8編碼，盡管我們按上面寫了，但是還需要為webView設(shè)置： webview.getSettings().setDefaultTextEncodingName("UTF -8");loadDataWithBaseURL(baseUrl, string, "text/html", "utf-8", null)：loadData類的一個 增強類，可以加載圖片，baseUrl為你存儲的圖片路徑，而且只需在這里設(shè)置utf-8就可以解決亂碼 問題了！

這里只是列舉了部分屬性而已，其他的還需自行查閱官方文檔：

WebChromeClient文檔

WebViewClient文檔

WebSettings文檔

3.一些常見需求講解

需求1：根據(jù)URL加載網(wǎng)頁

1）直接在Activity上加載一個WebView

運行效果圖：

實現(xiàn)代碼：

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private long exitTime = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = new WebView(this);
        webView.setWebViewClient(new WebViewClient() {
            //設(shè)置在webView點擊打開的新網(wǎng)頁在當(dāng)前界面顯示,而不跳轉(zhuǎn)到新的瀏覽器中
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webView.getSettings().setJavaScriptEnabled(true);  //設(shè)置WebView屬性,運行執(zhí)行js腳本
        webView.loadUrl("http://www.baidu.com/");          //調(diào)用loadView方法為WebView加入鏈接
        setContentView(webView);                           //調(diào)用Activity提供的setContentView將webView顯示出來
    }


    //我們需要重寫回退按鈕的時間,當(dāng)用戶點擊回退按鈕：
    //1.webView.canGoBack()判斷網(wǎng)頁是否能后退,可以則goback()
    //2.如果不可以連續(xù)點擊兩次退出App,否則彈出提示Toast
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                super.onBackPressed();
            }

        }
    }
}

2）布局代碼中設(shè)置WebView

相信大家都見過很多的新聞類App吧或者門戶信息類的App,他的結(jié)構(gòu)可能是這樣的：

左上角一個點擊關(guān)閉當(dāng)前Activity的按鈕,中間是新聞的title,右面是一個刷新按鈕, 而在右下角可能有這樣一個懸浮的按鈕,當(dāng)我們滑動超過屏幕寬度他就會顯示出來, 當(dāng)用戶點擊后又會回滾到網(wǎng)頁的頂部！下面我們來簡單的實現(xiàn)下！

運行效果圖：

實現(xiàn)代碼：

MainActivity.java：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private Button btn_back;
    private TextView txt_title;
    private Button btn_top;
    private Button btn_refresh;
    private WebView wView;
    private long exitTime = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
    }


    private void bindViews() {
        btn_back = (Button) findViewById(R.id.btn_back);
        txt_title = (TextView) findViewById(R.id.txt_title);
        btn_top = (Button) findViewById(R.id.btn_top);
        btn_refresh = (Button) findViewById(R.id.btn_refresh);
        wView = (WebView) findViewById(R.id.wView);

        btn_back.setOnClickListener(this);
        btn_refresh.setOnClickListener(this);
        btn_top.setOnClickListener(this);

        wView.loadUrl("http://www.baidu.com");
        wView.setWebChromeClient(new WebChromeClient() {
            //這里設(shè)置獲取到的網(wǎng)站title
            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                txt_title.setText(title);
            }
        });


        wView.setWebViewClient(new WebViewClient() {
            //在webview里打開新鏈接
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_back:
                finish();          //關(guān)閉當(dāng)前Activity
                break;
            case R.id.btn_refresh:
                wView.reload();    //刷新當(dāng)前頁面
                break;
            case R.id.btn_top:
                wView.setScrollY(0);   //滾動到頂部
                break;
        }
    }
    
    @Override
    public void onBackPressed() {
        if (wView.canGoBack()) {
            wView.goBack();
        } else {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }

        }
    }
}

問題答疑：

相信細心的朋友看到，我們回到一開始加載的頁面后，按返回鍵，按了多次還是沒有退出 當(dāng)前的APP，后來還是我們手動去點back鍵通過調(diào)用finish方法才能關(guān)閉當(dāng)前的Activity? 這是為什么呢？明明百度一下已經(jīng)是第一個頁面?。?/p>

答：其實發(fā)生這個的原因是：網(wǎng)址的重定向問題引起的，其實我們在訪問百度的時候：

盡管我們load的是www.baidu.com，但是百度做了重定向，跳轉(zhuǎn)到了手機版百度一下網(wǎng)頁： 即實際你的流程是：www.baidu.com -> 手機版百度一下 -> 打開其他的鏈接！

我們看到我們上面shouldOverrideUrlLoading()方法是這樣寫的：

view.loadUrl(url);return true;我們知道用戶點擊一次回退鍵，那么webview會調(diào)用一次goback方法()，我們把上面三個 設(shè)做A,B,C三個站點，在C時點回退，C - > B沒問題，接著再點 B -> A，這個時候問題 就來了盡管B來到了A，但是因為重定向又跳轉(zhuǎn)到了B，如此循環(huán)往復(fù)...這就是為什么 點擊回退鍵并沒有推出WebView的原因，解決方法：手速，在webview未加載完網(wǎng)頁 錢連續(xù)雙擊回退鍵，手速要夠快，哈哈！說笑而已，要解決這個問題，我們只需將 shouldOverrideUrlLoading里的東東刪掉，然后寫上return false；即可！ 不信是重定向，可以自己修改下URL試試~

需求2：WebView滾動事件的監(jiān)聽

我們都知道監(jiān)聽滾動事件一般都是設(shè)置setOnScrollChangedListener，可惜的是 WebView并沒有給我們提供這樣的方法，但是我們可以重寫WebView，覆蓋里面的一個方法： protected void onScrollChanged(final int l, final int t, final int oldl,final int oldt){} 然后再對外提供一個接口，示例代碼如下：

MyWebViewDemo.java：

/**
 * Created by Jay on 2015/9/11 0011.
 */
public class MyWebView extends WebView {

    private OnScrollChangedCallback mOnScrollChangedCallback;

    public MyWebView(Context context) {
        super(context);
    }

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedCallback != null) {
            mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);
        }
    }

    public OnScrollChangedCallback getOnScrollChangedCallback() {
        return mOnScrollChangedCallback;
    }

    public void setOnScrollChangedCallback(
            final OnScrollChangedCallback onScrollChangedCallback) {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

    public static interface OnScrollChangedCallback {
        //這里的dx和dy代表的是x軸和y軸上的偏移量，你也可以自己把l, t, oldl, oldt四個參數(shù)暴露出來
        public void onScroll(int dx, int dy);
    }

}

MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private MyWebView wView;
    private Button btn_icon;
    private long exitTime = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_icon = (Button) findViewById(R.id.btn_icon);
        wView = (MyWebView) findViewById(R.id.wView);
        wView.loadUrl("http://www.hao123.com");
        wView.setWebViewClient(new WebViewClient() {
            //在webview里打開新鏈接
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        //比如這里做一個簡單的判斷，當(dāng)頁面發(fā)生滾動，顯示那個Button
        wView.setOnScrollChangedCallback(new MyWebView.OnScrollChangedCallback() {
            @Override
            public void onScroll(int dx, int dy) {
                if (dy > 0) {
                    btn_icon.setVisibility(View.VISIBLE);
                } else {
                    btn_icon.setVisibility(View.GONE);
                }
            }
        });

        btn_icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wView.setScrollY(0);
                btn_icon.setVisibility(View.GONE);
            }
        });

    }

    @Override
    public void onBackPressed() {
        if (wView.canGoBack()) {
            wView.goBack();
        } else {
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序",
                        Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }

        }
    }
}

運行效果圖：

當(dāng)網(wǎng)頁開始滾動，會呈現(xiàn)一個呵呵的按鈕，我們點擊呵呵按鈕可以回到頂部！ 然后呵呵按鈕會隱藏~

需求3：滾動條的問題

你可能用的屬性如下：

• setHorizontalScrollBarEnabled(false);//水平不顯示
• setVerticalScrollBarEnabled(false); //垂直不顯示
• setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);//滾動條在WebView內(nèi)側(cè)顯示
• setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)//滾動條在WebView外側(cè)顯示

需求4：設(shè)置縮放以及自適應(yīng)屏幕

根據(jù)我們一般的習(xí)慣打開網(wǎng)頁對于看不清楚的地方，我們喜歡雙指來縮放網(wǎng)頁，而WebView 則需要我們自己手動來設(shè)置這個是否支持縮放了！

只需要在加入下述代碼即可：

WebSettings settings = wView.getSettings();
settings.setUseWideViewPort(true);//設(shè)定支持viewport
settings.setLoadWithOverviewMode(true);   //自適應(yīng)屏幕
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
settings.setSupportZoom(true);//設(shè)定支持縮放

使用上述代碼后，進去頁面就會是這樣一個效果：

當(dāng)我們縮放時，出現(xiàn)了一個惡心的問題，就是很常見的縮放控件，我們肯定是不想要的啦， 那么加上下面句代碼就可以把縮放控件給隱藏掉了！

settings.setDisplayZoomControls(false);

我們也可以自行設(shè)置初始的縮放比例，只需為webView：

wView.setInitialScale(25);//為25%，最小縮放等級

嘿嘿，上面是整個網(wǎng)頁都縮放的，不過可能有時我們僅僅是需要對字體進行縮放，那么可以 這樣做：

settings.setTextZoom(int)；

也可以直接通過：

settings.setTextSize(TextSize.LARGER)；

來設(shè)置大小。

Android自帶五個可選字體大小的值：SMALLEST(50%),SMALLER(75%),NORMAL(100%),LARGER(150%), LARGEST(200%)。

需求5.獲取WebView的Cookie數(shù)據(jù)

我們都知道Cookie其實只是一個代表用戶唯一標(biāo)識的字符串，情景一般是： 用戶輸入賬號密碼后，點擊登陸，用戶要拿著這個Cookie去訪問服務(wù)器提供的相關(guān)服務(wù)！ 我們可以把cookie的獲取寫到onPageFinsihed的方法中，簡單的可以這樣寫：

@Override
public void onPageFinished(WebView view, String url) {             
    CookieManager cookieManager = CookieManager.getInstance();
    String CookieStr = cookieManager.getCookie(url);
    Log.e("HEHE", "Cookies = " + CookieStr);
    super.onPageFinished(view, url);
}

需求6.設(shè)置WebView的Cookie數(shù)據(jù)

嘿嘿，我們上面獲取到了Cookie或者通過其他途徑獲得了Cookie，我們?nèi)绾螢閃ebView設(shè)置Cookie呢？ 我們可以在需要設(shè)置Cookie的地方加入下述代碼：

CookieSyncManager.createInstance(MainActivity.this);  
CookieManager cookieManager = CookieManager.getInstance();  
cookieManager.setAcceptCookie(true);  
cookieManager.setCookie(url, cookies);  //cookies是要設(shè)置的cookie字符串 
CookieSyncManager.getInstance().sync();

對了，上述代碼需要寫在loadUrl()之前，而且如果設(shè)置了Cookie了，盡量別再進行其他的設(shè)置 不然可能會無效，建議設(shè)置cookie的寫在webView相關(guān)設(shè)置的最后面~loadUrl()之前!

4.示例代碼下載：

WebViewDemo1：下載 WebViewDemo1.zip

WebViewDemo2：下載 WebViewDemo2.zip

本節(jié)小結(jié)：

好的，本節(jié)給大家介紹了一下WebView的基本用法，加載網(wǎng)頁，設(shè)置縮放，字體縮放， 自適應(yīng)屏幕，以及Cookie的獲取以及設(shè)置；相信日常開發(fā)中還有各種奇葩的需求，不過 限于篇幅就寫這么多，有idea的歡迎留言，下節(jié)我們來學(xué)習(xí)HTML5端如何通過JavaScript 來與WebView交互，并獲取手機的相關(guān)數(shù)據(jù)！敬請期待~謝謝~