リモートの画像を読み込む方法として、
ImageViewを使うよりもWebViewを使うほうが良いのではないかと思ったので、
サンプルソースを書いてみた。
WebViewImageLoad01.tar.gz
AsyncTaskを利用して、バックグラウンドで
mClient = new DefaultHttpClient();
mGetMethod = new HttpGet();
mGetMethod.setURI(new URI(uri));
HttpResponse resp = mClient.execute(mGetMethod);
InputStream is = resp.getEntity().getContent();
Bitmap bit = createBitmap(is);
のようにする手もあるが、
uriに指定された画像が、大きすぎてメモリ不足になったりしたときに落ちる。。。
WebViewを利用しておけば、この点はWebkitのほうで何とかしてくれる？とか
思ったので、とりあえずやってみた。
でも、画像が読み込めなかったときに、標準ブラウザの「？」が表示されちゃうから
やっぱり無しかな。。。
loadImageは、画像をhttpで取得して表示
loadImage2は、トリミングして表示
loadImageFromSDは、sdcardから取得した画像を表示
loadImageFromSD2は、トリミングして表示
トリミング自体は、CSSで記述しています。
表示してみるとわかるが、
setBackgroundColor(Color.parseColor("#00000000"))を利用することで
WebViewの背景を透明にできる。さらにlayoutのファイルで
backgroundを指定するれば、色つきの透過とか色々できる模様
上がloadImageで、下がloadImage2。
ちなみに上記スクリーンショットは
eclair-x86で、ubuntuでつくったイメージをWindowsのVMplayerで実行しているところ。
もとの画像は以下のもの。(ちなみに戸田恵梨香さん。勝手に使っているけど平気かな。。。)
CustomWebViewClientは、シーケンスを見るためにWebViewClientを拡張しただけです。
package com.matsuhiro.android.webimageload01;
import java.io.File;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Environment;
import android.webkit.WebView;
public class WebImageload01 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView web1 = (WebView) findViewById(R.id.web1);
loadImage(web1, "http://img.article.pchome.net/00/26/58/73/pic_lib/wm/Toda_Erika1063.jpg");
WebView web2 = (WebView) findViewById(R.id.web2);
loadImage2(web2, "http://img.article.pchome.net/00/26/58/73/pic_lib/wm/Toda_Erika1063.jpg");
WebView web3 = (WebView) findViewById(R.id.web3);
loadImageFromSD(web3, "DCIM/100MEDIA/IMAG0077.jpg");
WebView web4 = (WebView) findViewById(R.id.web4);
loadImageFromSD2(web4, "DCIM/100MEDIA/IMAG0077.jpg");
}
private void loadImage(final WebView webview, final String image_uri) {
final String html_src = "<html><head><style type=\"text/css\">body { margin: 0px; background: transparent; background-color: transparent;}</style></head><body><img src=\""+image_uri+"\" width=\"210\" height=\"210\"/></body></html>";
webview.setBackgroundColor(Color.parseColor("#00000000"));
new Thread() {
@Override
public void run() {
CustomWebViewClient clieant = new CustomWebViewClient();
webview.setWebViewClient(clieant);
webview.loadData(html_src, "text/html", "UTF-8");
}
}.start();
}
private void loadImage2(final WebView webview, final String image_uri) {
final String html_src = "<html><head><style type=\"text/css\">body { margin: 0px; background: transparent; background-color: transparent;}p.thumb a{ display:block; float:left; width:210px; height:210px; line-height:210px; overflow:hidden; position:relative; z-index:1}p.thumb a img{ float:left; position:absolute; top:0px; left:-32px;} </style></head><body><p class=\"thumb\"><a href=\"#\"><img src=\""+image_uri+"\" width=\"280\" height=\"210\"/></a></p></body></html>";
webview.setBackgroundColor(Color.parseColor("#00000000"));
new Thread() {
@Override
public void run() {
CustomWebViewClient clieant = new CustomWebViewClient();
webview.setWebViewClient(clieant);
webview.loadData(html_src, "text/html", "UTF-8");
}
}.start();
}
private void loadImageFromSD(final WebView webview, String file_name) {
final String html_src = "<html><head><style type=\"text/css\">body { margin: 0px; background: transparent; background-color: transparent;} </style></head><body><img src=\""+file_name+"\" width=\"210\" height=\"210\"/></body></html>";
webview.setBackgroundColor(Color.parseColor("#00000000"));
final File directory = Environment.getExternalStorageDirectory();
new Thread() {
@Override
public void run() {
CustomWebViewClient clieant = new CustomWebViewClient();
webview.setWebViewClient(clieant);
webview.loadDataWithBaseURL("file://"+directory.getAbsolutePath()+"/", html_src, "text/html", "UTF-8", "");
}
}.start();
}
private void loadImageFromSD2(final WebView webview, String file_name) {
final String html_src = "<html><head><style type=\"text/css\">body { margin: 0px; background: transparent; background-color: transparent;}p.thumb a{ display:block; float:left; width:210px; height:210px; line-height:210px; overflow:hidden; position:relative; z-index:1}p.thumb a img{ float:left; position:absolute; top:-60px; left:0px;} </style></head><body><p class=\"thumb\"><a href=\"#\"><img src=\""+file_name+"\" width=\"210\" height=\"351\"/></a></p></body></html>";
webview.setBackgroundColor(Color.parseColor("#00000000"));
final File directory = Environment.getExternalStorageDirectory();
new Thread() {
@Override
public void run() {
CustomWebViewClient clieant = new CustomWebViewClient();
webview.setWebViewClient(clieant);
webview.loadDataWithBaseURL("file://"+directory.getAbsolutePath()+"/", html_src, "text/html", "UTF-8", "");
}
}.start();
}
}
レイアウトは以下のような感じ。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:id="@+id/ScrollView"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/icon">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"/>
<WebView android:id="@+id/web1"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#2A0000FF" />
<WebView android:id="@+id/web2"
android:layout_width="300dp"
android:layout_height="300dp"
android:focusable="false"
android:background="#2A00FFFF"/>
<WebView android:id="@+id/web3"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#2AFF00FF" />
<WebView android:id="@+id/web4"
android:layout_width="300dp"
android:layout_height="300dp"
android:focusable="false"
android:background="#2A00FF00" />
</LinearLayout>
</ScrollView>
</LinearLayout>
