Pages

2012年6月18日月曜日

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

1.アプリ側 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"); 2.CSSには以下を記載
html, body {
  margin:0;
  padding:0;
}

img {
  border: 0;
  vertical-align:text-bottom;
}
3.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";
}
4.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>
5.アプリ側 assetsディレクトリにimgディレクトリ作成してその中にsample.pngを保存。 以上で自分と同じく画像1枚表示で、WebViewのスクロールや拡大昨日が利用できる画像ビューアーが簡単に作成できるはずです。

2012年6月6日水曜日

Android WebView内で画面やウィンドウサイズが取得できない

今回レイアウトXMLにWebViewを記載して、アプリ内のHTMLファイル読み込ませたかった。
そしてそのHTML内ではJavaScriptを利用して画面サイズを合わせて最適なサイズにしたいという課題でした。

ところが実験中はうまくできたのに作りこんでいくと急にJavaScript内で画面サイズが0になってしまった。。

何故。。
で、しばらく調査してて気づいたのが、どうやらonCreateの中でloadUrlなどをしているとダメっっぽい。。

調査の時は偶然onWindowFocusChangedから設定していたので、大丈夫というオチでした。。

Followers