如何在WebView中嵌入本地组件

最新推荐文章于 2021-12-15 23:44:31 发布

东郭先生

最新推荐文章于 2021-12-15 23:44:31 发布

阅读量249

点赞数

分类专栏： Android Java 文章标签：移动开发 javascript java ViewUI

本文链接：https://blog.csdn.net/chen592969029/article/details/84162056

版权

Android 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Java

12 篇文章 0 订阅

订阅专栏

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

最后运行即可，效果如下图，工程源码见附件。
[img]http://dl.iteye.com/upload/attachment/0064/0676/2dc98b07-9388-3db0-8017-98697ed0de8e.bmp[/img]

东郭先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在WebView中嵌入本地组件

1. 首先下载相关文件，一个jar包，一个js文件，下载地址：http://code.google.com/p/weblayout/downloads/list2. 新建一个Android工程，导入jar包：weblayout-1.0.java，将weblayout.js拷贝到assets目录下。3. 修改layout文件layout/main.xml[code="xml"...
复制链接

扫一扫