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

本文围绕以下两个部分展开：

一、WebView
WebView案例






一、WebView

        1. 概念

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


        2. 实现方法

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

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

        （2.1）在activity中先声明WebView

private WebView webView;

        然后再在onCreate()方法中加载布局文件。

setContentView(R.layout.activity_web_view);

        （2.2）在activity中先声明WebView

private WebView webView;

        然后再在onCreate()方法中实例化WebView组件：

webView = new WebView(this);

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

setContentView(webView);

        （3）调用WebView的loadUrl( )方法，设置WebView要显示的网页。


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


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




WebView案例

        1. 在AndroidManifest.xml文件中添加允许此app访问网络的权限。


        2. 用到ButterKnife，因此依然要导包。

        3. strings.xml

<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>

        4. activity_main.xml。写一个按钮。

<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>

        5. MainActivity。按钮点击事件。

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);
    }
}

        6. 创建WebViewActivity和activity_web_view.xml。


        7. activity_web_view.xml。写一个WebView控件，并把边距去掉。

<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>

        8. WebViewActivity。

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);
    }
}

        效果如下：