android+Jquery mobile 利用webView接受html传来的数据 解决html放到webView中四周留白的问题
2016-09-27 10:53
543 查看
在可以让jquery mobile的html页面可以在Android中显示之后，想做到可以在后台接收并用log输出前端传来的参数
在查阅了网上的资料，发现webView提供了共java和javaScript互相调用的接口。
首先在控制布局的active_main.xml中加入webView并添加id为webView(在activity中根据id获得该view)
[html] view
plain copy
<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中输出
[java] view
plain copy
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("","")调用其函数。
[java] view
plain copy
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" })
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_main);
//get webView
WebView webView = (WebView) findViewById(R.id.webview);
//enable support javaScript
webView.getSettings().setJavaScriptEnabled(true);
//set an alias for User
webView.addJavascriptInterface(user, "user");
webView.loadUrl("file:///android_asset/www/index.html");
}
@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;
}
}
接着完成index.html,该页面中只有两个输入框和一个提交按钮。function ok()用于将两个输入框的内容传给后台的showUser函数
[html] view
plain copy
<!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中有设置默认的边距填充。
[html] view
plain copy
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之后问题就解决了。
[html] view
plain copy
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">0dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen>
</resources>
在查阅了网上的资料，发现webView提供了共java和javaScript互相调用的接口。
首先在控制布局的active_main.xml中加入webView并添加id为webView(在activity中根据id获得该view)
[html] view
plain copy
<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中输出
[java] view
plain copy
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("","")调用其函数。
[java] view
plain copy
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" })
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_main);
//get webView
WebView webView = (WebView) findViewById(R.id.webview);
//enable support javaScript
webView.getSettings().setJavaScriptEnabled(true);
//set an alias for User
webView.addJavascriptInterface(user, "user");
webView.loadUrl("file:///android_asset/www/index.html");
}
@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;
}
}
接着完成index.html,该页面中只有两个输入框和一个提交按钮。function ok()用于将两个输入框的内容传给后台的showUser函数
[html] view
plain copy
<!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中有设置默认的边距填充。
[html] view
plain copy
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之后问题就解决了。
[html] view
plain copy
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">0dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen>
</resources>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android菜鸟学习笔记（WebView加载html页面，页面提交数据问题）
- android webview显示html代码出现乱码的问题解决
- android webview 加载本地html并且解决多图卡顿问题
- Android WebView 解决html中文乱码问题
- android开发中webview保存cookie问题的解决
- Android 3.0 以上系统 webView 无法在html中传值的解决办法
- android WebView缩放设置setInitialScale(...)后，修改设置的值，问题解决
- thinkphp使用view的时候无法利用phpexcel导出数据问题的解决
- Android利用WebView开发browser中flash无法播放的问题
- Android WebView 获取网页数据（html）
- android webview内容压线问题解决方法
- Android WebView加载Html右边空白问题的解决方案
- 使用WebView加载数据出现找不到网页的问题之解决办法（转）
- android开发中webview保存cookie问题的解决
- android webview内容压线问题解决方法
- Android利用WebView开发browser中flash无法播放的问题
- Android: 利用SurfaceView绘制股票滑动直线解决延迟问题
- WebView-显示HTML内容-解决乱码问题
- Android: 利用SurfaceView绘制股票滑动直线解决延迟问题
- android textView设置html，解决图片和文字不对齐的问题