通过网页实现软件的布局

最新推荐文章于 2025-07-14 17:00:18 发布

原创最新推荐文章于 2025-07-14 17:00:18 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

android 同时被 2 个专栏收录

295 篇文章

订阅专栏

精通android开发

171 篇文章

订阅专栏

本文介绍了一种使用网页实现Android应用布局的方法。通过WebView组件加载HTML页面，并利用JavaScript与Java交互，实现了从Android获取联系人信息并展示在网页上，同时支持拨打电话功能。

一般情况下,实现软件的布局可以有以下三种方式：布局文件(即****.xml文件)、编码的方式。。

而第三种就是我们这一边博客所要讲解的，通过网页实现软件的布局

原理：

网页实现界面：
1) 数据：应该来自于手机本身
webview 可以把一个java对象传递给网页，再让javascript去调用这个对象里面的方法

2) onload() javascript 代码调用java代码 java再调用javascript

明白2)中的流程是理解这种实现软件布局的方式的关键。。

以下通过一个例子来讲解：

程序运行截图：

实现步骤

1、在/assets/目录下导入网页布局文件.这里是index.html

下载链接为：

http://download.youkuaiyun.com/detail/caihongshijie6/6294611

2、main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <WebView 
        android:id="@+id/webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    
</LinearLayout>

3、MainAcitivty

package com.njupt.htmlui1;

import java.util.List;

import org.json.JSONArray;
import org.json.JSONObject;

import android.net.Uri;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {

	private WebView webview;
	private ContactService service;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		webview = (WebView) findViewById(R.id.webview);
		service = new ContactService();

		webview.addJavascriptInterface(new ContactPlugin(), "contact");
		webview.getSettings().setJavaScriptEnabled(true);
		
		//以下一行代码表示王烨在本地
//		webview.loadUrl("file:///android_asset/index.html");
        
		//网页在服务器端
		webview.loadUrl("http://192.168.1.105:8080/Web4/index.html");
	}

	private class ContactPlugin {
		public void showcontacts() {
			try {
				List<ContactInfo> contactInfos = service.getContacts();
				JSONArray jsonArray = new JSONArray();
				int i;
				for (i = 0; i < contactInfos.size(); ++i) {
					JSONObject jsonObject = new JSONObject();
					ContactInfo info = contactInfos.get(i);

					jsonObject.put("name", info.getName());
					jsonObject.put("amount", info.getAmount());
					jsonObject.put("phone", info.getPhone());

					jsonArray.put(jsonObject);
				}

				String json = jsonArray.toString();
				webview.loadUrl("javascript:show(" + json + ")");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}

		public void call(String phone) {
			Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"
					+ phone));
			startActivity(intent);
		}
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

4、ContactInfo

package com.njupt.htmlui1;

public class ContactInfo {

	private String name;
	private long amount;
	private String phone;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public long getAmount() {
		return amount;
	}
	public void setAmount(long amount) {
		this.amount = amount;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public ContactInfo(String name, long amount, String phone) {
		super();
		this.name = name;
		this.amount = amount;
		this.phone = phone;
	}
	public ContactInfo() {
		super();
	}
	@Override
	public String toString() {
		return "ContactInfo [name=" + name + ", amount=" + amount + ", phone="
				+ phone + "]";
	}
	
	
}

5、ContactService

package com.njupt.htmlui1;

import java.util.ArrayList;
import java.util.List;

public class ContactService {

	public List<ContactInfo> getContacts(){
		List<ContactInfo> contacts = new ArrayList<ContactInfo>();
		
		contacts.add(new ContactInfo("zzt", 40000, "123456"));
		contacts.add(new ContactInfo("lss", 42000, "223457"));
		contacts.add(new ContactInfo("liuyifei", 44000, "3345678"));
		contacts.add(new ContactInfo("allen", 45000, "499999"));
		
		return contacts;
	}
}

6、记得在AndroidManifest.xml清单文件中注册上相应的权限

<uses-permission android:name="android.permission.CALL_PHONE"/>
    <uses-permission android:name="android.permission.INTERNET"/>