快捷導(dǎo)航

Android WebView 應(yīng)用界面開發(fā)教程

更新時(shí)間：2016年08月05日 11:40:29 投稿：mrr

WebView組件本身就是一個(gè)瀏覽器實(shí)現(xiàn)，開發(fā)者可以直接在WebView中使用聚合（Polymer）和Material設(shè)計(jì)。接下來通過本文給大家介紹Android WebView 應(yīng)用界面開發(fā)教程，一起看下吧

WebView組件本身就是一個(gè)瀏覽器實(shí)現(xiàn)，Android5.0增強(qiáng)的WebView基于Chromium M37，直接支持WebRTC、WebAudio、WebGL。開發(fā)者可以直接在WebView中使用聚合（Polymer）和Material設(shè)計(jì)。

一.WebView瀏覽網(wǎng)頁（加載線上URL）

WebView提供了很多方法執(zhí)行瀏覽器操作，常用方法如下：

void goBack()：后退
void goForward()：前進(jìn)。
void goBackOrForward(int step)：step為正表示前進(jìn)，step為負(fù)表示后退。
void loadUrl(String url)：加載指定URL對(duì)應(yīng)的網(wǎng)頁。
boolean zoomIn()：放大網(wǎng)頁。
boolean zoomOut()：縮小網(wǎng)頁。

實(shí)例：迷你瀏覽器

該實(shí)例包含兩個(gè)界面，第一個(gè)界面包括輸入網(wǎng)址和打開網(wǎng)址，第二個(gè)界面包含一個(gè)WebView，用于顯示第一個(gè)界面輸入的URL對(duì)應(yīng)的界面。程序代碼如下：

第一個(gè)界面

public class MainActivity extends AppCompatActivity {
private EditText mEditUrl;
private Button mBtnOpen;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEditUrl = (EditText) findViewById(R.id.edit_url);
mBtnOpen = (Button) findViewById(R.id.btn_open);
mBtnOpen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, WebViewActivity.class);
String url = mEditUrl.getText().toString();
intent.putExtra("url", url);
startActivity(intent);
}
});
}
}

這個(gè)界面很簡(jiǎn)單，一個(gè)輸入框，一個(gè)按鈕，分別用于輸入網(wǎng)址和打開WebView。

第二個(gè)界面

public class WebViewActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
mWebView = (WebView) findViewById(R.id.web_view);
Intent intent = getIntent();
String url = intent.getStringExtra("url");
mWebView.loadUrl(url);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient(){
});
}
@Override
public void onBackPressed() {
if (mWebView != null && mWebView.canGoBack()){
mWebView.goBack();
}else {
super.onBackPressed();
}
}
}

這段代碼調(diào)用WebView的loadUrl(String url)方法加載、顯示該URL對(duì)應(yīng)的網(wǎng)頁，并設(shè)置使其支持JavaScript。如果打開WebView過程中跳轉(zhuǎn)到瀏覽器，則通過設(shè)置WebViewClient來是其在WebView中顯示。

并重寫了onBackPressed()方法，當(dāng)WebView不為空且WebView可以回退時(shí)，返回上一個(gè)WebView界面，而不是直接回退到上一個(gè)Activity。

由于該應(yīng)用需要訪問互聯(lián)網(wǎng)，所以需要在AndroidManifest.xml中配置：

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

該實(shí)例的效果圖如下：

二.WebView加載HTML代碼

WebView提供了一個(gè)loadData(String data, String mimeType, String encoding)方法，該方法可用于加載并顯示HTML代碼，但該方法會(huì)發(fā)生亂碼。

WebView還提供了一個(gè)loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法，該方法是loadData(String data, String mimeType, String encoding)方法的增強(qiáng)版，不會(huì)產(chǎn)生亂碼。該方法的幾個(gè)參數(shù)說明：

data：指定要加載的HTML代碼。

mimeType：指定HTML的MIME類型，對(duì)于HTML可指定為text/html。

