Android中 ExpandableList的使用2

Android中ExpandableList的使用2

本文介绍Android中ExpandableList的使用，在前文的基础上作了很多改进，增加了增加、删除、回调等功能。

图中的 “第一行班组号： 1  软件工程2班”是要显示的信息。

先看效果图：

首先定义一个含有ExpandableListView的Layout。还有一个是显示的文本信息。

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <ExpandableListView
        android:id="@+id/expandableListView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="52dp" >
    </ExpandableListView>
</RelativeLayout>

2、为ExpandableListView准备数据源。

  ClassGroups列表，定义了所有的班级。

  ClassDetails定义班级的详细信息。包括班级编号，班级名称，班级人数，以及老师。

private List<String> ClassGroups = new ArrayList<String>();

	private List<List<String>> ClassDetails = new ArrayList<List<String>>();
	private String[][] ClassDetailsSource = {
			{ "20100801", "软件工程1班", "50", "王老师" },
			{ "20100802", "软件工程2班", "47", "理老师" },
			{ "20100803", "网络工程1班", "52" }, { "20100804", "计算机科学与技术" }

	};

 通过addItem方法，初始化四个班级。

	private void parepareDataSource() {
		for (int i = 0; i < 4; i++) {
			addItem("班组号："+i, ClassDetailsSource[i]);
		}
	}

将所有的班级添加的ClassDetails中。

private void addItem(String string, String[] data) {
		// TODO Auto-generated method stub
		ClassGroups.add(string);
		List<String> item = new ArrayList<String>();
		for (int i = 0; i < data.length; i++) {
			item.add(data[i]);
		}
		ClassDetails.add(item);
	}

 3、使用BaseExpandableListAdapter绑定数据源。这个在我的上一篇文章中以及介绍过了，这里不在介绍。

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);
		
		parepareDataSource();
	
		tView = (TextView) findViewById(R.id.textView1);
		expandableListView = (ExpandableListView) findViewById(R.id.expandableListView1);

		expandableListView.setAdapter(new ExpandableListAdapter());
		
		//ExpandableListView的回调函数 用于监听那个id 被expand
		expandableListView.setOnGroupClickListener(new OnGroupClickListener() {
			
			@Override
			public boolean onGroupClick(ExpandableListView parent, View v,
					int groupPosition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(ExpandableList3.this, "You Click " + groupPosition + " Group", Toast.LENGTH_LONG).show();
				return false;
			}
		});
	
		expandableListView.setOnChildClickListener(new OnChildClickListener() {
			
			@Override
			public boolean onChildClick(ExpandableListView parent, View v,
					int groupPosition, int childPosition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(ExpandableList3.this, "You Click " + childPosition + " child in group" + groupPosition, Toast.LENGTH_LONG).show();
				return false;
			}
		});
		

	}

注：expandableListView.setOnGroupClickListener(new OnGroupClickListener())和expandableListView.setOnChildClickListener(new OnChildClickListener())是回调方法，等会再讲。

下面是ExpandableListAdapter的数据源形式为：

public class ExpandableListAdapter extends BaseExpandableListAdapter {		
		@Override
		public boolean isChildSelectable(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			String string = ClassGroups.get(groupPosition)
					+ ClassDetails.get(groupPosition).get(childPosition); 
			tView.setText(string);
			return true;
		}

		@Override
		public boolean hasStableIds() {
			// TODO Auto-generated method stub
			return true;
		}

		@Override
		public View getGroupView(int groupPosition, boolean isExpanded,
				View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			LinearLayout layout = new LinearLayout(ExpandableList3.this);
			layout.setOrientation(0);
			layout.setPadding(50, 0, 0, 0);
			ImageView imageView = new ImageView(ExpandableList3.this);
			imageView.setImageResource(R.drawable.ic_launcher);
			layout.addView(imageView);

			TextView textView = getTextView();
			textView.setText(getGroup(groupPosition).toString());
			layout.addView(textView);
			return layout;
		}

		private TextView getTextView() {
			// TODO Auto-generated method stub
			AbsListView.LayoutParams lParams = new AbsListView.LayoutParams(
					ViewGroup.LayoutParams.FILL_PARENT, 64);
			TextView textView = new TextView(ExpandableList3.this);
			textView.setLayoutParams(lParams);
			textView.setPadding(20, 0, 0, 0);
			textView.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
			return textView;
		}

		@Override
		public long getGroupId(int groupPosition) {
			// TODO Auto-generated method stub
			return groupPosition;
		}

		@Override
		public int getGroupCount() {
			// TODO Auto-generated method stub
			return ClassGroups.size();
		}

		@Override
		public Object getGroup(int groupPosition) {
			// TODO Auto-generated method stub
			return ClassGroups.get(groupPosition);
		}

		@Override
		public int getChildrenCount(int groupPosition) {
			// TODO Auto-generated method stub
			return ClassDetails.get(groupPosition).size(); 
		}

		@Override
		public View getChildView(int groupPosition, int childPosition,
				boolean isLastChild, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			TextView textView = getTextView();
			textView.setText(getChild(groupPosition, childPosition).toString());
			return textView;
		}

		@Override
		public long getChildId(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return childPosition;
		}

		@Override
		public Object getChild(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return ClassDetails.get(groupPosition).get(childPosition); 		}

		

	};

