用ExpandableListView实现类似QQ好友列表

转自http://syab11.iteye.com/blog/987708

 

ExpandableListView是一个用来显示二级节点的listview。

qq好友列表中子列表上下移动时，父节点在顶端会始终显示，这里我们可以自定义一个view来充当这个父节点。

 

主布局文件qq_listview如下,其中当我们拖动列表时，系统默认拖动过程中列表背景是黑的，我们可以通过android:cacheColorHint="#00000000"将其设置为透明，其中前两位是透明效果参数（00-99），后六位是颜色的设置。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@drawable/default_bg_hdpi"> <LinearLayout android:id="@+id/gone_linear" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/expand_column_bg" android:visibility="gone" android:cacheColorHint="#50000000" > <ImageView android:id="@+id/qq_list_imageview" android:layout_width="wrap_content" android:layout_height="30dip" android:src="@drawable/narrow_select" /> <TextView android:id="@+id/qq_list_textview" android:layout_marginLeft="50dip" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <ExpandableListView android:id="@+id/qq_listview" android:cacheColorHint="#00000000" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </FrameLayout> </LinearLayout>  

如果我们想更换父节点打开和关闭时的箭头，可以先设置一个selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:drawable="@drawable/expand_column_bg_over" /> <item android:state_pressed="true" android:drawable="@drawable/expand_column_bg" /> <item android:state_pressed="false" android:drawable="@drawable/feedlistdividerbg"></item> </selector>  

然后在代码中调用

elistview = (ExpandableListView)findViewById(R.id.qq_listview); //替换ExpandableListView的打开关闭时的箭头图标 elistview.setGroupIndicator(this.getResources().getDrawable(R.drawable.expand_list_selector)); 

 

此外，我们还要设置父节点和子节点item的布局文件

父节点qq_list_parent.xml如下

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/expand_column_bg"> <TextView android:id="@+id/parend" android:layout_width="wrap_content" android:layout_height="30dip" android:layout_marginLeft="50dip" /> </LinearLayout>  

子节点qq_listview_child.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:cacheColorHint="#00000000" > <TextView android:id="@+id/child" android:layout_width="wrap_content" android:layout_height="40dip" android:layout_marginLeft="80dip" /> </LinearLayout>  

java代码如下

package com.sy.android.qqlistview; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.AbsListView; import android.widget.AbsListView.OnScrollListener; import android.widget.ExpandableListView; import android.widget.ExpandableListView.OnGroupCollapseListener; import android.widget.ExpandableListView.OnGroupExpandListener; import android.widget.LinearLayout; import android.widget.SimpleExpandableListAdapter; import android.widget.TextView; import com.sy.android.testAndroid.R; public class QQListView extends Activity { private static ArrayList<Map<String,String>> parentData = new ArrayList<Map<String,String>>(); private static ArrayList<ArrayList<Map<String,String>>> childData = new ArrayList<ArrayList<Map<String,String>>>(); private ExpandableListView elistview; private TextView tv; /** *当前打开的父节点 */ private int the_group_expand_position=-1; /** * 打开的父节点所与的子节点数 */ private int position_child_count=0; /** * 是否有打开的父节点 */ private boolean isExpanding=false; public void getData(){ for(int i=0; i<20;i++){ Map<String,String> map = new HashMap<String,String>(); map.put("parend", i+""); parentData.add(map); } for(int i=0;i<20;i++){ ArrayList<Map<String,String>> child = new ArrayList<Map<String,String>>(); for(int j=0; j<20;j++){ Map<String,String> map = new HashMap<String,String>(); map.put("child", i+""+j); child.add(map); } childData.add(child); } } public void onCreate(Bundle saveBundle){ super.onCreate(saveBundle); setContentView(R.layout.qq_listview); elistview = (ExpandableListView)findViewById(R.id.qq_listview); //替换ExpandableListView的打开关闭时的箭头图标 elistview.setGroupIndicator(this.getResources().getDrawable(R.drawable.expand_list_selector)); tv = (TextView)findViewById(R.id.qq_list_textview); /** * 滑动子列表时在上方显示父节点的view */ final LinearLayout linear = (LinearLayout)findViewById(R.id.gone_linear); /** * 监听父节点打开的事件 */ elistview.setOnGroupExpandListener(new OnGroupExpandListener(){ @Override public void onGroupExpand(int groupPosition) { the_group_expand_position=groupPosition; position_child_count=childData.get(groupPosition).size(); isExpanding=true; } }); /** * 监听父节点关闭的事件 */ elistview.setOnGroupCollapseListener(new OnGroupCollapseListener(){ @Override public void onGroupCollapse(int groupPosition) { if(linear.getVisibility()==View.VISIBLE){ linear.setVisibility(View.GONE); } isExpanding=false; } }); linear.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { linear.setVisibility(View.GONE); elistview.collapseGroup(the_group_expand_position); } }); /** * 通过setOnScrollListener来监听列表上下滑动时item显示和消失的事件 */ elistview.setOnScrollListener(new OnScrollListener(){ @Override public void onScrollStateChanged(AbsListView view, int scrollState) { } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if(isExpanding){ // 当当前第一个item id小于打开的父节点id 或大于打开的父节点id和它的子节点总数之和时 if(firstVisibleItem<the_group_expand_position || firstVisibleItem>(the_group_expand_position+position_child_count)){ linear.setVisibility(View.GONE); }else{ linear.setVisibility(View.VISIBLE); tv.setText(((Map)parentData.get(the_group_expand_position)).get("parend").toString()); } } } }); getData(); SimpleExpandableListAdapter selAdapter = new SimpleExpandableListAdapter(this, parentData, R.layout.qq_listview_parend_item, new String[]{"parend"}, new int[]{R.id.parend}, childData, R.layout.qq_liatview_child_item, new String[]{"child"}, new int[]{R.id.child} ); elistview.setAdapter(selAdapter); } }

实现的思路是通过setOnScrollListener来监听listview，从而获得显示在视图中的item的id,通过id的判断来决定显示在顶端的自定义的view是否显示