用ExpandableListView实现类似QQ好友列表

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是否显示