ExpandableListView を使ってみた

ExpandableListView は

java.lang.Object
  ↳ android.view.View
    ↳ android.view.ViewGroup
      ↳ android.widget.AdapterView<T extends android.widget.Adapter>
        ↳ android.widget.AbsListView
          ↳ android.widget.ListView
            ↳ android.widget.ExpandableListView

を使用します

Group のリストがありそれぞれが Child のリストを保持しています.
Group をクリックすRと Child のリストが開き，もう一度クリックするとリストが閉じられます.

というわけで，ExpandableListView をいじってみた.

サンプルコード

public class ExpandableListViewSample extends Activity {
  private static final String KEY1 = "GROUP";
  private static final String KEY2 = "CHILD";

  // 表示させる文字列
  private String[] GROUPS = {"Group1", "Group2", "Group3"};
  private String[][][] CHILDREN = {
      {{"Child11", "Text11"}}, 
      {{"Child21", "Text21"}, {"Child22", "Text22"}},
      {{"Child31", "Text31"}, {"Child32", "Text32"}, {"Child33", "Text33"}}, 
  };

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.expandablelistview_sample);

    // 設定する文字列のリスト
    List<Map<String, String>> groupData =
        new ArrayList<Map<String, String>>();
    List<List<Map<String, String>>> childData =
        new ArrayList<List<Map<String, String>>>();

    // リストに文字列を設定していく
    for (int i = 0; i < GROUPS.length; i++) {
      // 親要素の追加
      Map<String, String> curGroupMap =
          new HashMap<String, String>();
      groupData.add(curGroupMap);
      curGroupMap.put(KEY1, GROUPS[i]);
      curGroupMap.put(KEY2, "");

      List<Map<String, String>> children =
          new ArrayList<Map<String, String>>();
      if (CHILDREN.length > i) {
        for (int j = 0; j < CHILDREN[i].length; j++) {
          // 子要素の追加
          Map<String, String> curChildMap =
              new HashMap<String, String>();
          children.add(curChildMap);
          curChildMap.put(KEY1, CHILDREN[i][j][0]);
          curChildMap.put(KEY2, CHILDREN[i][j][1]);
        }
      }
      childData.add(children);
    }

    // ExpandbleListAdapter の作成
    ExpandableListAdapter adapter =
        new SimpleExpandableListAdapter(
            this,
            groupData,
            android.R.layout.simple_expandable_list_item_1,
            new String[] { KEY1, KEY2 },
            new int[] { android.R.id.text1, android.R.id.text2 },
            childData,
            android.R.layout.simple_expandable_list_item_2,
            new String[] { KEY1, KEY2 },
            new int[] { android.R.id.text1, android.R.id.text2 }
        );

    ExpandableListView listView = 
      (ExpandableListView) findViewById(R.id.ExpandableListView);
    // Adapter を設定
    listView.setAdapter(adapter);
    
    // グループがクリックされた時に呼び出されるコールバックを登録
    listView.setOnGroupClickListener(new OnGroupClickListener() {
      @Override
      public boolean onGroupClick(ExpandableListView parent,
          View v, int groupPosition, long id) {
        // クリックされた時の処理
        return false;
      }      
    });
    
    // グループ内の項目がクリックされた時に呼び出されるコールバックを登録
    listView.setOnChildClickListener(new OnChildClickListener() {
      @Override
      public boolean onChildClick(ExpandableListView parent, View v,
          int groupPosition, int childPosition, long id) {
        // クリックされた時の処理
        return false;
      }      
    });
  }  
}

さらに
setOnGroupCollapseListener でグループが閉じた時，
setOnGroupExpandListener でグループが開いた時
の処理もできる模様！

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="ExpandableListViewSample" />
  <ExpandableListView 
    android:layout_width="fill_parent"
    android:layout_height="0dip" 
    android:layout_weight="1"
    android:id="@+id/ExpandableListView">
  </ExpandableListView>
</LinearLayout>

プログラムを実行すると...

グループを開いたとき

