使用html寫一個android關於介面，事情原來可以如此簡單
阿新 • • 發佈：2019-01-09
當軟體開發進入尾聲，我們都會給軟體配上個關於幫助介面 ，關於介面一般都會包含軟體名稱、軟體版本、官方群號、官方公眾號、感謝等等的一系列內容，這些內容往往都是一個陳列展示的內容，我們不得不使用一大堆TextView排版，不能靈活控制這些內容，有沒有更好的方法呢，我個人覺得使用些簡單的HTML知識，結合javascript就能靈活的控制關於幫助頁面了。
HTML頁面中的文字都可以隨意改變，如改變顏色、粗細、是否傾斜、大小等等，只有在文字上加上對應的標籤就可以靈活的控制文字的排版了。我們將寫好的HTML靜態頁面丟到android工程的assets目錄下，使用WebView去載入即可。這樣還是不能太靈活的控制，你希望只在string修改一個字串，html頁面就可以跟著改變對應的內容，對於程式設計師來說，偷懶就是好事，那麼我們為了能夠只修改一次就可以讓html頁面顯示出對應的改變，此時需要使用一點js去動態的修改頁面，這就是我今天說的事情。
一、準備HTML頁面
我們的軟體是支援多語言的，那麼對於不同的語言我們需要製作不同的html頁面，比如英語和中文。下面是我準備好的html頁面。下圖是工程中assets目錄下的兩個html。
about.html 內容如下，中文頁面：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> body { background-color : #E5E5E5 } img { float:left; margin-right:8px; height:120px; } </style> </head> <script type="text/javascript"> function changeVersion(myVersion) { document.getElementById("version").innerHTML =myVersion; } </script> <body> <img src="ic_launcher.png" /> <p ><b>軟體名稱</b>：AboutDemo</br> <b>軟體版本</b>：<span id="version">null</span></br> <b>xxxx</b>：<font color=#ff0000><b><u>xxx</u></b></font>隨便寫<font color=#ff0000>變色</font>繼續寫xx xxxxx xxxx xxx xxxxx xxxx xxx xxx xxx xxxx xxx xxxxx xxxxx xxxxx xxxxxx xxx xx xx xxxx xxxx xxxx xxxx xxxxx xxxx xxxx xxxxx xxxx xxxx</p> </body> </html>
about_es.html ，英文頁面內容如下：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> body { background-color : #E5E5E5 } img { float:left; margin-right:8px; height:120px; } </style> </head> <script type="text/javascript"> function changeVersion(myVersion) { document.getElementById("version").innerHTML =myVersion; } </script> <body> <img src="ic_launcher.png" /> <p ><b>Software Name</b>：AboutDemo</br> <b>Software Version</b>：<span id="version">null</span></br> <b>xxxx</b>：<font color=#ff0000><b><u>xxx</u></b></font>xxx<font color=#ff0000>xxx</font>xxx xxx xxx xxx xxxxxx xxxxx xxxxxx xx xxxxx xxxx xxx xxxxx xxxx xxx xxx xxx xxxx xxx xxxxx xxxxx xxxxx xxxxxx xxx xx xx xxxx xxxx xxxx xxxx xxxxx xxxx xxxx xxxxx xxxx xxxx</p> </body> </html>
其中的changeVersion(myVersion)函式（javascript函式）可修改軟體版本的id為version的欄位。這就是動態改變html內容的關鍵所在。當然兩個檔案的css控制內容是一樣的，其實完全可以抽離出一個css檔案，由於這裡的樣式控制程式碼較少，我就沒有抽離出來公用了。
二、android介面中引入WebView
這一段很簡單，將控制元件寫入xml 介面檔案即可，沒什麼好水的。
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:background="@android:color/white"
android:orientation="vertical" >
<WebView
android:id="@+id/wv_help"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fadingEdge="none"
android:overScrollMode="never"
android:scrollbars="none" />
</LinearLayout>三、activity中載入html程式碼
MainActivity.java
package com.example.aboutdemo;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
private WebView webView;
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView = (WebView) findViewById(R.id.wv_help);
final String appVersion = getResources().getString(R.string.app_version_name);
webView.getSettings().setJavaScriptEnabled(true); // 開啟javascript支援
webView.getSettings().setSupportZoom(false);
webView.getSettings().setAppCacheEnabled(false);
webView.getSettings().setAllowFileAccess(true);
webView.addJavascriptInterface(this, "changeVersionJs");
// 根據語言載入不同的頁面，實現多語言適配
if (getResources().getConfiguration().locale.getLanguage().equals("zh")) {
webView.loadUrl("file:///android_asset/about.html");
} else {
webView.loadUrl("file:///android_asset/about_es.html");
}
// 等待page load 完畢，再去改變版本號，動態改變版本號
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
webView.loadUrl("javascript:changeVersion('" + appVersion + "')");
}
});
}
}
四、執行截圖
五、總結
為什麼要大費周折使用HTML寫介面，就是為了html更加靈活的介面控制，同時我們也可以看待在Activity中的控制程式碼也是相當簡潔的，寥寥幾行程式碼就可以實現對html頁面的載入，如果本身會html語言，不妨試試這種方法。