Android 奔走記: 8月 2010

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 をいじってみた.

サンプルコード

view plain print ?

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;
}
});
}
}

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リソース

view plain print ?

<?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>

<?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 で複数選択できるような List を作ることができます．

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

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

サンプルコード

view plain print ?

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"
};
}

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リソース

view plain print ?

<?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>

<?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 をいじってみた

サンプルコード

view plain print ?

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)"
};
}

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リソース

view plain print ?

<?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>

<?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

Android 奔走記

ExpandableListView を使ってみた

ListView で MultipleChoice モード

ListView で SingleChoice モード

ページ

ブログアーカイブ

フォロワー

Blogger Syntax Highliter

Android 奔走記

ExpandableListView を使ってみた

ListView で MultipleChoice モード

ListView で SingleChoice モード

ページ

ブログ アーカイブ

フォロワー

Blogger Syntax Highliter

ブログアーカイブ