こんにちは。daichi1128です。

前回はHTTP通信をしてTwitterのタイムラインを取得、表示しました。
AndroidでTwitterのタイムラインを取得する【XmlPullParser】 | Techfirm Android Lab

ですが、前回までではユーザのアイコンは動的に表示しておらず、決め打ちで出しているだけでした。それではあまり意味がないので、今回は画像取得部分をやることにします。

ただし、メインスレッド上で画像取得をしてしまうと、取得中はユーザからの操作を全く受け付けない、使い勝手の悪いインターフェースになってしまいます。

そこで、ユーザ操作を受けつけつつ、画像を取得するために、別スレッドで処理を行います。
アプリケーションのユーザビリティを向上させるためには、この非同期処理は必須といえます。今回でマスターしてしまいましょう。

さらに、ついでなので無駄なネットワーク通信をしないために、画像データのキャッシュもしてみます。

というわけで、今回の内容は

• 画像データのキャッシュ
• HTTP通信で画像取得
• AsyncTaskで非同期処理
• その他

です。

画像データのキャッシュ

キャッシュといっても何も大げさなことはしません。
URL文字列(String)をkey、画像データ(Bitmap)をvalueとしたstaticなHashMapを用意して、ネットワーク通信を始める前にこのHashmapを参照して、データがなければHTTPでデータを取得しHashmapにセット、あればHTTP通信をせずにそのvalueを使う、というだけです。
キャッシュデータを管理するImageCacheクラスは以下です。

public class ImageCache { private static HashMap<String,Bitmap> cache = new HashMap<String,Bitmap>(); public static Bitmap getImage(String key) { if (cache.containsKey(key)) { Log.d("cache", "cache hit!"); return cache.get(key); } return null; } public static void setImage(String key, Bitmap image) { cache.put(key, image); } }

staticなHashmapフィールドを操作できるメソッドがあるだけのシンプルなクラスです。
# ログを出すためだけに分岐を入れてます。

HTTP通信で画像取得

前回作成したHttpClientクラスは、URL文字列からbyte配列を返すユーティリティメソッドしかないので、Androidで画像データを表すBitmap型へ変換する必要があります。そこで以下のgetImageメソッドをHttpClientクラスに追加して、URL文字列からBitmapを取得できるようにします。

public static Bitmap getImage(String url) { byte[] byteArray = getByteArrayFromURL(url); return BitmapFactory.decodeByteArray(byteArray, 0, byteArray.length); }

これもシンプルですね。

AsyncTaskで非同期処理

今回のメイン所です。
実はAndroidでは、通常のjavaの感覚でThreadクラスを作って実行すると、エラーで怒られてしまいます。
これはメインスレッドとなるUI Threadが他のThreadからの操作を受け付けない仕組みになっているからです。
この辺のことは、以下のページにとても丁寧に書かれているため、ここでは割愛します。

throw Life – AndroidのHandlerとは何か？

じゃ、どうすればいいのかというと、Androidにはこういった非同期処理を簡単に行えるクラスが既に用意されています。
AsyncTaskクラスです。

使い方にちょっとしたルールがあるので、サンプルコードを交えて説明していきます。
以下はAsynctaskクラスを継承したDownloadTaskクラスです。

