Android UI編程(2)——多級列表(ExpandableListView)

標籤：多級列表   expandablelistview   baseexpandablelistad   

參考部落格：

http://blog.csdn.net/xyz_lmn/article/details/6906268

http://www.apkbus.com/android-124715-1-1.html

有時候，使用ListView並不能滿足應用程式所需要的功能。有些應用程式需要多組ListViw，這時候我們就要使用一種新的控制項ExpandableListView——可以擴充的ListView。它的作用就是將ListView進行分組。就好像我們使用QQ的時候，有"我的好友"，"陌生人"，"黑名單"一樣，點擊一下會擴充開，再點擊一下又會收縮回去。ExpandableListView是一個垂直滾動顯示兩級清單項目的視圖，與ListView不同的是，它可以有兩層：每一層都能夠被獨立的展開並顯示其子項。這些子項來自於與該視圖關聯的ExpandableListAdapter。

每一個可以擴充的清單項目的旁邊都有一個指示箭頭用來說明清單項目前的狀態(這些狀態一般是已經展開的清單項目，還沒有展開的清單項目，子列表和最後一個子清單項目)。可以使用方法：setChildIndicator(Drawable)，setGroupIndicator(Drawable)(或者相應的xml檔案屬性)去設定這些指示符的樣式，當然也可以使用預設的指示符。

和ListView一樣，ExpandableListView也是一個需要Adapter作為橋樑來取得資料的控制項。一般適用於ExpandableListView的Adapter都要繼承BaseExpandableListAdapter這個類，並且必須重載getGroupView和getChildView這兩個最為重要的方法。

總結：

1、ExpandableListView可擴充列表需要配合BaseExpanableListAdapter的子類來實現，並且實現getGroupView和getChildView兩個方法

2、一級列表與二級列舉資料集合問題

所以一級列表採用一級集合儲存資料，二級列表採用二級集合儲存資料，用代碼實現如下：

<pre name="code" class="java">ArrayList<String> arrayList_groupData;ArrayList<ArrayList<String>> arrayList_memberData;arrayList_groupData = new ArrayList<String>();arrayList_memberData = new ArrayList<ArrayList<String>>();for (int i = 0; i < 5; i++){     arrayList_groupData.add("Group "+i);     ArrayList<String> arrayList_memberDataItem = new ArrayList<String>();     for (int j = 0; j < 6; j++)     {        arrayList_memberDataItem.add("member "+j);     }     arrayList_memberData.add(arrayList_memberDataItem);}

3、在調用expandableListView.setAdapter(exAdapter)的時候，只會調用getGroupView方法(其中expandableListView是ExpandableListView的執行個體化對象，而exAdapter是繼承於BaseExpandableListAdap的類執行個體對象)。而當一級列表子項被展開，首先會多次調用getGroupView方法，當是被展開的一級列表子項，則調用getChildView方法依次陳列二級列表子項。

4、設定二級列表左側離一級列表的距離

只需要設定二級列表所對應布局中的第一個控制項的android:layout_marginLeft屬性，即設定該控制項左邊離父布局的距離。

5、設定一級列表的高度

將一級列表對應的布局檔案所有控制項放在一個LinearLayout線性布局中，然後通過設定此LinearLayout線性布局的android:layout_height屬性，設定為多少個dip。在此之前我沒有把此布局檔案放到一個新的LinearLayout線性布局中，因為本身父布局就是LinearLayout線性布局，同樣去設定android:layout_height屬性值，卻不能改變一級列表的高度，只有將所有空間重新放到新的LinearLayout線性布局中並設定android:layout_height屬性值才可以，這裡有點不明白？

AndroidManifest.xml——沒有做任何修改，預設

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.wxl.expandablelistview"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="19" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.wxl.expandablelistview.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

string.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name"> 多級列表</string>    <string name="action_settings">Settings</string>    <string name="hello_world">Hello world!</string></resources>

grouplayout.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="horizontal">        <LinearLayout         android:id="@+id/linearlayout"        android:layout_width="match_parent"    android:layout_height="40dip">        <ImageView         android:id="@+id/grouplayout_imageView_group"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/user_group"/>    <RelativeLayout         android:id="@+id/grouplayout_relativeLayout"        android:layout_width="match_parent"        android:layout_height="match_parent">        <TextView         android:id="@+id/grouplayout_textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Group"        android:textSize="15sp"        android:layout_marginTop="5dp" />    <ImageView         android:id="@+id/grouplayout_imageView_tubiao"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/btn_browser"        android:layout_alignParentRight="true"/>    </RelativeLayout>    </LinearLayout>    </LinearLayout>

memberlayout.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="horizontal"     android:gravity="center_vertical">        <ImageView         android:id="@+id/memberlayout_imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/child_image"        android:layout_marginLeft="15dp"/>    <TextView         android:id="@+id/memberlayout_textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="member"        android:textSize="20sp"/></LinearLayout>

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"    tools:context=".MainActivity" >    <ExpandableListView         android:id="@+id/expandableListView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:background="@drawable/default_bg"></ExpandableListView></LinearLayout>

MainActivity.java

package com.wxl.expandablelistview;import java.util.ArrayList;import android.os.Bundle;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseExpandableListAdapter;import android.widget.ExpandableListView;import android.widget.ExpandableListView.OnChildClickListener;import android.widget.ImageView;import android.widget.TextView;import android.app.Activity;import android.content.Context;public class MainActivity extends Activity {ExpandableListView expandableListView;ArrayList<String> arrayList_groupData;ArrayList<ArrayList<String>> arrayList_memberData;ExAdapter exAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        expandableListView = (ExpandableListView)this.findViewById(R.id.expandableListView);        arrayList_groupData = new ArrayList<String>();        arrayList_memberData = new ArrayList<ArrayList<String>>();        for (int i = 0; i < 5; i++)        {        arrayList_groupData.add("Group "+i);        ArrayList<String> arrayList_memberDataItem = new ArrayList<String>();        for (int j = 0; j < 6; j++)        {        arrayList_memberDataItem.add("member "+j);        }        arrayList_memberData.add(arrayList_memberDataItem);        }                exAdapter = new ExAdapter(this);        expandableListView.setAdapter(exAdapter);        //expandableListView.expandGroup(0);//設定第一組張開        //expandableListView.collapseGroup(0); 將第group組收合        expandableListView.setGroupIndicator(null);//除去內建的箭頭，內建的箭頭在父列表的最左邊，不展開向下，展開向上        expandableListView.setDivider(null);//這個是設定每個Group之間的分割線。,預設有分割線，設定null沒有分割線                expandableListView.setOnChildClickListener(new OnChildClickListener() {@Overridepublic boolean onChildClick(ExpandableListView parent, View view, int groupPosition,int childPosition, long id) {// TODO Auto-generated method stubexAdapter.setChildSelection(groupPosition,childPosition);exAdapter.notifyDataSetChanged();return true;}});    }        public class ExAdapter extends BaseExpandableListAdapter    {    Context context;    int selectParentItem = -1;    int selectChildItem = -1;    public ExAdapter(Context context) {// TODO Auto-generated constructor stub    this.context = context;}        public void setChildSelection(int groupPosition, int childPosition)    {    selectParentItem = groupPosition;    selectChildItem = childPosition;    }    @Overridepublic Object getChild(int groupPosition, int childPosition) {// TODO Auto-generated method stubreturn arrayList_memberData.get(groupPosition).get(childPosition);}@Overridepublic long getChildId(int groupPosition, int childPosition) {// TODO Auto-generated method stubreturn childPosition;}@Overridepublic View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,ViewGroup parent) {// TODO Auto-generated method stubView view = convertView;Log.i("++++++++++", "groupPosition="+groupPosition+","+"childPosition"+childPosition);if (null == view){//擷取LayoutInflaterLayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);//擷取對應的布局view = layoutInflater.inflate(R.layout.memberlayout, null);}TextView textView = (TextView)view.findViewById(R.id.memberlayout_textView);textView.setText(arrayList_memberData.get(groupPosition).get(childPosition));if (selectChildItem == childPosition && selectParentItem == groupPosition){Log.i("++++++++++", "點擊："+groupPosition+","+childPosition);}return view;}@Overridepublic int getChildrenCount(int groupPosition) {// TODO Auto-generated method stubreturn arrayList_memberData.get(groupPosition).size();}@Overridepublic Object getGroup(int groupPosition) {// TODO Auto-generated method stubreturn arrayList_groupData.get(groupPosition);}@Overridepublic int getGroupCount() {// TODO Auto-generated method stubreturn arrayList_groupData.size();}@Overridepublic long getGroupId(int groupPosition) {// TODO Auto-generated method stubreturn groupPosition;}@Overridepublic View getGroupView(int groupPosition, boolean isExpanded, View convertView,ViewGroup parent) {// TODO Auto-generated method stubView view = convertView;Log.i("++++++++++", "groupPosition="+groupPosition);if (null == view){LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);view = layoutInflater.inflate(R.layout.grouplayout, null);}TextView textView = (TextView)view.findViewById(R.id.grouplayout_textView);textView.setText(arrayList_groupData.get(groupPosition));ImageView image=(ImageView) view.findViewById(R.id.grouplayout_imageView_tubiao);if(isExpanded){image.setBackgroundResource(R.drawable.btn_browser2);}else {image.setBackgroundResource(R.drawable.btn_browser);}return view;}@Overridepublic boolean hasStableIds() {// TODO Auto-generated method stubreturn true;}@Overridepublic boolean isChildSelectable(int groupPosition, int childPosition) {// TODO Auto-generated method stubreturn true;}        }    }

Android UI編程(2)——多級列表(ExpandableListView)