Android：WebView 在中心加载图像/内容答案

【问题标题】：Android: WebView load image/content in centerAndroid：WebView 在中心加载图像/内容
【发布时间】：2012-05-03 16:09:08
【问题描述】：

我已经使用WebView 加载了一张图片，但是当它被最大程度地缩小时，图片会自动放置在我设备的左上角。无论如何要加载图像以使其显示在中心？

干杯！

【问题讨论】：

标签： java android webview

【解决方案1】：

我是结合使用 xml 和代码来完成的。我的 gif 文件存储在 assets 文件夹中。

以下是xml布局代码：

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true" />

</RelativeLayout>

下面是java代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_webview);
    WebView webView = (WebView) findViewById(R.id.webView);
    webView.setWebViewClient(new WebViewController());
    webView.loadDataWithBaseURL("file:///android_asset/","<html><center><img src=\"animation.gif\"></html>","text/html","utf-8","");
}

private class WebViewController extends WebViewClient {
     @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
}

【讨论】：

【解决方案2】：

您可以使用此代码在 WebView 的屏幕中心将图像居中：

  //first you will need to find the dimensions of the screen 
  float width;
  float height;
  float currentHeight;
  WebView mWebView;

  //this function will set the current height according to screen orientation
  @Override
  public void onConfigurationChanged(Configuration newConfig){
          if(newConfig.equals(Configuration.ORIENTATION_LANDSCAPE)){

                currentHeight=width; 
                loadImage();                 

         }if(newConfig.equals(Configuration.ORIENTATION_PORTRAIT)){

                currentHeight=height;
                loadImage();

        }
    } 


  //call this function and it will place the image at the center
  public void load and center the image on screen(){

    mWebView=(WebView)findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setBuiltInZoomControls(true);       
    mWebView.setBackgroundColor(0);

    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    height = displaymetrics.heightPixels;
    width = displaymetrics.widthPixels;
    currentHeight=height             //assuming that the phone
                                     //is held in portrait mode initially

         loadImage();        
  }
  public void loadImage(){
       Bitmap BitmapOfMyImage=BitmapFactory.decodeResource(Environment.getExternalStorgeDirectory().getAbsolutePath()+"yourFolder/myImageName.jpg");  

       mWebView.loadDataWithBaseURL("file:///"+Environment.getExternalStorgeDirectory().getAbsolutePath()
                                    +"yourFolder/","<html><center>
                                    <img src=\"myImageName.jpg\" vspace="
                                    +(currentHeight/2-(BitmapOfMyImage.getHeight()/2))+">
                                     </html>","text/html","utf-8","");
     //This loads the image at the center of thee screen                    

   }

我使用 center 标签将图像垂直居中，然后使用 vspace 标签赋予图像上边距。现在边距由以下公式计算：screenVierticalHeight/2-ImageVerticalHeight/2

希望对你有帮助

【讨论】：

看起来很有希望，请检查一下并更改我的答案！谢谢！

【解决方案3】：

    mWebView.loadDataWithBaseURL("file:///"+Environment.getExternalStorgeDirectory().getAbsolutePath()+"yourFolder/","<html><center><img src=\"myImage.jpg\"></html>","text/html","utf-8","");

这会将来自 SDCard 的图像放置在 webView 的中心。我希望这会有所帮助

【讨论】：

哇哇，它工作了一半，谢谢到目前为止，但它只是水平居中而不是垂直居中。可以垂直居中吗？

【解决方案4】：

String html = "<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p style=\"color:white\">+"you message"+</p></body></html>";

webView.loadData(html, "text/html; charset=UTF-8", null);

所以这将加载您的 webview 并在中心显示文本

【讨论】：

【解决方案5】：

尝试加载嵌入图像的 HTML 文件。那么所有的布局都可以用标准的css样式来完成。

【讨论】：

我愿意，图像是从我的 SD 卡加载图像的 html 代码
可以去掉html代码吗？否则很难猜出问题所在。

【解决方案6】：

我遇到了同样的问题 - 在 webview 中垂直居中。这个解决方案大部分时间都有效......也许它可以帮助你一点

                int pheight = picture.getHeight();
                int vheight = view.getHeight();

                float ratio = (float) vheight / (float) pheight;

                System.out.println("pheight: " + pheight + "px");
                System.out.println("vheight: " + vheight + "px");
                System.out.println("ratio: " + ratio + "px");

                if (ratio > 0.5)
                {
                    return;
                }

                int diff = pheight - vheight;
                int diff2 = (int) ((diff * ratio) / 4);

                if (pheight > vheight)
                {
                    // scroll to middle of webview

                    currentPhotoWebview.scrollTo(0, diff2);
                    System.out.println("scrolling webview by " + diff2 + "px");

                }

【讨论】：

【解决方案7】：

我知道这个答案有点晚了，但这里有一个没有 javascript 的选项：

您可以扩展 WebView 并使用受保护的方法 computeHorizontalScrollRange() 和 computeVerticalScrollRange() 来了解最大滚动范围，并基于此计算您想要在哪里 scrollTo 和 computeHorizontalScrollRange()/2 - getWidth()/2 and 类似垂直：@987654326 @

我唯一的建议是在加载之前确保加载完成，我没有测试这在加载时是否有效，但我不认为它会因为 webview 还没有它的滚动范围正确设置（因为内容仍在加载中）

请参阅：Android webview : detect scroll 我从中获得了很多信息。

【讨论】：

【解决方案8】：

对我来说这是工作：

String path = Environment.getExternalStorageDirectory().getAbsolutePath() + "PICTURE FILE NAME";
File file = new File(path);
String html = "<style>img{height: 100%;max-width: 100%;}</style> <html><head></head><body><center><img src=\"" + imagePath + "\"></center></body></html>";
webView.getSettings().setDefaultZoom(ZoomDensity.FAR);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setUseWideViewPort(true); 
webView.getSettings().setLoadWithOverviewMode(true);
webView.loadDataWithBaseURL( "" ,  html, "text/html", "UTF-8", "");

【讨论】：