二、创建两个Menu，分别调用各自的方法，一个是创建班级dialog, 一个是创建删除Dialog. 分别对应增加班级信息和删除班级信息

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		menu.add(Menu.NONE, Menu.FIRST + 1, 1, "Add").setIcon(
				R.drawable.ic_launcher);
		menu.add(Menu.NONE, Menu.FIRST + 2, 2, "Delete").setIcon(
				R.drawable.ic_launcher);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case Menu.FIRST + 1:
			createAddDialog();
			break;
		case Menu.FIRST + 2:
			createDeleteDialog();
			break;
		}
		return false;

	}

 1、增加的Layout add_item.xml如下：分别放了四个文本，和文本框，一个确定，一个取消按钮。

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

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="班级号" />

        <EditText
            android:id="@+id/add_item1"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="班级名" />

        <EditText
            android:id="@+id/add_item2"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="班级人数" />

        <EditText
            android:id="@+id/add_item3"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    </LinearLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="老师" />

        <EditText
            android:id="@+id/add_item4"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    </LinearLayout>

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

        <Button
            android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="ok" />

        <Button
            android:id="@+id/cancle"
            android:layout_width="200dip"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="cancle" />
    </LinearLayout>

</LinearLayout>

 2、增加的代码如下：通过addItem(class_no.getText().toString(), data);方法，将添加班级信息。取消按钮时关闭当前Dialog.

	private EditText class_no;
	private EditText class_name;
	private EditText stu_num;
	private EditText teacher;
	private Dialog addDialog;

	public void createAddDialog() {
		View addView = getLayoutInflater().inflate(R.layout.add_item, null);
		addDialog = new Dialog(this);
		addDialog.setContentView(addView);
		addDialog.setTitle("Add class dialog");

		class_no = (EditText) addView.findViewById(R.id.add_item1);
		class_name = (EditText) addView.findViewById(R.id.add_item2);
		stu_num = (EditText) addView.findViewById(R.id.add_item3);
		teacher = (EditText) addView.findViewById(R.id.add_item4);

		Button ok = (Button) addView.findViewById(R.id.ok);
		Button cancle = (Button) addView.findViewById(R.id.cancle);
		ok.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				String[] data = { class_no.getText().toString(),
						class_name.getText().toString(), stu_num.getText().toString(),
						teacher.getText().toString() };
				addItem(class_no.getText().toString(), data);
				addDialog.dismiss();

			}

		});
		cancle.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				addDialog.dismiss();
			}
		});
		addDialog.show();
	}

3、增加的效果图如下：

4、同理删除的Layout为delete_item.xml

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

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="删除的班组编号:" />

        <EditText
            android:id="@+id/delete_id"
            android:layout_width="200dip"
            android:layout_height="wrap_content" />
    </LinearLayout>

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

        <Button
            android:id="@+id/delete"
            android:layout_width="90dip"
            android:layout_height="wrap_content"
            android:text="Delete" />

        <Button
            android:id="@+id/cancle_delete"
            android:layout_width="90dip"
            android:layout_height="wrap_content"
            android:text="Canlce" />
    </LinearLayout>

</LinearLayout>

5、 删除的代码为：输入编号： 如2， 则将班组号为2的班级所有信息删除。调用了ClassGroups.remove(i);ClassDetails.remove(i);方法。

	Dialog deleteDialog;
	EditText delete_group_id;

	public void createDeleteDialog() {
		View deleteView = getLayoutInflater().inflate(R.layout.delete_item,
				null);
		deleteDialog = new Dialog(this);
		deleteDialog.setContentView(deleteView);
		deleteDialog.setTitle("Delete class dialog");

		delete_group_id = (EditText) deleteView.findViewById(R.id.delete_id);

		Button ok = (Button) deleteView.findViewById(R.id.delete);
		Button cancle = (Button) deleteView.findViewById(R.id.cancle_delete);
		ok.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				String deleteId = delete_group_id.getText().toString();
				if (!deleteId.equals("")) {
					int i = Integer.parseInt(deleteId);
					ClassGroups.remove(i);
					ClassDetails.remove(i);
				}
				deleteDialog.dismiss();

			}

		});
		cancle.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				deleteDialog.dismiss();
			}
		});
		deleteDialog.show();
	}

6、删除的效果图如下：

 

三、回调函数的使用。

当单击组时，显示组的信息。单击子项的信息，显示组合子项的信息。如第一张图右下角显示的信息。

                   //ExpandableListView的回调函数 用于监听那个id 被expand
		expandableListView.setOnGroupClickListener(new OnGroupClickListener() {
			
			@Override
			public boolean onGroupClick(ExpandableListView parent, View v,
					int groupPosition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(ExpandableList3.this, "You Click " + groupPosition + " Group", Toast.LENGTH_LONG).show();
				return false;
			}
		});
	
		expandableListView.setOnChildClickListener(new OnChildClickListener() {
			
			@Override
			public boolean onChildClick(ExpandableListView parent, View v,
					int groupPosition, int childPosition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(ExpandableList3.this, "You Click " + childPosition + " child in group" + groupPosition, Toast.LENGTH_LONG).show();
				return false;
			}
		});

 ExpandableList的使用就介绍到这里。本文也是对自己学习情况的记录，方便以后再次学习。