こんな感じ!


参考サイト http://developer.android.com/intl/ja/reference/android/widget/ExpandableListView.html

ListView で MultipleChoice モード

ListView で複数選択できるような List を作ることができます．

基本的には ListView や SingleChoice と同じ.
Adapter の作成時に Muliple Choice ようのレイアウトを設定するのと
setChoiceMode で ListView.CHOICE_MODE_MULTIPLEを設定するくらい
すると CheckBox 付きのリストが表示されます.

というわけで，MultipleChoiceList をいじってみた.

サンプルコード

public class MultipleChoiceListViewSample extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.listview_sample);
    ListView listView = (ListView)findViewById(R.id.ListView);

    // アダプタの作成
    listView.setAdapter(new ArrayAdapter<String>(
        this,
        android.R.layout.simple_list_item_multiple_choice,
        DAYS)
    );

    // フォーカスが当たらないよう設定
    listView.setItemsCanFocus(false);

    // 選択の方式の設定
    listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    
    for (int i = 1; i < 6; i++) {
      // 指定したアイテムがチェックされているかを設定
      listView.setItemChecked(i, true);
    }
    
    // アイテムがクリックされたときに呼び出されるコールバックを登録
    listView.setOnItemClickListener(new OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent,
              View view, int position, long id) {
          // クリックされた時の処理
      }
    });
    
    // 現在チェックされているアイテムを取得
    // チェックされてないアイテムは含まれない模様
    SparseBooleanArray checked = listView.getCheckedItemPositions();
    for (int i = 0; i < checked.size(); i++) {
      // チェックされているアイテムの key の取得
      int key = checked.keyAt(i);
      Log.v(getClass().getSimpleName(), "values: " + DAYS[key]);
    }
  }
  
  // ListView に表示させる文字列
  private static final String[] DAYS = new String[] {
    "Sunday", "Monday", "Tuesday", "Wednesday",
    "Thursday", "Friday", "Saturday"
  };
}

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="ListSample" />
  <ListView 
    android:layout_width="fill_parent"
    android:layout_height="0dip" 
    android:layout_weight="1"
    android:id="@+id/ListView">
  </ListView>
</LinearLayout>

実行すると...

こんな感じ!


参考サイト
http://developer.android.com/intl/ja/reference/android/widget/ListView.html

ListView で SingleChoice モード

ListView で一つしか選択できないような List を作ることができます．

基本的には ListView と同じ.
Adapter の作成時に Single Choice ようのレイアウトを設定するのと
setChoiceMode で ListView.CHOICE_MODE_SINGLEを設定するくらい
すると RadioButton 付きのリストが表示されます.

というわけで，SingleChoiceList をいじってみた

サンプルコード

public class SingleChoiceListViewSample extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.listview_sample);
    ListView listView = (ListView)findViewById(R.id.ListView);

    // アダプタの作成
    listView.setAdapter(new ArrayAdapter<String>(
        this,
        android.R.layout.simple_list_item_single_choice,
        SIZES)
    );  
        
    // 選択の方式の設定
    listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
  
    // 指定したアイテムがチェックされているかを設定
    listView.setItemChecked(0, true);
    
    // アイテムがクリックされた時に呼び出されるコールバックを登録
    listView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent,
                View view, int position, long id) {
            // クリックされた時の処理
        }
    });
  
    // 現在チェックされているアイテムの position を取得
    listView.getCheckedItemPosition();
  }
  
  // ListView に表示させる文字列
  private static final String[] SIZES = new String[] {
      "XS(eXtra Small)", "S(Small)", "M(Medium)",
　　　"L(Large)", "XL(eXtra Large)"
  };
}

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="ListSample" />
  <ListView 
    android:layout_width="fill_parent"
    android:layout_height="0dip" 
    android:layout_weight="1"
    android:id="@+id/ListView">
  </ListView>
</LinearLayout>

実行すると...

こんな感じ!


参考サイト
http://developer.android.com/intl/ja/reference/android/widget/ListView.html