【so easy~】完全仿QQ好友列表，自定义ExpandableListView！

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

 

ExpandableListView是又多个childList组成的。

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

 

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

http://androiddada.iteye.com/

 

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

 

 

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

 

 

<?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 代码：

 

 

public class QExListView extends ExpandableListView implements OnScrollListener {



	@Override
	public void setAdapter(ExpandableListAdapter adapter) {
		// TODO Auto-generated method stub
		super.setAdapter(adapter);
	}


	private LinearLayout _groupLayout;
	public 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();
					_groupLayout.setVisibility(GONE);//这里设置Gone 为了不让它遮挡后面header
				}
			} 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);
						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) {
	}

}

 

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

 

大家可以试试，如果发现有bug 可以留言！

 

http://androiddada.iteye.com/