Android之實現QQ好友分組(ExpandableListView)

在項目開發中，也許我們遇到過ListView中嵌套ListView，但谷歌建議我們最好別這樣做，因此他們寫好了一個ExpandableListView類，他繼承ListView，可以實現ListView中嵌套ListView的效果，好了，廢話不多說，先上效果圖：

點擊下載源碼：仿QQ好友分組源代碼

 

主代碼：

public class ExListView extends Activity {
    private static final String GROUP_TEXT = "group_text";//大組成員Map的key
    private static final String CHILD_TEXT1 = "child_text1";//小組成員Map的第一個key
    private static final String CHILD_TEXT2 = "child_text2";//小組成員Map的第二個key

    List<Map<String, String>> groupData = new ArrayList<Map<String, String>>();//大組成員
    List<List<Map<String, String>>> childData = new ArrayList<List<Map<String, String>>>();//小組成員

    ExAdapter adapter;
    ExpandableListView exList;//可擴展的ListView

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //爲大小組中添加數據
        for (int i = 1; i < 6; i++) {
            Map<String, String> curGroupMap = new HashMap<String, String>();
            groupData.add(curGroupMap);
            curGroupMap.put(GROUP_TEXT, "第" + i + "大組");

            List<Map<String, String>> children = new ArrayList<Map<String, String>>();
            for (int j = 1; j < 6; j++) {
                Map<String, String> curChildMap = new HashMap<String, String>();
                children.add(curChildMap);
                curChildMap.put(CHILD_TEXT1, "第" + j + "小組");
                curChildMap.put(CHILD_TEXT2, "第" + j + "小組簽名");
            }
            childData.add(children);
        }

        adapter = new ExAdapter(ExListView.this);
        exList = (ExpandableListView) findViewById(R.id.list);
        exList.setAdapter(adapter);
        exList.setGroupIndicator(null);//不設置大組指示器圖標，因爲我們自定義設置了
        exList.setDivider(null);//設置圖片可拉伸的
    }
    //關鍵代碼是這個可擴展的listView適配器
    class ExAdapter extends BaseExpandableListAdapter {
        Context context;

        public ExAdapter(Context context) {
            super();
            this.context = context;
        }
        //得到大組成員的view
        public View getGroupView(int groupPosition, boolean isExpanded,
                View convertView, ViewGroup parent) {
            View view = convertView;
            if (view == null) {
                LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                view = inflater.inflate(R.layout.member_listview, null);
            }

            TextView title = (TextView) view.findViewById(R.id.content_001);
            title.setText(getGroup(groupPosition).toString());//設置大組成員名稱

            ImageView image = (ImageView) view.findViewById(R.id.tubiao);//是否展開大組的箭頭圖標
            if (isExpanded)//大組展開時
                image.setBackgroundResource(R.drawable.btn_browser2);
            else//大組合並時
                image.setBackgroundResource(R.drawable.btn_browser);

            return view;
        }
        //得到大組成員的id
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }
        //得到大組成員名稱
        public Object getGroup(int groupPosition) {
            return groupData.get(groupPosition).get(GROUP_TEXT).toString();
        }
        //得到大組成員總數
        public int getGroupCount() {
            return groupData.size();

        }

        // 得到小組成員的view
        public View getChildView(int groupPosition, int childPosition,
                boolean isLastChild, View convertView, ViewGroup parent) {
            View view = convertView;
            if (view == null) {
                LayoutInflater inflater = LayoutInflater.from(context);
                view = inflater.inflate(R.layout.member_childitem, null);
            }
            final TextView title = (TextView) view
                    .findViewById(R.id.child_text);
            title.setText(childData.get(groupPosition).get(childPosition)
                    .get(CHILD_TEXT1).toString());//大標題
            final TextView title2 = (TextView) view
                    .findViewById(R.id.child_text2);
            title2.setText(childData.get(groupPosition).get(childPosition)
                    .get(CHILD_TEXT2).toString());//小標題

            return view;
        }
        //得到小組成員id
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
        //得到小組成員的名稱
        public Object getChild(int groupPosition, int childPosition) {
            return childData.get(groupPosition).get(childPosition).get(CHILD_TEXT1)
                    .toString();
        }
        //得到小組成員的數量
        public int getChildrenCount(int groupPosition) {
            return childData.get(groupPosition).size();
        }
        /**
         * Indicates whether the child and group IDs are stable across changes to the
         * underlying data.
         * 表明大組和小組id是否穩定的更改底層數據。
         * @return whether or not the same ID always refers to the same object
         * @see Adapter#hasStableIds()
         */
        public boolean hasStableIds() {
            return true;
        }
        //得到小組成員是否被選擇
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return true;
        }

    }
}

主界面配置文件main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/default_bg" >

    <ExpandableListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true" android:cacheColorHint="#00000000" /><!-- 背景設置爲透明，防止滑動時，白屏 -->

</RelativeLayout>

大組成員配置文件member_listview.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" >

    <LinearLayout
        android:id="@+id/layout_013"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:paddingTop="10dp"
            android:src="@drawable/user_group" >
        </ImageView>

        <RelativeLayout
            android:id="@+id/layout_013"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/content_001"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:textColor="#FFFFFF"
                android:textSize="30sp" >
            </TextView>

            <ImageView
                android:id="@+id/tubiao"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" >
            </ImageView>
        </RelativeLayout>
    </LinearLayout>

    <!--
   <RelativeLayout android:id="@+id/layout_013"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
       <ImageView android:id="@+id/ImageView01"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:src="@drawable/icon"></ImageView>
       <TextView android:id="@+id/content_001"
                 android:text="@+id/TextView01"
                 android:layout_width="wrap_content"
                 android:layout_toRightOf="@+id/ImageView01"
                 android:layout_height="wrap_content"></TextView>
      <ImageView android:layout_width="wrap_content"
                 android:layout_toRightOf="@+id/content_001"
                 android:layout_height="wrap_content"
                 android:id="@+id/tubiao"></ImageView>
   </RelativeLayout>


    -->

</LinearLayout>

小組成員配置文件member_childitem.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/childlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/child_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:background="@drawable/child_image"
        android:paddingTop="10dp" >
    </ImageView>

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

        <TextView
            android:id="@+id/child_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:text=""
            android:textColor="#FFFFFF"
            android:textSize="25sp" >
        </TextView>

        <TextView
            android:id="@+id/child_text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:text=""
            android:textColor="#FFFFFF"
            android:textSize="20sp" >
        </TextView>
    </LinearLayout>

</LinearLayout>