2015年5月26日火曜日

AndroidのListView内に複数項目を表示する方法(SimpleAdapterを使う)

目次へ



  • ListViewとは
  • ListViewをレイアウトの中で作成
  • ListViewの中の各項目用レイアウトの作成
  • プログラムでSimpleAdapterを作成し表示


■ListViewとは

いろいろなデータを一覧で表示するにはListViewを使うと便利です。
項目がたくさんあればスクロールも自動でできます
下の画面がListViewを使ったものです。
必要なものは
  • activity_main.xml この中でListViewを定義
  • item.xml ListViewの中の1つ分のデータ(下図の赤の部分)を定義
  • ActivityのonCreateメソッドでSimpleAdapterを作成しListViewの中に複数の項目を作成



■ListViewをレイアウトの中で作成

activity_main.xmlの内容

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:drawSelectorOnTop="false"
        android:layout_weight="1" />

    <TextView
        android:id="@id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>



■ListViewの中の各項目用レイアウトの作成

item.xmlの内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/vw1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
           android:id="@+id/comment"
             android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>



■プログラムでSimpleAdapterを作成し表示

MainActivity.javaの内容


public class MainActivity extends ActionBarActivity {

 ArrayList<Map<String,Object>> list = new ArrayList<Map<String, Object>>();
 SimpleAdapter adapter;

 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  // ListView を取得
  ListView listView = (ListView) findViewById(R.id.listView);

  // SimpleAdapterに渡すArrayList作成
  createData();

  // リストビューに渡すアダプタを生成
  adapter = new SimpleAdapter(
   this,
   list,               //ArrayList
   R.layout.item,          //ListView内の1項目を定義したxml
   new String[] { "title", "comment","img" },    //mapのキー
   new int[] {R.id.title, R.id.comment, R.id.img });//item.xml内のid

  // アダプタをセット
  listView.setAdapter(adapter);
 }

 private void createData() {
  for (int n = 0; n < 15; n++) {
   Map data = new HashMap();
   data.put("title", "title" + n);
   data.put("comment", "comment" + n);
   data.put("img", R.drawable.ic_launcher);
   list.add(data);
  }
 }
}










にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村