encoding：指定HTML代碼編碼所用的字符集，比如指定為GBK。

WebView加載HTML代碼：

public class MainActivity extends AppCompatActivity {
private WebView mShowWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowWebView = (WebView) findViewById(R.id.show_web_view);
StringBuilder sb = new StringBuilder();
//拼接一段HTML代碼
sb.append("<html>");
sb.append("<head>");
sb.append("<title> 歡迎您 </title>");
sb.append("</head>");
sb.append("<body>");
sb.append("<h2> 歡迎您訪問<a href = \"http:www.baicu.com\">" + "百度一下</a></h2>");
sb.append("</body>");
sb.append("</html");
//加載并顯示HTML代碼
mShowWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
}

該實(shí)例運(yùn)行效果如下：

三.WebView中的JavaScript調(diào)用Android方法

在WebView中調(diào)用Android方法需要三步：

調(diào)用WebView關(guān)聯(lián)的WebSettings的setJavaScriptEnabled(true)啟用JavaScript調(diào)用功能。

調(diào)用WebView的addJavaScriptInterface(Object object, String name)方法將object對(duì)象暴露給JavaScript對(duì)象。

在JavaScript腳本中通過剛才暴露的name對(duì)象調(diào)用Android方法。

寫一個(gè)在JavaScript中調(diào)用Android方法的實(shí)例，該實(shí)例界面包含一個(gè)WebView組件，用于顯示HTML頁面。Activity代碼如下：

public class MainActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.web_view);
//使用file協(xié)議加載本地assets目錄下的HTML頁面
mWebView.loadUrl("file:///android_asset/test.html");
//獲取WebView的設(shè)置對(duì)象
WebSettings webSettings = mWebView.getSettings();
//開啟JavaScript調(diào)用
webSettings.setJavaScriptEnabled(true);
//將MyObject對(duì)象暴露給JavaScript對(duì)象
mWebView.addJavascriptInterface(new MyObject(this), "myObj");
}
}

在上面代碼中開啟了JavaScript調(diào)用Android方法的功能，并將Android應(yīng)用中的MyObject對(duì)象暴露給JavaScript腳本，暴露成JavaScript腳本中名為myObj的對(duì)象。

MyObject代碼如下：

public class MyObject {
private Context context;
public MyObject(Context context) {
this.context = context;
}
//該方法將會(huì)暴露給JavaScript腳本調(diào)用
@JavascriptInterface
public void showToast(String name) {
Toast.makeText(context, name + "，您好！", Toast.LENGTH_SHORT).show();
}
//該方法將會(huì)暴露給JavaScript腳本調(diào)用
@JavascriptInterface
public void showList() {
//顯示一個(gè)普通的列表對(duì)話框
new AlertDialog.Builder(context)
.setTitle("圖書列表")
.setIcon(R.mipmap.ic_launcher)
.setItems(new String[]{"Head First Android", "Head First Java", "Thinking in Java"}, null)
.setPositiveButton("確定", null)
.create()
.show();
}
}

MyObject中包含了兩個(gè)方法，showToast()和showList()方法，且這兩個(gè)方法使用了@JavascriptInterface修飾，使得這兩個(gè)方法會(huì)暴露給JavaScript腳本，從而允許JavaScript腳本通過myObj來調(diào)用這兩個(gè)方法。HTML頁面代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Js調(diào)用Android</title>
</head>
<body>
<!-- 注意此處的myObj是Android暴露出來的對(duì)象-->
<input type="button" value="打招呼"
onclick="myObj.showToast('Android');"/>
<input type="button" value="圖書列表"
onclick="myObj.showList();"/>
</body>
</html>

當(dāng)用戶點(diǎn)擊頁面上的兩個(gè)按鈕時(shí)，該頁面的JavaScript腳本會(huì)通過myObj調(diào)用Android方法。

運(yùn)行該實(shí)例，點(diǎn)擊第一個(gè)按鈕，效果圖如下：