新人成長記録22th

今回は、ExpandableListViewというViewを紹介していきます

device-2017-04-10-155441

ExpandableListViewとは

ExpandablelistViewは簡単にいうと、リスト表示されている大カテゴリ毎の中に、さらに小カテゴリがそれぞれにリストとして存在するものです

小カテゴリが非表示の時には、大カテゴリ名のみが表示されていて、大カテゴリ名をタップすることで小カテゴリがリストで表示されます

実装

レイアウトファイルは、単純にリストのみを表示する場合には、非常に簡単となります
ListViewと同様に設定します
以下がレイアウトの内容となります

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

 

プログラムの方は、大カテゴリと各大カテゴリに対応した小カテゴリを作成する実装となります
最初に大カテゴリの値を決定します

	private List<Map<String, String>> parentList = new ArrayList<>();
	for(int i=0;i<size;i++){
		Map<String, String> parentMap = new HashMap<>();
		//表示名
		parentMap.put("title", "項目" + i);

		parentList.add(parentMap);
	}

parentMapには、表示される文字列をtitleとしてセットします
そしてparentListに追加していきます
追加順に表示されるので注意が必要です

次に小カテゴリの値を決定します
小カテゴリは、大カテゴリのサイズ×各大カテゴリ内の小カテゴリ分のループが必要です
今回は、例なので固定サイズでセットしていますが、多くはサイズがバラバラだと思いますので、ループを回さずに1つ1つ追加していくことになるでしょう

	private List<List<Map<String, String>>> childrenList = new ArrayList<>();
	int parentSize = parentList.size();

	for(int i=0;i<parentSize;i++){
		List<Map<String, String>> childList = new ArrayList<>();
		for(int j=0;j<size;j++){
			Map<String, String> childrenMap = new HashMap<>();
			//表示名、詳細
			childrenMap.put("title", "子項目"+(i+j));
			childrenMap.put("summary", "詳細" + (i+j));

			childList.add(childrenMap);
		}

		childrenList.add(childList);
	}

内側のループで、小カテゴリの内容を決定して、小カテゴリを生成するchildListに追加します
ここでは、大カテゴリ1つにあたる小カテゴリを追加していくことになります
外側のループでは、内側で作成したchildListをchildrenListに追加していきます
ここでは、大カテゴリの順番と同じになるようにセットしていきます
例えば、大カテゴリに一番最初に追加したものをタップしたら、小カテゴリで一番最初に追加したリストが表示することになります

また、タップイベントはsetOnChildClickListenerを使うことで、大カテゴリでの位置と小カテゴリの位置を取得することができますので、特定は可能です

プログラムの全体は以下のようになります

public class ExpandActivity extends AppCompatActivity {

	//大カテゴリのリスト
	private List<Map> parentList = new ArrayList();
	//小カテゴリのリスト
	private List<List<Map>> childrenList = new ArrayList();

	@Override
	protected void onCreate(@Nullable Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.expandablelayout);

		setExList(4, 3);

		//アダプタの設定
		SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
				this, parentList, 
				android.R.layout.simple_expandable_list_item_1,
				new String[]{"title"}, 
				new int[]{android.R.id.text1},
				childrenList, 
				android.R.layout.simple_expandable_list_item_2,
				new String[]{"title", "summary"}, 
				new int[]{android.R.id.text1, android.R.id.text2});

		ExpandableListView listView =
				(ExpandableListView) findViewById(R.id.expandable_list);
		listView.setAdapter(adapter);
		//タップイベント
		listView.setOnChildClickListener(
				new ExpandableListView.OnChildClickListener() {
			@Override
			public boolean onChildClick(ExpandableListView parent, View v,
							int groupPosition, 
							int childPosition, long id) {
				Log.d("debug", groupPosition +"," + childPosition + ", " + id);
				return false;
			}
		});
	}

	/**
	 * ExpandableListのデータ作成
	 * @param parent 大カテゴリのサイズ
	 * @param child 小カテゴリのサイズ
	 */
	private void setExList(int parent, int child){
		//親の設定
		setParentList(parent);
		//子の設定
		setChildrenList(child);
	}

	private void setParentList(int size){
		for(int i=0;i<size;i++){
			Map parentMap = new HashMap();
			//表示名
			parentMap.put("title", "大項目" + i);
			parentList.add(parentMap);
		}
	}

	private void setChildrenList(int size){
		int parentSize = parentList.size();

		for(int i=0;i<parentSize;i++){
			List<Map> childList = new ArrayList();
			for(int j=0;j<size;j++){
				Map childrenMap = new HashMap();
				//表示名、詳細
				childrenMap.put("title", "小項目 "+ i +"_" + j);
				childrenMap.put("summary", "詳細 " + i +"_" + j);
				childList.add(childrenMap);
			}
			childrenList.add(childList);
		}
	}
}

終わりに

リストと言えば、単純なListViewを使うことが多いかと思いますが、こちらも使っていくことによってUIの印象も変わるのではないかと思います
必要性に応じて使い分けれるようになりたいです

火曜日担当:poppy



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム