[Android]ListViewで,一覧にアイコン付きのメッセージを表示

2012年12月22日

前回はListViewの各要素に対して、文字を表示させました。
ボタンがクリックされるたびにListViewに項目を追加させる

今回はこれを少し発展させて、アイコン付きの文字表示にします。

今回作るプログラムの実行結果はこんな感じです。


一覧の明細に対する見た目を変更する方法は複数有りますが、今回はアダプタクラスを作成する方法で実装してみます。



画面のActivityクラス側ですが、変更箇所は1つだけです。

変更前

protected void onCreate(Bundle savedInstanceState) {
    ...
    lstAlert = new ListView( this );        
    adapter = new ListArrayAdapter( this, alertList );
    lstAlert.setAdapter(adapter);
 
    ....
}


上記のListArrayAdapterを今回新規に作成するクラスに差し替えます。


変更後

    adapter = new AlertListArrayAdapter( this, alertList );





で、実際のAlertListArrayAdapterクラスは、以下の様な感じになります。

package com.example.test1;
 
import java.util.List;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class AlertListArrayAdapter extends ArrayAdapter<String> {
    private List<String> itemList;
 
    /**
     * コンストラクタ
     * @param context   コンテキスト情報
     * @param itemList  表示させる項目の一覧
     */
    public AlertListArrayAdapter( Context context, List<String> itemList ) {
        super( context, -1, itemList );
        this.itemList = itemList;
    }
 
 
    /** 指定されたpositionを表示させるviewを取得する
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Context ctx = getContext();
 
        //------------------------------------------------------
        // 初めて表示する項目の場合はViewオブジェクトを作成する
        //------------------------------------------------------
        if ( convertView == null ) {
            Bitmap clockIconBmp;
 
            LinearLayout layout = new LinearLayout( ctx );
            layout.setPadding( 10, 10, 10, 10 );
            layout.setBackgroundColor( Color.WHITE );
 
            convertView = layout;
 
            // 時計のアイコンを左に表示
            ImageView imgIcon = new ImageView( ctx );
            clockIconBmp = BitmapFactory.decodeResource(ctx.getResources(), android.R.drawable.ic_lock_idle_alarm ); 
            imgIcon.setImageBitmap( clockIconBmp );
 
 
            // 左に説明のテキストを表示
            TextView txtMsg = new TextView( ctx );
            txtMsg.setTag( "txtMsg" );
            txtMsg.setPadding( 30, 10, 30, 10 );
 
            // レイアウトにアイコン、テキストUIを追加
            layout.addView( imgIcon );
            layout.addView( txtMsg );
        }
 
 
        // 一覧の説明表示欄に、メッセージを流し込む
        TextView txtViewMsg = (TextView)convertView.findViewWithTag( "txtMsg" );
        txtViewMsg.setText( itemList.get( position ) );
 
 
        // 表示すべきviewを返す
        return convertView;
    }
}



ListViewに項目を表示させるべき状況が発生すると、Androidのイベントループ側がgetView()を呼んでくれます。Adapterクラスは、この要求に対して表示させる見た目のViewオブジェクトを返してあげます。



getView()の引数は3つ有ります。

第1引数のpositionで、指定された場所が分かるので、メソッド内では可変部の情報をpositionを元にデータ取得します。

第2引数のconvertViewは、既に一度表示された明細項目を再表示する場合には、前回表示されてたViewが返るので、可変部だけを設定します。初めて表示される項目の場合(初期表示/スクロールさせた時など)は、convertViewがNullなのでViewオブジェクト自体を、getView()内で生成するします。




今回のサンプルではアイコンと文字の2つだけでしたが、アダプタクラスgetView()が返すViewを変更すればどんなデザインでも組み立てることが可能です。また、Viewに流し込む可変部のデータも、ArrayListではなくArrayList>や、カスタムのクラスにしてしまえば、Adapter側へ複数/複雑な構造を持ったデータを渡す事が可能です。

関連記事
同じカテゴリの記事はこちらから!! → Android

コメントを残す

メールアドレスが公開されることはありません。