プログラムしたいねん!: Android WebViewで１枚の画像を画面いっぱいに表示

2012年6月18日月曜日

Android WebViewで１枚の画像を画面いっぱいに表示

１．アプリ側 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のスクロールや拡大昨日が利用できる画像ビューアーが簡単に作成できるはずです。

プログラムしたいねん!

Pages

2012年6月18日月曜日

Android WebViewで１枚の画像を画面いっぱいに表示

0 件のコメント:

コメントを投稿

Followers