[Android]ボタンがクリックされるたびにListViewに項目を追加させる

2012年12月22日

画面に表示されたボタンをクリックするたびに、ListViewへ項目を追加します。
ListViewに表示される各項目は、アイコンを設置するなど自由なデザインを組むことが出来るのですが、今回はシンプルに文字列を表示させるだけです。

※複雑なデザインにする場合は、こちらの記事を参考にして下さい。


実行結果




ソースコード

package com.example.test1;
 
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
 
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
 
public class MainActivity extends Activity {
    Button   btnAddAlerm;
    ListView lstAlert;
    TextView txtMessage;
 
    ArrayList<String> alertList = new ArrayList<String>();
    ArrayAdapter<String> adapter;
 
    /**
     * 画面生成時のハンドラ
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        //--------------------
        // 画面レイアウトを作成
        //--------------------
        LinearLayout layout = new LinearLayout( this );
        layout.setOrientation( LinearLayout.VERTICAL );
        setContentView( layout );
 
        //----------------------------
        // 画面のレイアウトを組み立てる
        //----------------------------
        txtMessage = new TextView( this );
        txtMessage.setText( "こんにちは" );
 
        btnAddAlerm = new Button( this );
        btnAddAlerm.setText( "click me" );
 
        lstAlert = new ListView( this );        
        adapter = new ArrayAdapter<String>( this, android.R.layout.simple_list_item_1, alertList );
        lstAlert.setAdapter(adapter);
 
        layout.addView( txtMessage );
        layout.addView( btnAddAlerm );
        layout.addView( lstAlert );
 
        // ボタンクリック時のイベントを定義
        btnAddAlerm.setOnClickListener( new BtnAddAlermClickListener() );
    }
 
 
    /** ボタンクリック時のハンドラ
     */
    private class BtnAddAlermClickListener implements OnClickListener {
 
        public void onClick(View v) {
            txtMessage.setText( "ボタンがクリックされました" );
 
            // 一覧に追加するメッセージを組み立て
            String msg = "item" + alertList.size() + ": " + new SimpleDateFormat( "yyyy/MM/dd HH:mm:ss" ).format( new Date() );
 
            // ListViewに項目を追加
            alertList.add( msg );
            lstAlert.setAdapter(adapter);
        }
    }
 
}



ListViewを使用するのに必要な3つのオブジェクト


ListViewを使用するには、以下の3つのオブジェクトが必要です。

ListView自体
Adapterクラス
表示すべき項目の一覧





ListView

ListView自体は単なるViewでこれまで,使用したButton/TextView等と同様のUIオブジェクトです。



Adapterクラス

Adapterクラスは、ListViewに対してデータを渡すためのData-UI間の橋渡し役です。
今回はBaseAdapterを継承したArrayAdapterクラスを使用します。

lstAlert = new ListView( this );        
adapter = new ArrayAdapter<String>( this, android.R.layout.simple_list_item_1, alertList );
lstAlert.setAdapter(adapter);


コンストラクタでは、context,resource,dataの3つを渡します。


resourceは、Androidで事前定義されている”android.R.layout.simple_list_item_1″を指定します。
これは、SDKのインストール先の以下の場所辺りで定義されています。

%INSTALL_DIR%\platforms\android-10\data\res\layout\simple_list_item_1.xml




内容はこんな感じで、単一のTextViewとして定義されています。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:paddingLeft="6dip"
    android:minHeight="?android:attr/listPreferredItemHeight"
/>



もっと凝ったUIを表示させたい場合は、このリソースを別のものに変えるか、ArrayAdapterを継承した独自のクラスを作成します。
※継承させる場合のコードはこちらで説明しています。

3つ目の引数は、表示させたい項目の一覧です。



表示すべき項目の一覧


表示すべき項目の一覧は、まさに出したいデータです。
今回は文字列を管理するだけなのでjava.utilのArrayListを使用しました。

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

コメントを残す

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