webView的使用

測試環境：Android Studio  &  Android 9  API 28

完成功能：MainActivity跳轉至WebViewActivity，顯示目標靜態HTML

具體步驟：

• 新建一個 模塊/工程
• 主活動佈局activity_main.xml添加按鈕佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跳轉webView"/>

</LinearLayout>

• 修改MainActivity：

package com.example.webviewtest;  //包名自行更改

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import java.io.IOException;

import static android.view.View.SCROLLBARS_OUTSIDE_OVERLAY;

public class MainActivity extends AppCompatActivity {

    private Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//加載activity_main佈局

        btn=(Button)findViewById(R.id.btn); //獲取button
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {  //設置button觸發事件
                Intent intent=new Intent(MainActivity.this,WebViewActivity.class);
                String url="http://www.baidu.com";  //設置目標網頁地址
                intent.putExtra("url",url);
                startActivity(intent); //intent跳轉WebViewActivity
                finish();  //跳轉後退出原活動
            }
        });
    }
}

• 添加WebView佈局webview_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
    </WebView>

</LinearLayout>

• 添加WebViewActivity：

package com.example.webviewtest;

import android.graphics.Bitmap;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.io.IOException;

import static android.view.View.SCROLLBARS_OUTSIDE_OVERLAY;

public class WebViewActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        webView = findViewById(R.id.webView);
        webView.loadUrl(getIntent().getStringExtra("url"));//提取目標url
        
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);//使用當前WebView處理跳轉
                return true;//true表示此事件在此處被處理，不須要再廣播
            }
    }
}

• 修改AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewtest">

<uses-permission android:name="android.permission.INTERNET" />  //打開網絡權限，若不設置則斷網

    <application

        android:usesCleartextTraffic="true"  //使用明文傳輸，若不設置則沒法用http訪問網絡

        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.NoActionBar">  //刪除標題欄
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".WebViewActivity"></activity>  //註冊WebViewActivity活動
    </application>

</manifest>

• 運行結果：

---

若是訪問百度之類的網站，上面已經夠了，但若是是訪問你本身的服務器，好比tomcat，還要繼續下面的操做，不然會出現網絡中斷、樣式加載失敗、圖片沒法加載等問題。

• 添加xml文件夾
• 在xml文件夾新建network_security_config.xml，想了解緣由的能夠移步 https://blog.csdn.net/lz8362/article/details/78289930

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

• 修改AndroidManifest.xml

android:usesCleartextTraffic="true"

• 替換爲

android:networkSecurityConfig="@xml/network_security_config"

• 修改WebViewActivity，在Oncreate()裏添加

WebSettings webSettings = webView.getSettings();
webSettings.setBlockNetworkImage(false); // 解決圖片不顯示

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);  //容許混合內容模式
}

---

 這樣應該就能顯示了，可是加載的速度不盡人意，下面進行一些優化。

1. 添加緩存，修改WebViewActivity，在Oncreate()裏繼續添加

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//加載緩存

想詳細瞭解的能夠參考  https://www.jianshu.com/p/6575304281a1   添加緩存後能很明顯提升第一次以後啓動的加載速度

2. 將 js、css 放到 app 本地加載

按照原來的寫法，引入的css和js要麼是個http外鏈，要麼是很長很長的樣式表，可能一個30k的網頁有20k的樣式代碼。

無論是哪一種，在訪問或解析數據都消耗了大量時間，若是把固定的樣式放在本地加載，速度會有質的飛躍

若是你的html文件剛好都是同一種樣式，好比說bootstrap等等，那就更適合用這種方法了 ^_^

首先，在工程裏添加assets文件夾，用於存放樣式文件

把你的樣式文件放入assets文件夾裏，好比說  passage.css，修改你的html樣式爲外鏈，好比：

<link rel="stylesheet" href="passage.css" type="text/css" />

修改WebViewActivity，重寫Oncreate()裏setWebViewClient()的shouldInterceptRequest()方法，你能夠在setWebViewClient方法體內按Ctrl+o找到它

webView.setWebViewClient(new WebViewClient() { //在app內部打開網頁
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
                WebResourceResponse response = null;
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                    response = super.shouldInterceptRequest(view, request);
                    if (request.getUrl().toString().contains("passage.css")) {  //監聽請求地址，若是請求的是 樣式文件passage.css
                        try {  //重寫response，修改請求頭,按utf-8編碼，加載本地樣式
                            response = new WebResourceResponse("text/css", "UTF-8", getAssets().open("passage.css"));
                        } catch (IOException e) {                                 //getAssets().open(String file)：按字符串在assets資源文件夾裏查找文件
                            e.printStackTrace();
                        }
                    }
                }
                return response;
            }
}

若是是 js 文件，還要在Oncreate()裏添加：

webSettings.setJavaScriptEnabled(true);

默認WebView還有一個滾動條，能夠進行隱藏，更有原生體驗效果

在Oncreate()裏添加

webView.setHorizontalScrollBarEnabled(false);
webView.setVerticalScrollBarEnabled(false);

看看效果，很不錯吧 ^_^