Android WebView单图像,删除右侧的空白区域

时间:2013-06-06 21:52:02

标签: java android android-webview

我试过\应用了StackOverflow的所有建议......无济于事。我错过了什么?谢谢。

enter image description here

webView = (WebView) findViewById(R.id.webView1);
     String imagePath = "file:///android_asset/menu.jpg";
     webView.loadData("<html><style type='text/css'>img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}</style><body style='margin: 0; padding: 0'></html>","text/html", "utf-8");
        webView.getSettings().setUserAgentString("Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17");

     webView.setPadding(0, 0, 0, 0);

     webView.setInitialScale(1);
     webView.getSettings().setJavaScriptEnabled(true);
     webView.getSettings().setLoadWithOverviewMode(true);
     webView.getSettings().setUseWideViewPort(true);
     webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
     webView.setScrollbarFadingEnabled(false);
     webView.loadUrl(imagePath);  

布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


     <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:scaleType="centerCrop"
        android:src="@drawable/sendblank" />

    <TextView
        android:id="@+id/tvHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_vertical"
        android:text="Web"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff"
        android:textSize="30dp"
        android:textStyle="bold"
        android:typeface="serif" />




      <Button
        android:id="@+id/Button03"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="7dp"
        android:background="@drawable/sendblank"
        android:onClick="onHome"
        android:text="Back"
        android:textColor="#ffffff"
        android:typeface="serif" />


 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
        android:layout_gravity="center"
    android:layout_alignParentBottom="true"
   android:layout_alignParentLeft="true"
          android:layout_margin="0dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:paddingTop="45dp">

      <WebView android:id="@+id/webView1"
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
            />

    <TextView
        android:id="@+id/tV1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading..."
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#000000" >
</TextView>

<ProgressBar android:id="@+id/pB1"
    style="?android:attr/progressBarStyleHorizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_centerVertical="true"
    android:padding="2dip">
</ProgressBar>
</RelativeLayout>

非常感谢....我真的相信我已经尝试了所有的建议,所以我不确定为什么它不适合我的情况?我是以错误的方式或地方应用了这些建议吗? - 谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

首先,您要加载一些带有样式信息的html,但webView.loadData调用中没有实际内容。但是,您通过加载webView.loadUrl调用的图片网址来完全取代该HTML。

如果要加载带样式的图像,则需要使用指向图像网址的img标记创建标记。然后,您可以使用webView.loadData调用加载该标记。

此外,查看您的标记,即使您已包含图像,CSS也无法按预期工作。您已将图像的max-width设置为100%,这意味着它不会超过100%,但这并不意味着它不会更窄。如果您希望图像始终填充屏幕宽度,则应将width属性设置为100%。

此外,该标记缺少一个结束体标记,并且样式元素应该真正包含在头标记中。浏览器不介意,但你不应该养成使用坏标记的习惯,因为它最终可能会出现意外行为。

最后,那里有一大堆样式用于其他元素似乎没有用处,因为这些元素不存在。

因此,纠正上述所有问题,您的代码可能如下所示:

String imagePath = "file:///android_asset/menu.jpg";
String markup = "<html><head><style type='text/css'>img {width: 100%%;}</style></head><body style='margin: 0; padding: 0'><img src='%s' /></body></html>";
markup = String.format(markup, imagePath);
try {
  markup = URLEncoder.encode(markup,"utf-8");
} catch (UnsupportedEncodingException e) {
} 
markup = markup.replace('+',' ');
webView.loadData(markup, "text/html", "utf-8");