将js的api文档集成到android项目中,简单而且实用。这个时候,你就可以不再用原生态的UI了。通过HTML + JS +css 你可以做出各种各样的UI
需要注意到是,用这种方式开发程序,软件的运行效率会比原生态UI慢,但是UI界面更加美观和灵活变动。
第一步: 到http://jquerymobile.com/ 下载最新的 JQuery 的API 包
第二步: 将下载好的文件解压,放到android项目的assets文件夹中。
第三步: 在assets文件夹下新建一个sample文件夹。并在sample文件夹中新建一个index.html文件
index.html文件的内容如下:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="../jquery/jquery.mobile-1.0a1.min.css" mce_href="jquery/jquery.mobile-1.0a1.min.css" /> <mce:script src="../jquery/jquery-1.4.3.min.js" mce_src="jquery/jquery-1.4.3.min.js"></mce:script> <mce:script src="../jquery/jquery.mobile-1.0a1.min.js" mce_src="jquery/jquery.mobile-1.0a1.min.js"></mce:script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
第四步:编辑main。xml的内容如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <WebView android:id="@+id/webView01" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>
第五步,编辑myActivity.java的内容如下:
package com.geolo.android; import android.app.Activity; import android.os.Bundle; import android.webkit.WebChromeClient; import android.webkit.WebView; public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); WebView mWebView = (WebView)findViewById(R.id.webView01); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.setWebChromeClient(new WebChromeClient()); mWebView.loadUrl("file:///android_asset/sample/index.html"); } }
程序运行效果: