【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/

评论

21 楼 Yuyoyo 2012-04-19  

能不能告诉我_exAdapter 和 Home_Act 这两个变量的来源啊

20 楼 yyf365 2012-04-19  

libo19881179 写道

iaiai 写道

libo19881179 写道

iaiai 写道

我用你的代码写出来的发现在问题

展开菜单第一个之后往下拖动，然后出现这个头，然后点这个头合起来，再想展开第一项的时候就展不开了，好像在第一项的上层多了一层透明遮罩，就是点不到菜单，用上下左右键是可以，但是用鼠标就是点没用，肯定是上面有这招层没删掉....

确实有这个问题 我会修改的

这个怎么修改，你把代码发到我邮箱吧，谢谢啦....
[e-mail]

已经解决了 只需要加入 _groupLayout.setVisibility(GONE);

楼主此问题的具体解决办法是什么？你的意思是要将什么设为不可见？

19 楼 lethecat 2012-04-16  

楼主给个源码吧，谢谢了啊，[e-mail]

18 楼 myxxoo_ 2012-03-29  

楼主，请问你的Home_Act是怎么实现的

17 楼 yyf365 2012-03-27  

要你源码主要为了要你那几个图片素材

16 楼 tllen3 2012-03-06  

楼主求源码啊！项目急需！谢谢了！！！[e-mail]！

15 楼 libo19881179 2012-03-05  

iaiai 写道

libo19881179 写道

iaiai 写道

我用你的代码写出来的发现在问题

展开菜单第一个之后往下拖动，然后出现这个头，然后点这个头合起来，再想展开第一项的时候就展不开了，好像在第一项的上层多了一层透明遮罩，就是点不到菜单，用上下左右键是可以，但是用鼠标就是点没用，肯定是上面有这招层没删掉....

确实有这个问题 我会修改的

这个怎么修改，你把代码发到我邮箱吧，谢谢啦....
[e-mail]

已经解决了 只需要加入 _groupLayout.setVisibility(GONE);

14 楼 119568242 2012-01-30  

Cindy_Lee 写道

要源码已经成为ItEye里一条靓丽的风景线....
贴出的代码都这么清楚了还要？都太懒了把....

发现要源码的id  大多blog都是空的

13 楼 happyboy858 2012-01-18  

楼主能给个源码吗？[e-mail]

12 楼 Cindy_Lee 2012-01-16  

要源码已经成为ItEye里一条靓丽的风景线....
贴出的代码都这么清楚了还要？都太懒了把....

11 楼 bunnyswe 2012-01-15  

问个问题 如果要浮动层是半透明 你这个可以实现不

10 楼 iaiai 2012-01-14  

libo19881179 写道

iaiai 写道

我用你的代码写出来的发现在问题

展开菜单第一个之后往下拖动，然后出现这个头，然后点这个头合起来，再想展开第一项的时候就展不开了，好像在第一项的上层多了一层透明遮罩，就是点不到菜单，用上下左右键是可以，但是用鼠标就是点没用，肯定是上面有这招层没删掉....

确实有这个问题 我会修改的

这个怎么修改，你把代码发到我邮箱吧，谢谢啦....
[e-mail]

9 楼 libo19881179 2012-01-14  

iaiai 写道

我用你的代码写出来的发现在问题

展开菜单第一个之后往下拖动，然后出现这个头，然后点这个头合起来，再想展开第一项的时候就展不开了，好像在第一项的上层多了一层透明遮罩，就是点不到菜单，用上下左右键是可以，但是用鼠标就是点没用，肯定是上面有这招层没删掉....

确实有这个问题 我会修改的

8 楼 lichenxiao 2012-01-13  

期待楼主发源码哦 [e-mail]

7 楼 iaiai 2012-01-12  

我用你的代码写出来的发现在问题

展开菜单第一个之后往下拖动，然后出现这个头，然后点这个头合起来，再想展开第一项的时候就展不开了，好像在第一项的上层多了一层透明遮罩，就是点不到菜单，用上下左右键是可以，但是用鼠标就是点没用，肯定是上面有这招层没删掉....

6 楼 lemonloves 2012-01-12  

楼主能给个源码吗？[e-mail] 谢谢

5 楼 huangxilove 2012-01-12  

楼主能给个源码吗？[e-mail]

4 楼 huhouchun 2012-01-12  

楼主能给个源码吗？[e-mail]

3 楼 huhouchun 2012-01-12  

楼主能给个源码吗？[e-mail]

2 楼 刘化成 2012-01-12  

楼主能不能给下源码呀？[e-mail]