public class DownloadTask extends AsyncTask<String, Void, Bitmap> { // アイコンを表示するビュー private ImageView imageView; // コンストラクタ public DownloadTask(ImageView imageView) { this.imageView = imageView; } // バックグラウンドで実行する処理 @Override protected Bitmap doInBackground(String... urls) { Bitmap image = ImageCache.getImage(urls[0]); if (image == null) { image = HttpClient.getImage(urls[0]); ImageCache.setImage(urls[0], image); } return image; } // メインスレッドで実行する処理 @Override protected void onPostExecute(Bitmap result) { this.imageView.setImageBitmap(result); } }

バックグラウンド処理の実行

AsyncTaskはインスタンスのexecuteメソッドでバックグラウンド処理を開始します。例えば上記のバックグラウンド処理を実行するには以下のように書きます。

DownloadTask task = new DownloadTask(imageView); task.execute("http://hogehoge.com");

# コンストラクタの引数は重要ではありません。

AsyncTaskの４つのステップ

このようにして、executeを呼ぶと、AsyncTaskの以下のメソッドが順にコールされます。

1. onPreExecute()

実行前の準備処理をここに書く。例えば、インジケータのセットアップ等。

2. doInBackground(Params...)

バックグラウンドで実行したい処理を書く。

3. onProgressUpdate(Progress...)

バックグラウンド処理の進捗具合をメインスレッドで表示させたい場合にはここに処理を書く。

4. onPostExecute(Result)

バックグラウンド処理が終了し、メインスレッドに反映させる処理をここに書く。

今回は簡単のために、doInBackgroundとonPostExecuteを実装しています。

Generics

また、上記メソッドでParams、Progress、Resultといった記述がありますが、これらはGenericsです。
以下のように指定します。

public class DownloadTask extends AsyncTask<String, Void, Bitmap> {

ここで書いているString,Void,Bitmapの３つの型は順にParams、Progress、Resultとして扱われ、それぞれバックグラウンド処理を開始するインスタンスメソッドexecuteの引数の型、進捗度合を表示する時に利用したい型、バックグラウンド処理完了時に受け取る型を意味しています。

今回は非同期処理として、URL文字列(String)から画像データ(Bitmap)を取得したい、進捗度合は特に表示しなくいい、というケースなので、String,Void,Bitmapという順に型を指定しています。
# 型を指定したくない場合はVoidを使います。

コンストラクタでは、バックグラウンド処理の結果を反映させるために、アイコンを表示するImageViewを引数にとっています。

// コンストラクタ public DownloadTask(ImageView imageView) { this.imageView = imageView; }

doInBackgroundにはバックグラウンドで実行したい処理を書きます。

// バックグラウンドで実行する処理 @Override protected Bitmap doInBackground(String... urls) { Bitmap image = ImageCache.getImage(urls[0]); if (image == null) { image = HttpClient.getImage(urls[0]); ImageCache.setImage(urls[0], image); } return image; }

この部分で通信をしてBitmapデータを取得しています。
HTTP通信を始める前にImageCacheにデータがあるか確認し、ない場合にのみ通信するようにしてます。

onPostExecuteでは、取得したBitmapをアイコン表示のImageViewにセットしています。ここの処理はメインスレッドに反映されるため、これで画面上に取得したアイコンが表示されます。

AsyncTaskについての詳細は以下を参照してください。
AsyncTask | Android Developers

その他の処理

画像URLフィールドをTwitterStatusに追加

BeanクラスのTwitterStatusに画像URLフィールを追加します。こんな感じです。
元ソースはこちらを参照してください。
ListViewをカスタマイズする | Techfirm Android Lab

public class TwitterStatus { private String profileImageUrl; public String getProfileImageUrl() { return profileImageUrl; } public void setProfileImageUrl(String profileImageUrl) { this.profileImageUrl = profileImageUrl; } ... }

パーサで画像URLを取得するようにする

詳細は前回の記事を参考にしてください。
AndroidでTwitterのタイムラインを取得する【XmlPullParser】 | Techfirm Android Lab
twitterからのxmlレスポンスのprofile_image_urlがユーザアイコンのURLになるので、これをパース時に取得するように、以下のように修正します。
コメントがあるのが追加した部分です。

// タグの識別子 private static final String PROFILE_IMAGE_URL = "profile_image_url"; public ArrayList<TwitterStatus> parse() { ArrayList<TwitterStatus> list = null; XmlPullParser parser = Xml.newPullParser(); try { byte[] data = HttpClient.getByteArrayFromURL(urlStr); parser.setInput(new StringReader(new String(data, "UTF-8"))); int eventType = parser.getEventType(); TwitterStatus currentStatus = null; boolean isFinished = false; while (eventType != XmlPullParser.END_DOCUMENT && !isFinished) { String name = null; switch (eventType) { case XmlPullParser.START_DOCUMENT: list = new ArrayList<TwitterStatus>(); break; case XmlPullParser.START_TAG: name = parser.getName(); if (name.equalsIgnoreCase(STATUS)) { currentStatus = new TwitterStatus(); } else if (currentStatus != null) { if (name.equalsIgnoreCase(TEXT)) { currentStatus.setText(parser.nextText()); } else if (name.equalsIgnoreCase(SCREEN_NAME)) { currentStatus.setScreenName(parser.nextText()); } else if (name.equalsIgnoreCase(PROFILE_IMAGE_URL)) { // アイコンURLを取得 currentStatus.setProfileImageUrl(parser.nextText()); } } break; case XmlPullParser.END_TAG: name = parser.getName(); if (name.equalsIgnoreCase(STATUS) && currentStatus != null) { list.add(currentStatus); } else if (name.equalsIgnoreCase(STATUSES)) { isFinished = true; } break; } eventType = parser.next(); } } catch (Exception e) { throw new RuntimeException(e); } return list; } }

バックグラウンド処理の呼び出し元

Downloadtaskの実行はTwitterAdapterクラスで行うことにします。
TwitterAdapterクラスのgetViewメソッドを以下のように修正。

@Override public View getView(int position, View convertView, ViewGroup parent) { // ビューを受け取る View view = convertView; if (view == null) { // 受け取ったビューがnullなら新しくビューを生成 view = inflater.inflate(R.layout.twitter_row, null); } // 表示すべきデータの取得 TwitterStatus item = (TwitterStatus)items.get(position); if (item != null) { TextView screenName = (TextView)view.findViewById(R.id.toptext); screenName.setTypeface(Typeface.DEFAULT_BOLD); // スクリーンネームをビューにセット TextView text = (TextView)view.findViewById(R.id.bottomtext); if (screenName != null) { screenName.setText(item.getScreenName()); } // テキストをビューにセット if (text != null) { text.setText(item.getText()); } ImageView imageView = (ImageView)view.findViewById(R.id.icon); // バックグラウンドで画像取得 DownloadTask task = new DownloadTask(imageView); task.execute(item.getProfileImageUrl()); } // 背景画像をセットする view.setBackgroundResource(R.drawable.back); return view; }

以上で、こんな画面の出来上がりです。

関連する投稿

• ListViewをカスタマイズする
• AndroidでTwitterのタイムラインを取得する【XmlPullParser】
• [音量設定アプリ]第5回 ハードウェアキー（音量ボタン）が押されたときの処理を行う
• [音量設定アプリ] 第1回　着信音量を設定する方法
• XPERIA X10のSDK Addon の設定｜Android Application Award 2010 Spring