【攻克Android (43)】WebView （网络视图）

[b][size=large]本文围绕以下两个部分展开： [/size][/b]

[b][size=large]一、WebView[/size][/b]
[b][size=large]WebView案例[/size][/b]


[b][size=large]一、WebView[/size][/b]

[size=medium][b]1. 概念[/b][/size]

[size=medium]WebView能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。[/size]


[size=medium][b]2. 实现方法[/b][/size]

[size=medium][b]（1）[/b]在AndroidManifest.xml文件中添加允许此app访问网络的权限，否则出现Web page not available错误。[/size]

    <uses-permission android:name="android.permission.INTERNET" />

[size=medium][b]（2.1）[/b]在activity中先声明WebView[/size]

private WebView webView;

[size=medium]然后再在onCreate()方法中加载布局文件。[/size]

setContentView(R.layout.activity_web_view);

[size=medium][b]（2.2）[/b]在activity中先声明WebView[/size]

private WebView webView;

[size=medium]然后再在onCreate()方法中实例化WebView组件：[/size]

webView = new WebView(this);

[size=medium]当（3）完成后，再在onCreate()方法中调用Activity的setContentView( )方法来显示网页视图：[/size]

setContentView(webView);

[size=medium][b]（3）[/b]调用WebView的loadUrl( )方法，设置WebView要显示的网页。[/size]


[size=medium][b]（4）[/b]为了让WebView能够响应超链接功能，调用setWebViewClient( )方法，设置 WebView视图。[/size]


[size=medium][b]（5）[/b]用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法。如果不做任何处理，点击系统回退键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面。[/size]


[b][size=large]WebView案例[/size][/b]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5852/17cb8826-526b-33a8-865d-b9ada39fa5a2.png[/img][/align]

[size=medium][b]1. 在AndroidManifest.xml文件中添加允许此app访问网络的权限。[/b][/size]


[size=medium][b]2. 用到ButterKnife，因此依然要导包。[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5856/0079404e-ab9b-31f5-9a80-870f9efd25a0.png[/img][/align]


[size=medium][b]3. strings.xml[/b][/size]

<resources>
    <string name="app_name">WebViewTest</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_web_view">WebViewActivity</string>

    <string name="btn_web_view">Web View</string>
</resources>

[size=medium][b]4. activity_main.xml。写一个按钮。[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5858/0143a298-46b9-3284-b7a6-4c256367068e.png[/img][/align]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnWebView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_web_view" />

</LinearLayout>

[size=medium][b]5. MainActivity。按钮点击事件。[/b][/size]

package com.android.webviewtest;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends Activity {

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

        ButterKnife.inject(this);
    }

    @OnClick(R.id.btnWebView)
    public void webViewClick() {
        Intent intent = new Intent(this, WebViewActivity.class);
        startActivity(intent);
    }
}

[size=medium][b]6. 创建WebViewActivity和activity_web_view.xml。[/b][/size]


[size=medium][b]7. activity_web_view.xml。写一个WebView控件，并把边距去掉。[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5864/262f2c9b-2d12-3441-93bf-67cca2da80c7.png[/img][/align]

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.webviewtest.WebViewActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

[size=medium][b]8. WebViewActivity。[/b][/size]

package com.android.webviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class WebViewActivity extends Activity {
    // （2）
    private WebView webView;

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

        // （2）
        webView = (WebView) findViewById(R.id.webView);

        // 设置使页面可以执行JS脚本
        webView.getSettings().setJavaScriptEnabled(true);
        // 设置使页面支持缩放
        webView.getSettings().setBuiltInZoomControls(true);
        // 设置默认的字体大小
        // webView.getSettings().setDefaultFontSize(5);

        // （3）加载给定的Url
        webView.loadUrl("http://192.168.1.124:8090/androidcloud/index.jsp");
        // （4）
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // 使用当前 WebView 处理跳转
                view.loadUrl(url);
                // true 表示此事件在此处被处理，不需要再广播
                return true;
            }

            @Override
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                // 转向错误时处理：
                // 给出一个 Toast提示
                Toast.makeText(getApplicationContext(),
                        "Oh no!" + description, Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * （5）
     * 默认点回退键，会返回到前面的 Activity 。
     * 因此，需监听按钮操作，使回退在 WebView 内发生
     *
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

[size=medium][b]效果如下：[/b][/size]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5870/ccad637d-4307-3500-a59d-b938c3084331.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5872/ad9c48c5-11f7-3175-8313-5e62974c3255.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5874/4ec02f9e-032c-3e74-8c14-dd567308f63e.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5876/e98c0d82-64bc-3ebe-a173-3fba2e783a18.png[/img][/align]

[align=center][img]http://dl2.iteye.com/upload/attachment/0111/5878/13505ae9-4519-31de-95f3-0610ee46fa43.png[/img][/align]