Help us understand the problem. What is going on with this article?

Android Webviewで表示している画像サイズを取得する

More than 3 years have passed since last update.

advent_calender_5.png

Goodpatch Advent Calendar 5日目の投稿です。
こんにちは。@hi6484です。
Goodpatchで日々Androidアプリを作ってます。

今年度、Androidアプリを作っていてハマったポイントです。
WebViewとかで辛い思いをするのは嫌なんで、
実装を諦めようかとおもったのですが、なんやかんやで実装できました。
実装できたため、Advent Calendarにも参加できる幸せものです。

要件

とある ウェブページの画像を表示させる(簡単にいうとInterstitial広告)
広告SDKはあるんですが、interstitial未対応なため、アプリ側で実装。
画像サイズは可変。もちろんJSで動く

iOS側では既に実装済みで、画像サイズを取得するのは下記のような感じ。

CGSize contentSize = CGSizeMake([[webView
        stringByEvaluatingJavaScriptFromString:
        @"document.body.scrollWidth;"] floatValue],
        [[webView stringByEvaluatingJavaScriptFromString:
        @"document.body.scrollHeight;"] floatValue]);

Android

Androidでどうやるのか。
Android4.4(Kitkat)以上に対応しております。
それ以下の実装方法を知っている方がいましたら教えてください。

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/interstitial_view"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:background="#B2000000"
    >
    <WebView
        android:id="@+id/web_view"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />
</FrameLayout>

ここで重要なのはandroid:layout_width="0dip"となります。
ここをwrap_contentやmatch_parentと指定しておくと、
画面サイズより小さい画像の場合は画面の横幅が取得されます。

JAVA

    private void loadWebView() {
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new SampleWebViewClient());
        String url = "http://wwww.hogehoge.com/image";
        mWebView.loadUrl(url);
    }

    private class SampleWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                // 余白を消す.
                mWebView.evaluateJavascript(
              "javascript:document.body.style.margin='0';",
                       null);

                // 高さを取得.
                String heightScript =
                        "javascript:document.body.scrollHeight;";
                mWebView.evaluateJavascript(heightScript,
                        new ValueCallback<String>()
                        {
                            @Override
                            public void onReceiveValue(String value) {
                                mHeight = Integer.valueOf(value);
                            }
                        });
                // 幅を取得.
                String widthScript =
                        "javascript:document.body.scrollWidth;";
                mWebView.evaluateJavascript(widthScript,
                        new ValueCallback<String>()
                        {
                            @Override
                            public void onReceiveValue(String value) {
                                mWidth = Integer.valueOf(value);
                            }
                        });

            }
        }
    }

Android4.4より追加された、WebView.evaluateJavascript(String script, ValueCallback resultCallback)に、
scriptを渡して、結果をcallbackで受け取るだけ。

明日はGoodpatchのiOSエンジニア @eedawa が英語?でiOSの事を書いてくれます。
お楽しみに!!!

hi6484
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした