ListViewに画像サムネイル付きテキストを表示してみる

好きなレイアウトをリストで表示したいときには
ArrayAdapterを継承したクラスを使うことで、簡単に実現することができます。

今回はListViewに画像とテキストを表示します。

まず、画像のリソースIDと文字を格納するクラスを作成します。
※リストの1行の情報を格納するためのクラスです。

次に、ArrayAdapterを継承したクラスを作成します。

まず、継承するArrayAdapterのジェネリクスに、
先ほど作成したListItemクラスを定義します。
次に、ArrayAdapterクラスのgetViewメソッドをOverrideし、
ここに独自の処理を記述していきます。

getViewメソッドは、ListViewがスクロールされ、
新しい行が画面に表示されるタイミングで呼び出されるメソッドです。
画面に表示されるリストの情報を、都度、作成します。

第1引数のpositionに、表示対象のリスト番号が渡されてきます。
そのpositionを元に、
コンストラクタで元々受け取っていたitemsから表示対象のListItmeを取得し、
ListItmeに格納されている画像情報とテキストをViewに設定します。

getViewメソッドについての詳細な挙動については、
「AdapterクラスのgetViewメソッドの挙動について」を参考にしてください。(只今、作成中)

次に、Activityです。

ArrayAdapterではなく、先ほど作成したImageArrayAdapterのインスタンスを作成します。
サンプルでは、24~29行目で、表示するリストの一覧を作成し、
31~33行目で、ImageArrayAdapterのインスタンス生成時の引数に渡しています。

今回、使用したレイアウト定義です。

こちらが、リストの1行に表示するレイアウトです。

今回は、画像とテキストを表示したかったので
ImageViewと、TextViewを定義しています。
このレイアウトを変更することで、簡単にオリジナルのリストを作成することができます。

今回のサンプルを実行してみると、以下のようになります。

image-list-view

スポンサーリンク







シェアする

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

フォローする

スポンサーリンク