您的位置：首页 > 移动开发 > Android开发

使用html写一个android关于界面，事情原来可以如此简单

2015-11-07 12:15 806 查看

当软件开发进入尾声，我们都会给软件配上个关于帮助界面，关于界面一般都会包含软件名称、软件版本、官方群号、官方公众号、感谢等等的一系列内容，这些内容往往都是一个陈列展示的内容，我们不得不使用一大堆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语言，不妨试试这种方法。

六、代码下载

点此下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航