`
chen592969029
  • 浏览: 108389 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

如何在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");
    }
}


最后运行即可，效果如下图，工程源码见附件。




  • 大小: 24.5 KB
分享到：
| 开关手机数据连接的Widget
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics