【教學】Android 擴展列表 - ExpandableList

  各位開發者在使用 ListView 時,有沒有想過在中間加些不一樣的特色呢?今天要來教如何在列表中加入擴展的功能,可以利用這個功能來進行分類。除此之外,還可以使用這項功能來縮放自己的列表。

  在 Coding 之前,會需要各位幫忙先設置三個 XML,分別是 ExpandableList 放置的 XML、分類列表的參考模組與子項目的參考模組。在這邊分別命名為 activity_main.xml、group_item.xml 與 child_item.xml。
Path:res/layout/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" >

   <ExpandableListView
      android:id="@+id/elst"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

</LinearLayout>

Path:res/layout/group_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="#aaaaaa" >

<TextView
   android:id="@+id/txt_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_alignParentTop="true"
   android:layout_marginBottom="5dp"
   android:layout_marginLeft="10dp"
   android:layout_marginTop="5dp"
   android:text="Group"
   android:textColor="#000000"
   android:textSize="12dp" />

</RelativeLayout>

Path:res/layout/child_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" >

   <TextView
      android:id="@+id/txt_demo"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="10dp"
      android:layout_marginRight="10dp"
      android:layout_marginTop="10dp"
      android:text=""
      android:textColor="#000000"
      android:textSize="20dp" />

   <TextView
      android:id="@+id/txt_child"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBottom="@+id/txt_demo"
      android:layout_alignParentLeft="true"
      android:layout_alignTop="@+id/txt_demo"
      android:layout_marginLeft="10dp"
      android:layout_marginRight="10dp"
      android:layout_toLeftOf="@+id/txt_demo"
      android:text=""
      android:textColor="#000000"
      android:textSize="20dp" />

</RelativeLayout>

  三個 XML 都設置完畢之後,接下來就要到程式碼的部分囉!那麼我廢話不多說,直接來看程式碼吧!
File Name:MainActivity
public class MainActivity extends Activity {

  private List<Map<String, Object>> groupData;
  private List<List<Map<String, Object>>> childData;
  private ExpandableListView elst;

  private String[] arr_child01 = new String[]{"Milk", "Apple", "Banana", "Orange"}
  , arr_child02 = new String[]{"Tom","Jack","Ray","Mark","Jason","Coco"}
  , arr_child03_1 = new String[]{"Child01","Child02","Child03","Child04","Child05","Child06","Child07","Child08"}
  , arr_child03_2 = new String[]{"Demo01","Demo02","Demo03","Demo04","Demo05","Demo06","Demo07","Demo08"}
  , arr_group = new String[]{ "Food", "People", "Demo Group" };

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

   elst = (ExpandableListView) findViewById(R.id.elst);
   prepareData();
   SimpleExpandableListAdapter adapter =
     new SimpleExpandableListAdapter(this,
       groupData, R.layout.group_item,
       new String[]{"Group"}, new int[]{R.id.txt_group},
       childData, R.layout.child_item,
       new String[]{"Child","Demo"}, new int[]{R.id.txt_child, R.id.txt_demo});

        // change group indicator style
        elst.setGroupIndicator(null);
// elst.setGroupIndicator(getResources().getDrawable( R.drawable.ic_launcher));

  elst.setAdapter(adapter);
  for(int i=0;i<arr_group.length;i++){
   // open up all group
    elst.expandGroup(i);
  }
 }

  private void prepareData() {
   groupData = new ArrayList<Map<String, Object>>();
   childData = new ArrayList<List<Map<String, Object>>>();

  for (int i = 0; i < arr_group.length; i++) {
   Map<String, Object> groupObj = new HashMap<String, Object>();
   groupObj.put("Group", arr_group[i]);
   groupData.add(groupObj);

   List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
  switch (i) {
   case 0:
    for (int j = 0; j < arr_child01.length; j++) {
     Map<String, Object> obj = new HashMap<String, Object>();
     obj.put("Child", arr_child01[j]);
     obj.put("Demo", "");
     list.add(obj);
    }
    childData.add(list);
    break;
   case 1:
    for (int j = 0; j < arr_child02.length; j++) {
     Map<String, Object> obj = new HashMap<String, Object>();
     obj.put("Child", arr_child02[j]);
     obj.put("Demo", "");
     list.add(obj);
    }
    childData.add(list);
    break;
   case 2:
    for (int j = 0; j < arr_child03_1.length; j++) {
     Map<String, Object> obj = new HashMap<String, Object>();
     obj.put("Child", arr_child03_1[j]);
     obj.put("Demo", arr_child03_2[j]);
     list.add(obj);
    }
    childData.add(list);
    break;
   }
  }
 }
}

  做到這邊,基本上就已經寫完囉!我們來看看最後製作的成果吧!

沒有留言:

張貼留言