WebViewにローカルコンポーネントを埋め込む方法
4071 ワード
1.まず関連ファイル、jarパッケージ、jsファイル、ダウンロードアドレスをダウンロードします.
http://code.google.com/p/weblayout/downloads/list
2.Androidプロジェクトを新規作成し、jarパッケージ:weblayout-1.0をインポートします.JAva、weblayout.jsはassetsディレクトリにコピーします.
3.layoutファイルを修正するlayout/main.xml
4.indexという名前のHTMLファイルを新規作成する.html、assetsディレクトリの下に入れます.
注意:weblayoutをインポートすることを忘れないでください.js.
5.XXActivityコードを変更します.
最後に実行すればいいです.効果は下図のように、工事のソースは添付ファイルを参照してください.
http://code.google.com/p/weblayout/downloads/list
2.Androidプロジェクトを新規作成し、jarパッケージ:weblayout-1.0をインポートします.JAva、weblayout.jsはassetsディレクトリにコピーします.
3.layoutファイルを修正するlayout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<de.enough.weblayout.WebLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/weblayout">
<EditText android:id="@+id/username"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<EditText android:id="@+id/password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button android:id="@+id/login"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello wrold"/>
</de.enough.weblayout.WebLayout>
</LinearLayout>
4.indexという名前のHTMLファイルを新規作成する.html、assetsディレクトリの下に入れます.
<html>
<head>
<script type="text/javascript" src="weblayout.js"></script>
<style type="text/css">
.box {
width: 60%;
margin: auto;
border: 1px solid blue;
}
.header {
background: blue;
font-size: 16pt;
color: white;
}
.content {
padding: 10px;
}
.field {
font-size: 16pt;
color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
Login
</div>
<div class="content">
<div class="field">
Username<br/>
<div id="username"/>
</div>
<div class="field">
Password<br/>
<div id="password"/>
</div>
<div id="login"/>
</div>
</div>
</body>
</html>
注意:weblayoutをインポートすることを忘れないでください.js.
5.XXActivityコードを変更します.
package com.test;
import de.enough.weblayout.WebLayout;
import android.app.Activity;
import android.os.Bundle;
public class Test_WebLayoutActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebLayout webLayout = (WebLayout) findViewById(R.id.weblayout);
webLayout.loadUrl("file:///android_asset/index.html");
}
}
最後に実行すればいいです.効果は下図のように、工事のソースは添付ファイルを参照してください.
