web-dev-qa-db-ja.com

Android WebView、画面に合わせて画像を拡大縮小する

私が持っているもの： URLから画像を読み込んでいます。私は単に_(WebView).loadUrl(imageurl, extraheaders)_をします

私が得るもの：画像はWebViewの全幅で表示されず、周りに空白があります（デスクトップブラウザで少し画像を開いた場合など）

試したこと： LayoutAlgorithmをSINGLE_COLUMNに設定します。完璧に機能しますが、ズームは機能しません。 （WebView.getSettings()で有効にしました。理由はわかりません。setUseWideViewPort(true);を設定すると、空白スペースなしで画像をロードできますが、完全にズームインされます。

androidandroid-webview
42
artouiros

私は同じ問題を抱えていましたが、これを行うとうまくいきました：

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

String data = "<html><head><title>Example</title><meta name=\"viewport\"\"content=\"width="+width+", initial-scale=0.65 \" /></head>";
data = data + "<body><center><img width=\""+width+"\" src=\""+url+"\" /></center></body></html>";
webView.loadData(data, "text/html", null);

編集：これは受け入れられた答えとして残っていたので、ここでより良い解決策があります（以下のトニーへのすべてのクレジット）：

WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
44
Sebastian Breit

このようなこともできます。

データ文字列の先頭（Webデータ形式によって異なる）にimgのCSSスタイルを追加します。

_<style>img{display: inline; height: auto; max-width: 100%;}</style>
_

WebViewのデータをすばやく処理するために、これを行いました。

_WebView content = (WebView) findViewById(R.id.webView1);
content.loadDataWithBaseURL(null, "<style>img{display: inline;height: auto;max-width: 100%;}</style>" + post.getContent(), "text/html", "UTF-8", null);
_

これはbansal21ankitが言ったこととほとんど同じですが、HTMLのすべての画像で余分な作業なしで機能します。

編集（投稿コンテンツの説明）：

例のpost.getContent()の代わりに、任意の_text/html_値を使用できます。

ここに投稿するコンテンツは、データソースからロードされた_text/html_コンテンツの例に過ぎず、特定のコンテンツの画像を画面に合わせるstyle部分と連結されます。

83
Tony

画面に合わせてwebViewをスケーリングする必要があります。

 WebView data = (WebView) getViewById(R.id.webview1);
 data.getSettings().setLoadWithOverviewMode(true);
 data.getSettings().setUseWideViewPort(true);
38
thepoosh

私のために働いたのはこれでした：画面の幅に合わせるために、これをフィールド内のHTMLまたはxmlに追加する必要があることを読みました：

width="100%"

だから、私がやったことは、画像をスケーリングしてズームする代わりに、xmlを取得してStringBuilderに入れ、フィールド内の直前にあるsrc = "https://blablabla.com/image.png"を見つけた「src」部分文字列「width = "100％"」を挿入してから、webViewをStringBuilderで設定します。miコードは次のとおりです。

public void setWebViewWithImageFit(String content){

        // content is the content of the HTML or XML.
        String stringToAdd = "width=\"100%\" ";

        // Create a StringBuilder to insert string in the middle of content.
        StringBuilder sb = new StringBuilder(content);

        int i = 0;
        int cont = 0;

        // Check for the "src" substring, if it exists, take the index where 
        // it appears and insert the stringToAdd there, then increment a counter
        // because the string gets altered and you should sum the length of the inserted substring
        while(i != -1){
            i = content.indexOf("src", i + 1);
            if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd );
            ++cont;
        }

        // Set the webView with the StringBuilder: sb.toString()
        WebView detailWebView = (WebView) findViewById(R.id.web_view);
        detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}

これがお役に立てば幸いです。これを解決する方法を見つけるのに数時間かかりました。

8
Jesus Almaral

少し遅れましたが、これが役立つことを願っています、あなたができることは：

String html = "<html><body><img src=\"" + URL + "\" width=\"100%\" height=\"100%\"\"/></body></html>";
mWebView.loadData(html, "text/html", null);

これにより、画像がWebViewの幅に正確に似たものになりますが、残りはWebView自体を調整できます。

6
Ankit Bansal

コード：

web = (WebView) findViewById(R.id.at_image_web);
web.getSettings().setBuiltInZoomControls(true);
web.getSettings().setUseWideViewPort(true);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setLoadWithOverviewMode(true);
web.loadUrl(linkImage);
4
hai than hoang

これは私のために働く：webView = (WebView) findViewById(R.id.webView); WebSettings webSettings = webView.getSettings(); webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

1
Jenkyn

このコードは私のために働く：

String strData = "<head>" + "<style>" + ".smal-video-pnl,.smal-video-thumb,.detail-hldr{margin-left: 0px;margin-right:0px;}" + "</style>" +
            "</head>" + mListItem.get(position).getTitbits();
holder.webViewStatus.loadDataWithBaseURL(null, strData, "text/html", "UTF-8", null);
0
user6829265

これで問題が解決すると思います：-

      WebView web;

      web = (WebView) findViewById(R.id.webkit);
      web.setWebViewClient(new Callback());
      web.getSettings().setJavaScriptEnabled(true);
      web.getSettings().setLoadWithOverviewMode(true);
      web.getSettings().setUseWideViewPort(true);
      web.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
      web.setScrollbarFadingEnabled(false);
0
user755278