android webView

04-23

Android WebView使用全面解析（載入網路資源、本地HTML，JS交互） - CSDN博客?

blog.csdn.net

簡述：

WebView是什麼？有什麼用途？我們先來看一下官方介紹：

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

Note that, in order for your Activity to access the Internet and load web pages in a WebView, you must add the INTERNET permissions to your Android Manifest file:

[html] view plain copy

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

大致意思就是說WebView(網路視圖)能載入顯示網頁，可以將其視為一個瀏覽器。在使用的過程中需要加入網路許可權。了解了WebView我們接下來學習一下怎麼使用，本篇博文主要講解以下內容：

① WebView載入網路資源

② WebView載入本地HTML

③ WebView中Android調用JS方法

④ WebView中JS調用Android方法

⑤ HTML5的使用

⑥ JS的簡單使用

WebView載入網路資源

載入網路資源的一般步驟如下：

①在XML文件中引入WebView控制項

②在Activity中創建WebView實例

③對WebView進行必要的設置（根據需要）

④載入網路資源

WebView簡單載入網頁

我們按上述步驟簡單地實現載入百度首頁，首先創建XML文件，就是簡單的在相應Activity頁面中引入WebView控制項，如下：

[html] view plain copy

<?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/local_webview"
android:layout_width_="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

在Activity中創建WebView實例、載入網路資源比較簡單，我對代碼做了比較詳細地注釋，直接上代碼吧。

[html] view plain copy

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private WebView webview;
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = (Button) findViewById(R.id.btn);
//創建WebView實例
webview = (WebView) findViewById(R.id.webview);
btn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (R.id.btn != v.getId())
return;
//跳轉到http://www.baidu.com頁面
webview.loadUrl("http://www.baidu.com");
}
}

效果圖：

改進一：不再跳轉第三方瀏覽器

那麼這樣還是有問題，每次都要啟動第三方瀏覽器來載入網頁，我們能不能只在App內部顯示而不跳轉第三方瀏覽器呢？Google早以想到這樣的情況啦！app內部調用主要利用了方法setWebViewClient()，該方法里相當於在App內部設置一個瀏覽器客戶端，該方法的參數就是一個WebViewClient實例。

代碼如下：

[html] view plain copy

public class WebViewActivity extends Activity {
private WebView webview_in;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_activity);
webview_in = (WebView) findViewById(R.id.webview_in);
//web資源
webview_in.loadUrl("http://www.baidu.com");
//設置WebViewClient客戶端
webview_in.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
}

效果圖：

改進二：WebView開啟JavaScript功能、按返回鍵網頁後退而不是退出瀏覽器的問題

從上面的gif動態可以看出這次並沒有跳轉到第三方瀏覽器，而是跳轉到一個Activity中（該Activity中只包含一個WebView控制項）。但是也可以很明顯地看出該WebViewClient存在一些問題：

①未開啟JavaScript功能：該瀏覽器未開啟JavaScript功能（在動態圖中點擊「百度知道」時可以看出提示）；

②按返回鍵網頁後退而不是退出瀏覽器的問題：當我們在「百度知道」頁面點擊返回鍵時並沒有回到百度首頁，而是跳轉出了WebViewActivity。

ok,我們先來解決第一個問題：為WebView開啟JavaScript功能。

核心代碼如下：

[html] view plain copy

/**
* 方法描述：啟用支持javascript
*/
private void openJavaScript() {
WebSettings settings = webview_in.getSettings();
settings.setJavaScriptEnabled(true);
}

我們再來看一下第二個問題：網頁後退而不是退出瀏覽器的問題。

需要用到的API：

①WebView.canGoBack()：Gets whether this WebView has a back history item.

②WebView.goBack(): Goes back in the history of this WebView.

解決該問題的核心代碼：

[html] view plain copy

/**
* 方法描述：改寫物理按鍵——返回的邏輯
*
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (webview_in.canGoBack()) {
webview_in.goBack();//返回上一頁面
return true;
} else {
System.exit(0);//退出程序
}
}
return super.onKeyDown(keyCode, event);
}

現在把改進後的完整代碼貼出來：

[html] view plain copy

public class WebViewActivity extends Activity {
private WebView webview_in;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.web_activity);
webview_in = (WebView) findViewById(R.id.webview_in);
openJavaScript();
//web資源
webview_in.loadUrl("http://www.baidu.com");
//設置WebViewClient客戶端
webview_in.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
/**
* 方法描述：啟用支持javascript
*/
private void openJavaScript() {
WebSettings settings = webview_in.getSettings();
settings.setJavaScriptEnabled(true);
}
/**
* 方法描述：改寫物理按鍵——返回的邏輯
*
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if (webview_in.canGoBack()) {
webview_in.goBack();//返回上一頁面
return true;
} else {
System.exit(0);//退出程序
}
}
return super.onKeyDown(keyCode, event);
}
}

解決完以上兩個問題以後我們再來看一下效果圖：

改進三：載入進度條

我先貼出來在模擬器中打開瀏覽器瀏覽的情況的一張圖：

上面這幅動態圖大家可以看出，每打開一個網頁就會在該網頁頂端顯示一個藍色的進度條，所以我們對WebView再進一步優化：顯示進度條。

為了在WebView頂部顯示進度條我們使用ProgressBar控制項。為了顯示進度我們需要用到的方法為setWebChromeClient （WebChromeClient client）,該方法就是為了主要輔助WebView處理Javascript的對話框、網站圖標、網站title、載入進度等。它與WebViewClient的區別請看這篇章：WebViewClient與WebChromeClient的區別。OK，廢話不說，接下來就自定義一個WebView，代碼來了！！！

[html] view plain copy

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.webkit.WebView;
import android.widget.ProgressBar;
/**
* Created by lzy on 2016/9/22.
*/
public class ProgressWebView extends WebView {
private ProgressBar progressbar;
public ProgressWebView(Context context) {
super(context);
}
public ProgressWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public ProgressWebView(Context context, AttributeSet attrs) {
super(context, attrs);
initProgressBar(context);
setWebChromeClient(new WebChromeClient());
}
private void initProgressBar(Context context) {
progressbar = new ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal);
progressbar.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, dp2px(context, 3), 0, 0));
//改變progressbar默認進度條的顏色（深紅色）為Color.GREEN
progressbar.setProgressDrawable(new ClipDrawable(new ColorDrawable(Color.GREEN), Gravity.LEFT, ClipDrawable.HORIZONTAL));
addView(progressbar);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
}
/**
* 方法描述：根據手機的解析度從 dp 的單位轉成為 px(像素)
*/
public int dp2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 類描述：顯示WebView載入的進度情況
*/
public class WebChromeClient extends android.webkit.WebChromeClient {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
progressbar.setVisibility(GONE);
} else {
if (progressbar.getVisibility() == GONE)
progressbar.setVisibility(VISIBLE);
progressbar.setProgress(newProgress);
}
super.onProgressChanged(view, newProgress);
}
}
}

我們在布局文件中引入ProgressWebView：

[html] view plain copy

<?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">
<com.lzy.webviewdemo.ProgressWebView
android:id="@+id/progress_webview"
android:layout_width_="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="12dp" />
</LinearLayout>

效果圖：

效果是不是很強勁很完美。。。。

TAG:Android | iOS | HTML5 |