05.实例篇：仿QQ好友列表——ExpandableListView可扩展列表的使用（上篇）

1.前言

ListView类控件在APP中经常使用，本文主要介绍ExpandableListView，完成两级列表显示的效果。这一节（上篇、下篇）主要介绍如何仿照QQ，以及ListView和ExpandableListView的主要知识点，实现一个好友列表（静态的数据，下一节介绍如何网络上动态获取数据）；

2.实现效果如下：

 实现要点：在于如何布局ChildView，以及如何定制ExpandableListView的子view， 图片资源，可以破解QQ.apk文件获取，本文末尾也会附上图片资源的；

3.实现步骤1：新建主Activity布局文件，layout/activity_expandable_list_view.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"    tools:context="${packageName}.${activityClass}" >    <TextView        android:id="@+id/txt_list_title"        android:layout_width="match_parent"        android:layout_height="33dp"        android:background="@drawable/groupbar_last_bg_press"        android:gravity="center_vertical"        android:text="好友分组"        android:paddingLeft="8dip"        android:textSize="12sp" />    <ExpandableListView        android:id="@+id/explist_friends"        android:layout_width="match_parent"        android:layout_height="0dp"        android:groupIndicator="@drawable/expandable_group_bg"        android:layout_weight="1"        >    </ExpandableListView></LinearLayout>

4.实现步骤2：新建ExpandableListView的GroupItem，ChildItem布局文件

 GroupItem布局文件：layout/expandablelist_group_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="30dip"    android:layout_gravity="center"    android:gravity="center_vertical"    android:background="@drawable/groupbar_bg"    android:orientation="horizontal">    <TextView android:id="@+id/txt_group_title"        android:layout_width="0dip"        android:layout_height="wrap_content"        android:layout_weight="1"        android:paddingLeft="36dip"        android:text="我的分组"        android:gravity="left"/>   <TextView android:id="@+id/txt_group_num"        android:layout_width="0dip"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="0/1"        android:paddingRight="8dip"        android:gravity="right"/></LinearLayout>

ChildItem布局文件：layout/expandable_child_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="wrap_content"    android:padding="8dip"    android:orientation="horizontal">    <ImageView        android:id="@+id/image_my_logo"        android:layout_width="48dip"        android:layout_height="48dip"        android:src="@drawable/qb_group_logo" /><LinearLayout android:layout_width="0dip"       android:layout_height="match_parent"       android:layout_weight="1"       android:orientation="vertical"       android:paddingLeft="8dip"       android:gravity="center_vertical"><LinearLayout android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:orientation="horizontal"       android:gravity="center_vertical"       android:layout_gravity="center_vertical">"     <TextView        android:id="@+id/txt_my_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"       android:text="TextView" />       <ImageView        android:id="@+id/image_my_vip"        android:layout_width="36dip"        android:layout_height="18dip"        android:src="@drawable/qq_profilecard_vip_0" />   </LinearLayout>      <TextView        android:id="@+id/txt_my_words"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Small Text"        android:textSize="12sp"        android:textAppearance="?android:attr/textAppearanceSmall" /></LinearLayout>    <ImageView        android:id="@+id/image_my_device"        android:layout_width="30dip"        android:layout_height="30dip"        android:src="@drawable/qzone_phone_tail" /></LinearLayout>

ExpandableListView的GroupView指示符图片：（用于指示展开和收缩的状态）drawable-mdpi/expandable_group_bg.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item        android:drawable="@drawable/expander_ic_maximized"        android:state_expanded="true"/>    <item         android:drawable="@drawable/expander_ic_minimized"/></selector>

5.实现步骤3：主Activity的Java代码以及ExpandableListAdapter的实现

ExpandableListViewActivity.java文件

