完全仿QQ好友列表，自定义ExpandableListView！

最近，需要做一个可展开的listview，不禁想起了ExpandableListView。但是，在写了一个简单的例子后，发现了问题：

 

ExpandableListView是又多个childList组成的。

当展开的childList过长，又需要打开其他的list时，用户只能先滚动到最上面关掉这个childList，才可能打开其他的childlist！

 

这样的用户体验很差。iPhone做的就很不错，QQ的好友列表顶端 也有类似的导航，显示当前gruop的标签，并且点击就可以关闭当前组，十分方便！

http://androiddada.iteye.com/

 

好了，今天就模仿做了这个，直接上图：

 

 

下面是页面的布局（其他无用的布局我已经去掉了）：

 

 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.       
8.     <FrameLayout  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent" >  
11.   
12.         <com.customWidget.QExListView  
13.             android:choiceMode="singleChoice"  
14.             android:id="@+id/home_expandableListView"  
15.             android:layout_width="fill_parent"  
16.             android:layout_height="fill_parent"  
17.             android:layout_below="@id/head_line"  
18.             android:cacheColorHint="#00000000"  
19.             android:childDivider="@drawable/list_divider_line"  
20.             android:divider="@drawable/list_divider_line"  
21.             android:dividerHeight="1dip"  
22.             android:fadingEdge="none"  
23.             android:groupIndicator="@null" />  
24.     </FrameLayout>  
25.   
26. </LinearLayout>  

 这里要说明的是：他的父控件一定要为FrameLayout。因为需要添加在ExpandableListView上层的小导航条！

 

下面是自定义组件QExListView 代码：

 

 

Java代码  

1. public class QExListView extends ExpandableListView implements OnScrollListener {  
2.   
3.   
4.   
5.     @Override  
6.     public void setAdapter(ExpandableListAdapter adapter) {  
7.         // TODO Auto-generated method stub  
8.         super.setAdapter(adapter);  
9.     }  
10.   
11.   
12.     private LinearLayout _groupLayout;  
13.     public int _groupIndex = -1;  
14.   
15.     /** 
16.      * @param context 
17.      */  
18.     public QExListView(Context context) {  
19.         super(context);  
20.         super.setOnScrollListener(this);  
21.     }  
22.   
23.     /** 
24.      * @param context 
25.      * @param attrs 
26.      */  
27.     public QExListView(Context context, AttributeSet attrs) {  
28.         super(context, attrs);  
29.         super.setOnScrollListener(this);  
30.     }  
31.   
32.     /** 
33.      * @param context 
34.      * @param attrs 
35.      * @param defStyle 
36.      */  
37.     public QExListView(Context context, AttributeSet attrs, int defStyle) {  
38.         super(context, attrs, defStyle);  
39.         super.setOnScrollListener(this);  
40.     }  
41.   
42.     @Override  
43.     public void onScroll(AbsListView view, int firstVisibleItem,  
44.             int visibleItemCount, int totalItemCount) {  
45.   
46.         if (_exAdapter == null)  
47.             _exAdapter = this.getExpandableListAdapter();  
48.   
49.         int ptp = view.pointToPosition(0, 0);  
50.         if (ptp != AdapterView.INVALID_POSITION) {  
51.             QExListView qExlist = (QExListView) view;  
52.             long pos = qExlist.getExpandableListPosition(ptp);  
53.             int groupPos = ExpandableListView.getPackedPositionGroup(pos);  
54.             int childPos = ExpandableListView.getPackedPositionChild(pos);  
55.   
56.               
57.             if (childPos < 0) {  
58.                 groupPos = -1;  
59.             }  
60.             if (groupPos < _groupIndex) {  
61.   
62.                 _groupIndex = groupPos;  
63.                   
64.                 if (_groupLayout != null){  
65.                     _groupLayout.removeAllViews();  
66.                     _groupLayout.setVisibility(GONE);//这里设置Gone 为了不让它遮挡后面header  
67.                 }  
68.             } else if (groupPos > _groupIndex) {  
69.                 final FrameLayout fl = (FrameLayout) getParent();  
70.                 _groupIndex = groupPos;  
71.                 if (_groupLayout != null)  
72.                 fl.removeView(_groupLayout);  
73.   
74.                 _groupLayout = (LinearLayout) getExpandableListAdapter()  
75.                         .getGroupView(groupPos, true, null, null);  
76.                 _groupLayout.setOnClickListener(new OnClickListener() {  
77.   
78.                     @Override  
79.                     public void onClick(View v) {  
80.                         collapseGroup(_groupIndex);  
81.                         Home_Act._viewHandler.post(new Runnable() {  
82.                             @Override  
83.                             public void run() {  
84.                                 // TODO Auto-generated method stub  
85.                                 fl.removeView(_groupLayout);  
86.                                 fl.addView(_groupLayout, new LayoutParams(  
87.                                         LayoutParams.FILL_PARENT, 50));  
88.                             }  
89.                         });  
90.                     }  
91.                 });  
92.                   
93.                   
94.                 fl.addView(_groupLayout,fl.getChildCount(), new LayoutParams(  
95.                         LayoutParams.FILL_PARENT, 50));  
96.   
97.             }  
98.         }  
99.     }  
100.   
101.       
102.     @Override  
103.     public void onScrollStateChanged(AbsListView view, int scrollState) {  
104.     }  
105.   
106. }  

 

所用的adapter与ExpandableListView一样，这里就不赘述了。