Androidで大量の写真・画像をRecyclerViewで高速表示!その手順

Androidアプリ開発でのこと

画像をこんな感じで表示したいです。

  • 大量の写真・画像をグリッド表示したい
  • スクロール時に写真・画像読み込み
  • スムーズに動く快適性も欲しい

そんな時に便利なライブラリを見つけました。

その名も RecyclerView というもの

負荷なく大量のアイテム表示ができて便利なので、
このRecyclerViewによる画像写真表示の実装をまとめます。

※ Android Studioでの手順

1.RecyclerViewをbuild.gradleから導入する

初めにRecyclerViewライブラリを導入します。

▼ モジュールレベルのbuild.gradleを開く

Android Studio - モジュールレベルのbuild.gradleを開く

▼ dependenciesブロック内に追加

最新バージョンはv1.2.1

追加したら[Sync Now]を押して同期です。

2.画像写真表示用のアイテムViewレイアウトを作成

そしたら次のアイテムのレイアウト作成です。

RecyclerView内で画像を大量表示するのですが、
その1つ1つのアイテムのレイアウトを作ります。

名前は item_view_image_text.xml としました。

▼ そのレイアウトXMLの内容がこちら

このレイアウトは次の2つで構成されます。

  • 画像ビュー (@+id/image_view)
    画像を表示するためのビュー。画像がグリッドに収まるように android:layout_width="match_parent"  を指定している。具体的な幅・高さ調整はコードで行う(後述)
  • テキストビュー (@+id/text_view)
    もし画像だけを表示したいならテキストビューはいらない。ここでは画像の左下にオーバーレイとして重なるように配置した。

必要に応じてレイアウトは変えてください。

ただし後述するようにレイアウトを変えたら、RecyclerView.Adapter を継承したクラスでも色々修正が必要です。この意味は次から徐々に判明していきます。

ひとまずアイテムレイアウトは完成

3.RecyclerView.Adapterを継承したAdapter作成

ここからがRecyclerViewで肝心なところです。

RecyclerView.Adapterを継承したAdapterクラス作成

ここでは ImageTextItemAdapter というクラスにします。

▼ 作成したImageTextItemAdapterクラスの内容

枝葉の部分はあまり気にしないでください。

重要なのは以下のオーバライドメソッドです。

  • onCreateViewHolder()
    新しいViewHolderが必要な度に呼び出されるメソッド。ここでは先ほどのXMLレイアウトからRecyclerViewのアイテムを生成している
  • onBindViewHolder()
    外部から渡されるデータをViewHolderを結びつける(Bindする)ためのメソッド。ここでは渡されたJSONObjectから画像パス・テキストを受け取り、それぞれをビューに設定している
  • getItemCount()
    表示されているRecyclerView内のデータ数(=アイテム数)を取得するメソッド。もし後からアイテム追加・削除するなら工夫が必要。そこは各自で考えて

この3つだけオーバライドすればOKです。

4.ActivityなどでRecyclerViewを設定・表示

そしたらActivityでRecyclerViewを表示します。

※ ただしレイアウトにRecyclerView追加済みの前提

ここでは次のようなコードを書いてみました。

▼ RecyclerView設定・表示のコード例

ただしデータの用意は各自の目的ごとに違います。

各自のAdapterにあったデータセットを用意してください。

これでRecyclerViewで大量画像をグリッド表示できました。

5.実際にRecyclerViewを表示して動かした様子

見た目としてはこんな感じになりました。

▼ RecyclerViewで大量の画像をグリッド表示

RecyclerViewで大量の画像をグリッド表示してみた。スクロールすると動的に写真を読み込みしてくれる

▼ RecyclerViewの動作例

RecyclerViewは表示されないビューはリサイクルされるので、表示が必要になる度に画像を読み込んでくれます。文字通りリサイクルできるビューという訳です。

そういうスマートな仕組みだから画像が大量でも重くならないし、メモリ不足でOutOfMemoryになる心配も恐らくありません。

RecyclerViewによる大量写真表示のまとめ

ここまでの手順を箇条書きでまとめ

大量の写真・画像をメモリの心配なく表示できます。

以上、RecyclerViewで大量写真表示でした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください