[Android] BaseAdapterで画像とテキストをListView表示

ArrayAdapterを使えば手軽に作れる ListView ですが、画像とテキストのリストなど色々と細かく作りこみたい場合はカスタムでadapterを作成することになります。BaseAdapterを継承してカスタムでadapterを作るケースを試してみます。

Android Studio
2021.2.1




ListView

 
メンバー11人の写真、スタッフ管理番号、eメールアドレス、電話番号(内線)そして名前をリスト化したアプリを作成してみたいと思います。

メンバー:
1x1.trans - [Android] BaseAdapterで画像とテキストをListView表示

最終的にこのようになります。

1x1.trans - [Android] BaseAdapterで画像とテキストをListView表示

ListViewを作るためのBaseAdapterを継承したクラスは3つあります。

  1. SimpleAdapter
  2. ArrayAdapter
  3. CursorAdapter

単純なテキストリストはArrayAdapterを使ったほうが簡単です。ただし込み入ったレイアウトにしたい時はそのままBaseAdapterをカスタム化して使ったほうがいいでしょう。

 

 

BaseAdapter

 

カスタムadapterを作成する手順としては:

  • BaseAdapterを継承したクラスを作成
  • getView() メソッドをオーバライト
  • リスト項目のレイアウトをカスタマイズ

基本的なBaseAdapterの構造は

  • getCount(): 配列やListの要素数を返す
  • getItem(): indexやオブジェクトを返す
  • getItemId(): 特別なIDをindexの他に返す
  • getView(): setImageBitmap() など、ここで描画させている
 

サンプルコード

 
実際に作っていきたいと思います。
 
MainActivity.java


 
新しいTestAdapterクラスをprojectに作成します。
TestAdapter.java


 
レイアウトファイル
RelativeLayoutを使いますが、constraintlayoutでも可能です。
activity_main.xml


 
新しくLayout XMLファイルをlayout以下に作成します。
list_items.xml


 
strings.xml


 
サムネイル化(150x150pixel程度)した小さい画像をdrawableに入れます。
(API24以上を想定した場合はdrawable-v24に入れる)
 
1x1.trans - [Android] BaseAdapterで画像とテキストをListView表示

画像は適当なものでかまいませんが、ファイル名がコードで呼ばれているので合わせてください。
 
これで実行してみます。
 

 

convertViewの再利用

 
リスト数が10個程度だとあまり気にならないのですが、画像を貼り付けてリスト数が数百になると、あるいはリストを増やせる仕様のケースでは、スクロールが重くなり最終的には Out Of Memory で終了…となる可能性があります。
 
ちょっと古いのですがGoogleがListViewについて解説した2010の動画です。今も使える内容で基本的な事が良く分かります。

Google I/O 2010 – The world of ListView

10000のアイテムをそのままリスト表示させていたらメモリがいくらあっても足りない
描画負荷を減らし、高速にするための手法として


 
if (convertView == null){

}else{

}
の部分で convetView がnullでなければ再利用する
– Inflate()
– findViewById()
は省略され、ViewHolder の children view が使用されます。

テキストのリストであれば問題ないかもしれませんが、画像を扱うListViewではこれは必須です。
 

    ArrayAdapter
  1. ListView と ArrayAdapter 簡単なテキストリストの表示
  2. ArrayAdapterを使ってレイアウトをアレンジ
  3. ListActivity と ArrayAdapterで画像とテキストをリスト表示
    Basedapter
  1. BaseAdapterで画像とテキストをリスト表示
  2. ListViewリストをタップして画面遷移
  3. ListViewアイテムの移動、削除
  4. ListView アイテム個々の背景、高さなどを変える

 
References:
ListView
BaseAdapter

シェアする

  • このエントリーをはてなブックマークに追加

フォローする