仿QQ好友列表

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



ExpandableListView是又多个childList组成的。

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



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



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








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





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:orientation="vertical" > 
 
      
    <FrameLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" > 
 
        <com.customWidget.QExListView 
            android:choiceMode="singleChoice" 
            android:id="@+id/home_expandableListView" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent" 
            android:layout_below="@id/head_line" 
            android:cacheColorHint="#00000000" 
            android:childDivider="@drawable/list_divider_line" 
            android:divider="@drawable/list_divider_line" 
            android:dividerHeight="1dip" 
            android:fadingEdge="none" 
            android:groupIndicator="@null" /> 
    </FrameLayout> 
 
</LinearLayout> 

<?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:orientation="vertical" >

   
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <com.customWidget.QExListView
            android:choiceMode="singleChoice"
            android:id="@+id/home_expandableListView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/head_line"
            android:cacheColorHint="#00000000"
            android:childDivider="@drawable/list_divider_line"
            android:divider="@drawable/list_divider_line"
            android:dividerHeight="1dip"
            android:fadingEdge="none"
            android:groupIndicator="@null" />
    </FrameLayout>

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



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





Java代码 
public class QExListView extends ExpandableListView implements 
        AbsListView.OnScrollListener {  
    private ExpandableListAdapter _exAdapter = null;  
    private LinearLayout _groupLayout;  
    private int _groupIndex = -1;  
 
    /** 
     * @param context 
     */ 
    public QExListView(Context context) {  
        super(context);  
        super.setOnScrollListener(this);  
    }  
 
    /** 
     * @param context 
     * @param attrs 
     */ 
    public QExListView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        super.setOnScrollListener(this);  
    }  
 
    /** 
     * @param context 
     * @param attrs 
     * @param defStyle 
     */ 
    public QExListView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
        super.setOnScrollListener(this);  
    }  
 
    @Override 
    public void onScroll(AbsListView view, int firstVisibleItem,  
            int visibleItemCount, int totalItemCount) {  
 
        if (_exAdapter == null)  
            _exAdapter = this.getExpandableListAdapter();  
 
        int ptp = view.pointToPosition(0, 0);  
        if (ptp != AdapterView.INVALID_POSITION) {  
            QExListView qExlist = (QExListView) view;  
            long pos = qExlist.getExpandableListPosition(ptp);  
            int groupPos = ExpandableListView.getPackedPositionGroup(pos);  
            int childPos = ExpandableListView.getPackedPositionChild(pos);  
 
              
            if (childPos < 0) {  
                groupPos = -1;  
            }  
            if (groupPos < _groupIndex) {  
 
                _groupIndex = groupPos;  
                  
                if (_groupLayout != null)  
                    _groupLayout.removeAllViews();  
            } else if (groupPos > _groupIndex) {  
                final FrameLayout fl = (FrameLayout) getParent();  
                _groupIndex = groupPos;  
                if (_groupLayout != null)  
                fl.removeView(_groupLayout);  
 
                _groupLayout = (LinearLayout) getExpandableListAdapter()  
                        .getGroupView(groupPos, true, null, null);  
                _groupLayout.setOnClickListener(new OnClickListener() {  
 
                    @Override 
                    public void onClick(View v) {  
                        collapseGroup(_groupIndex);  
//                      v = (LinearLayout) getExpandableListAdapter().getGroupView(_groupIndex, true, null, null);  
                        Home_Act._viewHandler.post(new Runnable() {  
                            @Override 
                            public void run() {  
                                // TODO Auto-generated method stub  
                                fl.removeView(_groupLayout);  
                                fl.addView(_groupLayout, new LayoutParams(  
                                        LayoutParams.FILL_PARENT, 50));  
                            }  
                        });  
                    }  
                });  
                  
                  
                fl.addView(_groupLayout,fl.getChildCount(), new LayoutParams(  
                        LayoutParams.FILL_PARENT, 50));  
 
            }  
        }  
 
    }  
 
    @Override 
    public void onScrollStateChanged(AbsListView view, int scrollState) {  
    }  
 
 
 
}