package com.wlj.example.apidemo.layout;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import com.wlj.example.apidemo.R;import com.wlj.example.apidemo.R.layout;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.widget.BaseExpandableListAdapter;import android.widget.ExpandableListAdapter;import android.widget.ExpandableListView;import android.widget.ImageView;import android.widget.SimpleExpandableListAdapter;import android.widget.TextView;public class ExpandableListViewActivity extends Activity {ExpandableListView explist;ExpandableListAdapter adapter;//List<? extends Map<String,?>> groupData;ArrayList<HashMap<String,String>> groupData;String[] groupFrom;int[] groupTo;//List<? extends List<? extends Map<String,?>>> childData;ArrayList<ArrayList<HashMap<String,String>>> childData;String[] childFrom;int[] childTo;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_expandable_list_view);explist = (ExpandableListView)findViewById(R.id.explist_friends);initData();adapter = new MySimpleExpandableListAdapter(this, groupData, R.layout.expandablelist_group_item, groupFrom, groupTo, childData, R.layout.expandable_child_item, childFrom, childTo);explist.setAdapter(adapter);}private void initData(){groupFrom = new String[]{"group_title","group_num"};groupTo = new int[]{R.id.txt_group_title, R.id.txt_group_num};groupData = new ArrayList<HashMap<String,String>>();HashMap<String,String> group1 = new HashMap<String,String>(2);group1.put("group_title", "我的设备");group1.put("group_num", "1/1");groupData.add(group1);HashMap<String,String> group2 = new HashMap<String,String>(2);group2.put("group_title", "大学同学");group2.put("group_num", "1/1");groupData.add(group2);HashMap<String,String> group3 = new HashMap<String,String>(2);group3.put("group_title", "高中同学");group3.put("group_num", "1/1");groupData.add(group3);HashMap<String,String> group4 = new HashMap<String,String>(2);group4.put("group_title", "初中同学");group4.put("group_num", "1/1");groupData.add(group4);HashMap<String,String> group5 = new HashMap<String,String>(2);group5.put("group_title", "工作同事");group5.put("group_num", "1/1");groupData.add(group5);childFrom = new String[]{"child_logo","child_name","child_vip","child_words","child_device"};childTo = new int[]{R.id.image_my_logo, R.id.txt_my_name, R.id.image_my_vip, R.id.txt_my_words, R.id.image_my_device};childData = new ArrayList<ArrayList<HashMap<String, String>>>();ArrayList<HashMap<String,String>> child1 = new ArrayList<HashMap<String,String>>();HashMap<String, String> childitem1 = new HashMap<String, String>();childitem1.put("child_logo", String.valueOf(R.drawable.ic_launcher));childitem1.put("child_name", "我的电脑");childitem1.put("child_vip", String.valueOf(R.drawable.ic_launcher));childitem1.put("child_words", "[离线]无需数据线，手机轻松传文件到电...");childitem1.put("child_device", String.valueOf(R.drawable.ic_launcher));child1.add(childitem1);childData.add(child1);ArrayList<HashMap<String,String>> child2 = new ArrayList<HashMap<String,String>>();HashMap<String, String> childitem2 = new HashMap<String, String>();childitem2.put("child_logo", String.valueOf(R.drawable.qb_group_logo));childitem2.put("child_name", "张三丰");childitem2.put("child_vip", String.valueOf(R.drawable.qq_profilecard_vip_0));childitem2.put("child_words", "[离线]正在演习太极，哈哈");childitem2.put("child_device", String.valueOf(R.drawable.qzone_phone_tail));child2.add(childitem2);childData.add(child2);ArrayList<HashMap<String,String>> child3 = new ArrayList<HashMap<String,String>>();HashMap<String, String> childitem3 = new HashMap<String, String>();childitem3.put("child_logo", String.valueOf(R.drawable.ic_launcher));childitem3.put("child_name", "东方不败");childitem3.put("child_vip", String.valueOf(R.drawable.ic_launcher));childitem3.put("child_words", "[离线]正在修炼葵花宝典，勿扰");childitem3.put("child_device", String.valueOf(R.drawable.ic_launcher));child3.add(childitem3);childData.add(child3);ArrayList<HashMap<String,String>> child4 = new ArrayList<HashMap<String,String>>();HashMap<String, String> childitem4 = new HashMap<String, String>();childitem4.put("child_logo", String.valueOf(R.drawable.ic_launcher));childitem4.put("child_name", "令狐冲");childitem4.put("child_vip", String.valueOf(R.drawable.ic_launcher));childitem4.put("child_words", "[离线]我爱你，盈盈");childitem4.put("child_device", String.valueOf(R.drawable.ic_launcher));child4.add(childitem4);childData.add(child4);ArrayList<HashMap<String,String>> child5 = new ArrayList<HashMap<String,String>>();HashMap<String, String> childitem5 = new HashMap<String, String>();childitem5.put("child_logo", String.valueOf(R.drawable.ic_launcher));childitem5.put("child_name", "博主");childitem5.put("child_vip", String.valueOf(R.drawable.ic_launcher));childitem5.put("child_words", "[离线]debug中...蛋碎");childitem5.put("child_device", String.valueOf(R.drawable.ic_launcher));child5.add(childitem5);childData.add(child5);}public static class MySimpleExpandableListAdapter extends SimpleExpandableListAdapter{    private List<? extends Map<String, ?>> mGroupData;    private String[] mGroupFrom;    private int[] mGroupTo;    private int mGroupLayout;    private List<? extends List<? extends Map<String, ?>>> mChildData;    private int mChildLayout;    private String[] mChildFrom;    private int[] mChildTo;        private LayoutInflater mInflater;    public MySimpleExpandableListAdapter(Context context,List<? extends Map<String, ?>> groupData, int groupLayout,String[] groupFrom, int[] groupTo,List<? extends List<? extends Map<String, ?>>> childData,int childLayout, String[] childFrom, int[] childTo) {super(context, groupData, groupLayout, groupFrom, groupTo, childData,childLayout, childFrom, childTo);  mGroupData = groupData;        mGroupFrom = groupFrom;        mGroupTo = groupTo;        mGroupLayout = groupLayout;        mChildData = childData;        mChildLayout = childLayout;        mChildFrom = childFrom;        mChildTo = childTo;                mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}@Overridepublic View getChildView(int groupPosition, int childPosition,boolean isLastChild, View convertView, ViewGroup parent) {        View v;        if (convertView == null) {            v = newChildView(isLastChild, parent);        } else {            v = convertView;        }        bindView(v, mChildData.get(groupPosition).get(childPosition), mChildFrom, mChildTo);        return v;}//子视图 包含ImageView，TextView，ImageView，TextView，ImageView五个组件private void bindView(View view, Map<String, ?> data, String[] from,int[] to) {        int len = to.length;        if(5 == len)        {        ImageView logo = (ImageView)view.findViewById(to[0]);        if (logo != null)        logo.setImageResource(Integer.valueOf((String)data.get(from[0])).intValue());                TextView name = (TextView)view.findViewById(to[1]);        if (name != null)        name.setText((String)data.get(from[1]));                   ImageView vip = (ImageView)view.findViewById(to[2]);        if (vip != null)        vip.setImageResource(Integer.valueOf((String)data.get(from[2])).intValue());                TextView words = (TextView)view.findViewById(to[3]);        if (words != null)        words.setText((String)data.get(from[3]));                ImageView device = (ImageView)view.findViewById(to[4]);        if (device != null)        device.setImageResource(Integer.valueOf((String)data.get(from[4])).intValue());        }}@Overridepublic View getGroupView(int groupPosition, boolean isExpanded,View convertView, ViewGroup parent) {return super.getGroupView(groupPosition, isExpanded, convertView, parent);}}}

6.图片资源下载

 http://download.csdn.net/detail/meplusplus/7387249

7.其它

      下一篇介绍ListView相关的知识点，主要汇总了Android开发需要掌握的基础知识点；

     

转载请附上本页链接：来自CSDN博客——MePlusPlus(Me++)的专栏 （http://blog.csdn.net/meplusplus）
欢迎留言交流。