怎么在WebView中嵌入本地组件

如何在WebView中嵌入本地组件
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

<?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. 新建HTML文件，取名为index.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");
    }
}

最后运行即可，效果如下图，工程源码见附件。
怎么在WebView中嵌入本地组件

怎么在WebView中嵌入本地组件

相关推荐