Удалите ненужные пробелы в WebView Android - PullRequest
36 голосов
/ 01 января 2012

Я начал разработку приложения с использованием WebView. На самом деле я загружаю изображение с помощью Webview (мне нравится использовать встроенные элементы управления масштабом класса). Я могу успешно загрузить изображение, но вижу раздражающие пробелы. Я не могу найти способ удалить это. Мои изображения размером 750 * 1000. Я приложил свой код ниже.

webview.xml

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

ImageViewer.java

package com.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class ImageViewer extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        String loadUrl = "file:///android_res/drawable/splash_001.jpg";

        WebView image = (WebView) findViewById(R.id.webView);
        image.clearView();
        image.clearCache(true);
        image.getSettings().setBuiltInZoomControls(true);
        image.getSettings().setSupportZoom(true);
        image.getSettings().setLoadWithOverviewMode(true);
        image.getSettings().setUseWideViewPort(true);
        image.loadUrl(loadUrl);
    }

}

Ответы [ 11 ]

52 голосов
/ 02 января 2012

По умолчанию webview имеет некоторый запас / отступ в теле. Если вы хотите удалить этот отступ / отступ, тогда переопределите тело тег и добавьте поле наподобие:

<body style="margin: 0; padding: 0">
21 голосов
/ 07 января 2012

Если пробел, о котором вы говорите, находится справа, вы можете добавить его в веб-просмотр.

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

Это должно убрать пробел при условии, что он находится справа, где будет полоса прокрутки.

17 голосов
/ 12 октября 2012

По умолчанию на веб-страницах HTML есть отступ и отступ в 10 пикселей;Вы должны установить в своем разделе головы или в файле CSS:

<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>

Это помогло мне.

8 голосов
/ 07 ноября 2014

У меня было раздражающее пустое пространство, граничащее с отображаемым контентом HTML в моем WebView (хотя в этом контенте нет изображений).Сначала я думал, что это связано с проблемами CSS, как упомянуто выше.Но с помощью таблицы стилей для изменения фона для HTML, BODY и т. Д. Это все больше напоминало заполнение вокруг WebView.

user3241873 показывает выше, как отрегулировать заполнение в самом WebView, но я обнаружил, что приложение Android по умолчанию, созданное Eclipse, сгенерировало файл макета («контейнер» RelativeLayout, а не «LinearLayout»), добавилоэти атрибуты для RelativeLayout:

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

Если вы посмотрите эти значения отступов в res / values ​​/ dimensions.xml, вы увидите, что они установлены в 16dp.Когда я изменил на 0dp, он удалил неприглядный пробел:)

Если кто-то заменит TextView по умолчанию (Hello World) на WebView, отступы для родительского RelativeLayout останутся в доме, как неприятный родственник.

3 голосов
/ 13 августа 2012

Используйте метод WebView setScrollBarStyle и укажите параметр как View.SCROLLBARS_INSIDE_OVERLAY.

1 голос
/ 19 июля 2015

У меня было это [это мой activity.xml ]

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

Я только что удалил заполнение в относительной раскладке

<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" 
tools:context=".MainActivity">

Я перепробовал всерешения выше, но они не очень хорошо для меня.этот работал для меня.

1 голос
/ 28 июня 2013

Это пример, который вы можете протестировать с использованием html-шаблона, затем вы можете заменить текст "body" на любой, какой вы захотите ... в вашем случае html для изображения.Вы можете использовать CSS для стилизации HTML по мере необходимости.Надеюсь, это поможет вам лучше понять, как использовать локальные ресурсы.Оставьте комментарий, если вам нужна дополнительная помощь.

Одна ключевая строка, которую нельзя пропустить: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />

Используйте это как шаблон: (assets / template.html)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[CONTENT]
</body>
</html>

Используйте css следующим образом: (assets / style.css)

@font-face {
  font-family: Roboto;
  src: url(file:///android_asset/fonts/Roboto.ttf);
}

html, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto;
    font-size: 1.0em;
    color: rgb(61,61,61);
    text-align: left;
    position:relative;
    padding: 40px;
    background-color: #eeeeee;
}

Затем в вашем классе WebView: (ваш класс, расширяющий WebView)

public void setText(CharSequence text, int color){

       try {

           InputStream is = getResources().getAssets().open("article_view.html");
           int size = is.available();
           byte[] buffer = new byte[size];
           is.read(buffer);
           is.close();

           loadDataWithBaseURL("file:///android_asset/",
               new String(buffer).replace("[CONTENT]", text.toString()),
               "text/html", "UTF-8", null);

       } catch (IOException e) {
           e.printStackTrace();
       }

}
0 голосов
/ 09 марта 2017

В моем случае, верхняя часть моего веб-просмотра имеет большие отступы. Итак, установите scrollbarSize = "0dp". В AS 2.2.3

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
android:scrollbarSize="0dp"
/>
0 голосов
/ 11 декабря 2015

Я уже получил это.

вот мой логический код, когда приложение открывает сайт, вы должны получить размер вашего веб-просмотра, а затем установить его на высоту

вот мой код

 ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) webpage.getLayoutParams();
        p.height = webpage.getHeight();
        Log.e(" webpage.getHeight()", String.valueOf(webpage.getHeight()));
        webpage.setLayoutParams(p);

Надеюсь, вы примете мой код и мой ответ :) работает на любых устройствах, даже вкладки:)

0 голосов
/ 27 января 2014

Установите отступ в вашем webview.xml на 0dp

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp" />

...