１．アプリ側
onCreate に下記を記述する。
View v = findViewById(R.id.viewer);
String url = "http://example.com/image.png";
if (v != null) {
viewer = (WebView)v;
viewer.clearCache(true);
viewer.setVerticalScrollbarOverlay(true);
viewer.setWebViewClient(new ImageWebViewClient());
WebSettings ws = viewer.getSettings();
ws.setBuiltInZoomControls(true);
ws.setSupportZoom(true);
ws.setJavaScriptEnabled(true);
viewer.addJavascriptInterface(new forJs(), "android");
viewer.loadUrl(url);
}
クラスを追加
public class ImageWebViewClient extends WebViewClient {
//ページの読み込み完了
@Override
public void onPageFinished(WebView view, String url) {
viewer.loadUrl("javascript:void(myprj.resize("+viewer.getWidth()+","+viewer.getHeight()+"))");
}
}
ポイント
スクロールバー分のスペースを削除する
viewer.setVerticalScrollbarOverlay(true);
JavaScriptを利用可能にする。
ws.setJavaScriptEnabled(true);
JavaScriptからアプリ側の関数をコールするために設定
viewer.addJavascriptInterface(new forJs(), "android");
２．CSSには以下を記載
html, body {
margin:0;
padding:0;
}
img {
border: 0;
vertical-align:text-bottom;
}
３．JavaScript
resize : function (w, h) {
var fixW = 320;
this.width = fixW;
this.height = (h * fixW) / w;
var main = document.getElementById("main");
var menu1 = document.getElementById("menu1");
this.fitImage();
this.setButtonEvents();
menu1.innerHTML = "width: " + main.width + " end";
}
４．HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=initial-scale=1">
<link rel="stylesheet" href="inc/common.css" type="text/css" media="all">
<script src="inc/common.js"></script>
</head>
<body>
<img id="main" src="img/sample.png">
</body>
</html>
５．アプリ側
assetsディレクトリにimgディレクトリ作成してその中にsample.pngを保存。
以上で自分と同じく画像１枚表示で、WebViewのスクロールや拡大昨日が利用できる画像ビューアーが簡単に作成できるはずです。
