android+Jquery mobile 利用webView接受html传来的数据解决html放到webView中四周留白的问题

来源：互联网发布：淘宝充值卡代理编辑：程序博客网时间：2024/06/05 20:06

在可以让jquery mobile的html页面可以在android中显示之后，想做到可以在后台接收并用log输出前端传来的参数

在查阅了网上的资料，发现webView提供了共java和javaScript互相调用的接口。

首先在控制布局的active_main.xml中加入webView并添加id为webView(在activity中根据id获得该view)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <WebView       android:layout_width="fill_parent"       android:layout_height="fill_parent"      android:scrollbars="none"     android:id="@+id/webview"       /> </RelativeLayout>

接着完成User类，类里只有两个属性，并完成showUser方法，该方法接受前台传来的用户名和密码，并在log中输出

package com.example.test;import android.util.Log;public class User {private String userName = "";private String password = "";public String getUserName() {return userName;}public void setUserName(String userName) {this.userName = userName;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public void showUser(String userName, String passWord){Log.i("username", userName);Log.i("passWord", passWord);}}

接着完成MainActivity，addJavascriptInterface是给user对象起个别名为user，前端的js通过window.user.showUser("","")调用其函数。

package com.example.test;import android.os.Bundle;import android.annotation.SuppressLint;import android.app.Activity;import android.app.AlertDialog;import android.view.Menu;import android.view.View;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import org.apache.cordova.*;public class MainActivity extends DroidGap {private User user = new User();@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);                super.setContentView(R.layout.activity_main);//get webViewWebView webView = (WebView) findViewById(R.id.webview); //enable support javaScriptwebView.getSettings().setJavaScriptEnabled(true);//set an alias for UserwebView.addJavascriptInterface(user, "user");         webView.loadUrl("file:///android_asset/www/index.html"); }@Overridepublic 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;}}

接着完成index.html,该页面中只有两个输入框和一个提交按钮。function ok()用于将两个输入框的内容传给后台的showUser函数

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jQuery Mobile Web</title><meta name="viewport" content="width=device-width" /> <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/><link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/><script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script><script>function ok() {   var username = document.getElementById("username").value;  var password = document.getElementById("password").value;  window.user.showUser(username, password );} </script></head> <body> <div data-role="page" data-control-title="Home" id="page1">    <div data-theme="e" data-role="header" data-position="fixed">        <span class="ui-title">        </span>    </div>    <div data-role="content">        <div data-role="fieldcontain" data-controltype="textinput">            <label for="username">                username            </label>            <input name="username" id="username" placeholder="" value="" type="text">        </div>        <div data-role="fieldcontain" data-controltype="textinput">            <label for="password">                password            </label>            <input name="password" id="password" placeholder="" value="" type="password">        </div>        <input id="submit" type="submit" data-inline="true" data-icon="star" data-iconpos="left"        value="Submit" data-mini="true" onClick = "ok()">    </div></div></body></html>

都完成之后试了一下，发现在点击submit按钮时，后台可以接收前台的内容并显示了。

但是可以发现显示的html四周留白，并没有占满整个屏幕。

试过了网上的多种解决方法，都没有解决问题。

网上解决方法一：

WebSetting settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

网上解决方法二：

settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

网上解决方法三：

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

int mDensity = metrics.densityDpi;

if (mDensity == 120) {
settings.setDefaultZoom(ZoomDensity.CLOSE);
}else if (mDensity == 160) {
settings.setDefaultZoom(ZoomDensity.MEDIUM);
}else if (mDensity == 240) {
settings.setDefaultZoom(ZoomDensity.FAR);
}

网上解决方法四：

隐藏webView 的scrollbar

试了以上方法都不管用，最后发现是在控制布局的activity_main.xml中有设置默认的边距填充。

android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"

于是找到dimen.xml文件

打开，发现里面设置了active_horizontal_margin和active_vertical_margin的值为16dp，改为0dp之后问题就解决了。

<resources>    <!-- Default screen margins, per the Android Design guidelines. -->    <dimen name="activity_horizontal_margin">0dp</dimen>    <dimen name="activity_vertical_margin">0dp</dimen></resources>

0 0

android+Jquery mobile 利用webView接受html传来的数据 解决html放到webView中四周留白的问题

android+Jquery mobile 利用webView接受html传来的数据解决html放到webView中四周留白的问题