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

最新推荐文章于 2021-05-26 19:04:56 发布

tonghua168c

最新推荐文章于 2021-05-26 19:04:56 发布

阅读量643

点赞数

分类专栏： Android

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

[html]view plaincopy 
   
 <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 plaincopy 
   
 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 plaincopy 
   
 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 plaincopy 
   
 <!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 plaincopy 
   
 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 plaincopy 
   
 <resources>  
   
     <!-- Default screen margins, per the Android Design guidelines. -->  
     <dimen name="activity_horizontal_margin">0dp</dimen>  
     <dimen name="activity_vertical_margin">0dp</dimen>  
   
 </resources>  

tonghua168c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android+Jquery mobile 利用webView接受html传来的数据解决html放到webView中四周留白的问题

在可以让jquery mobile的html页面可以在Android中显示之后，想做到可以在后台接收并用log输出前端传来的参数在查阅了网上的资料，发现webView提供了共java和javaScript互相调用的接口。首先在控制布局的active_main.xml中加入webView并添加id为webView(在activity中根据id获得该view)
复制链接

扫一扫