android ListViewを使う

今回は、ListViewを使ってみます。
作成するListViewにはタイトルと値が表示されるListViewにしてみます。

xmlファイルの作成

data_list_view.xmlはこのようにしました。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="25sp"
    android:orientation="horizontal">
    <TextView
      android:layout_width="70sp"
      android:layout_height="fill_parent"
      android:textColor="#FFFFFFFF"
      android:text="タイトル"
      android:gravity="center"
    />
    <TextView
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:textColor="#FFFFFFFF"
      android:text="値"
      android:gravity="center"
    />
  </LinearLayout>

  <ListView
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:id="@+id/listViewTest"
  />
</LinearLayout>

data_list_view_item.xmlはこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="25sp"
    android:orientation="horizontal">
    <TextView
      android:id="@+id/title"
      android:layout_width="70sp"
      android:layout_height="fill_parent"
      android:textColor="#FFFFFFFF"
      android:text="title"
      android:gravity="center"
    />
    <TextView
      android:id="@+id/value"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:textColor="#FFFFFFFF"
      android:text="value"
      android:gravity="center"
    />
  </LinearLayout>
</LinearLayout>

packageとクラスファイルの作成

新しいpackageとクラスを追加します。
前回作成したアプリケーションを編集して、こんな感じにしました。

DataListViewItemを編集

DataListViewItemはListViewに表示される情報を記録するクラスとします。
セッターとゲッターを持つ単純な構成にします。

public class DataListViewItem {
    private String titleName;
    private String value;
    
    public DataListViewItem(){}
    
    // setter
    public void setTitleName(String titleName){
        this.titleName = titleName;
    }

    // getter
    public String getTitleName(){
        return titleName;
    }

    // setter
    public void setValue(String value){
        this.value = value;
    }

    // getter
    public String getValue(){
        return value;
    }
}

DataListViewを編集

public class DataListView <T extends DataListViewItem> extends ArrayAdapter<T>{
    private int layoutId;
    private ArrayList<T> items;
    private LayoutInflater layoutInflater;

    // コンストラクタ
    public DataListView(Context context, int layoutId, ArrayList<T> items){
        super(context, layoutId, items);
        this.layoutId = layoutId;
        this.items = items;
        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        View view = convertView;
        view = layoutInflater.inflate(layoutId, null);

        // listの表示位置を取得
        T item = items.get(position);
        if(item != null){
            setDataListTest(position, view, item);
        }
        return view;
    }

    private void setDataListTest(int position, View view, T item) {
        //それぞれのTextViewのId取得
        TextView titleText = (TextView) view.findViewById(R.id.title);
        TextView valueText = (TextView) view.findViewById(R.id.value);
        titleText.setText(item.getTitleName());
        valueText.setText(item.getValue());
    }
}

AndroidManifest.xmlを編集

追加したActivityをxmlに追記。

        <activity android:name=".ListViewTestActivity"
                  android:label="@string/app_name"/>

main.xmlの編集

ボタンを追加します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
  />
  
  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="showListView"
    android:onClick="showListViewButton"
  />
</LinearLayout>

FirstViewActivityを編集

ボタンのイベント追加します。

public class FirstViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    
    public void showListViewButton(View view){
        Intent intent = new Intent(FirstViewActivity.this, ListViewTestActivity.class);
        startActivityForResult(intent, 0);
    }
}

実行してみる

こんな感じで実行されます。