Android_QQ好友列表实现---ExpandableListView可展开列表视图

来源：互联网发布：js防水涂料价格编辑：程序博客网时间：2024/05/12 18:10

效果图

仿QQ好友列表

用法

1.Xml属性

参照ListView的属性,很容易得出ExpandableListView的一些特有的属性

   <ExpandableListView        android:divider="#E8E8E8"       组线的分割线        android:dividerHeight="1dp"     组选项分割线的高度        android:groupIndicator="@null"  组选项左边图标,一般置为空,自己实现        android:childDivider="#E8E8E8"  子选项的分割线     />

2.方法

与ListView类似,重点在于Adapter适配器

        /*设置适配器*/        elv.setAdapter(adapter);

其他方法

        /* 展开监听*/        elv.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {            @Override            public void onGroupExpand(int groupPosition) {                Toast.makeText(MainActivity.this,"Expand",Toast.LENGTH_SHORT).show();            }        });        /*关闭监听*/        elv.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {            @Override            public void onGroupCollapse(int groupPosition) {                Toast.makeText(MainActivity.this,"Collapse",Toast.LENGTH_SHORT).show();            }        });        /* 展开分组*/        elv.expandGroup(2);        /* 关闭分组*/        elv.collapseGroup(2);        /* 发送延时消息 */        elv.postDelayed(new Runnable() {            @Override            public void run() {                elv.expandGroup(2);            }        },5000);

效果实现

activity_main.xml

在xml中定义一个ExpandableListView可拓展列表视图

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="@android:color/white"    tools:context=".MainActivity">    <TextView        android:padding="5dp"        android:text="QQ好友"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <ExpandableListView        android:childDivider="#E8E8E8"        android:groupIndicator="@null"        android:divider="#E8E8E8"        android:dividerHeight="1dp"        android:id="@+id/elv"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {    /*可拓展列表视图*/    private ExpandableListView expandableListView ;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        expandableListView = (ExpandableListView) findViewById(R.id.elv);        /* 1.1 创建一个adapter实例*/        MyExpandableListViewAdapter adapter = new MyExpandableListViewAdapter(this);        /* 1. 设置适配器*/        expandableListView.setAdapter(adapter);    }}

首先设置Adapter,至于是什么样的一个Adapter先不管.

/* 1.设置适配器*/expandableListView.setAdapter();

我们通过Android Studio的一些提示来看一看

Ctrl + P

代码提示

有两个重载,根据常识判断我们都选择第二个ExpandableListAdapter这个形参的重载

ExpandableListAdapter

查看源码后发现ExpandableListAdapter为一个接口,这种情况下,一般会有一些具体的实现类给到我们.

这里写图片描述

查看类的继承关系后发现有一个BaseExpandableListAdapter子类,是不是跟ListView很类似(BaseAdapter)

OK,到这里呢,我们已经知道了需要一个什么样的适配器

我们只需要继承BaseExpandableListAdapter来实现我们的自定义适配器MyExpandableListAdapter

MyExpandableListViewAdapter.java

/* ExpandableListViewAdapter 是一个接口,继承其中一个子类实现自定义adapter */public class MyExpandableListViewAdapter extends BaseExpandableListAdapter{    private Context context;    /* 布局填充器*/    private LayoutInflater inflater;    private String[] group = new String[]{"我的好友", "同学", "同事", "GirlFriends"};    private String[][] childs= new String[][]{{ "习大大","李克强","普京", "金正恩", "安倍晋三"},        {"刘铁男","万庆良","周永康", "徐才厚", "谷俊山", "令计划","郭伯雄","苏荣","陈水扁","蒋洁敏","李东生","白恩培" },        { "马云", "麻花藤", "李彦宏", "周鸿祎","雷布斯","库克" },        {"李冰冰","范冰冰","李小璐","杨颖","周冬雨","Lady GaGa","千颂伊","尹恩惠"}};    /* 构造,因为布局填充器填充布局需要使用到Context,通过构造来传递 */    public MyExpandableListViewAdapter (Context context){        this.context = context;         inflater = LayoutInflater.from(context);    }    /*组数*/    @Override    public int getGroupCount() {        return group.length;    }    /* 指定组的子Item数*/    @Override    public int getChildrenCount(int groupPosition) {        return childs[groupPosition].length;    }    /*组数据*/    @Override    public Object getGroup(int groupPosition) {        return group[groupPosition];    }    /*返回子选项的数据*/    @Override    public Object getChild(int groupPosition, int childPosition) {        return childs[groupPosition][childPosition];    }    /*组ID*/    @Override    public long getGroupId(int groupPosition) {        return groupPosition;    }    /*子ID*/    @Override    public long getChildId(int groupPosition, int childPosition) {        return childPosition;    }    /*ID是否唯一*/    @Override    public boolean hasStableIds() {        return true;    }    /* 组选项的视图处理 */    @Override    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {        /* 填充布局*/        View view = inflater.inflate(R.layout.item_elv_group,null);        ImageView iv_group_icon = (ImageView) view.findViewById(R.id.iv_group_icon);        TextView tv_group_name = (TextView) view.findViewById(R.id.tv_group_name);        TextView tv_group_number = (TextView) view.findViewById(R.id.tv_group_number);        tv_group_name.setText(group[groupPosition]);        tv_group_number.setText(childs[groupPosition].length+"/"+childs[groupPosition].length);        /*isExpanded 子列表是否展开*/        if(isExpanded){            iv_group_icon.setImageResource(R.mipmap.arrow_down);        }else {            iv_group_icon.setImageResource(R.mipmap.arrow_right);        }        return view;    }    /* 子选项的视图处理 */    @Override    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {        View view = inflater.inflate(R.layout.item_elv_child,null);        ImageView iv_child_icon = (ImageView) view.findViewById(R.id.iv_child_icon);        TextView tv_child_info = (TextView) view.findViewById(R.id.tv_child_info);        TextView tv_child_name = (TextView) view.findViewById(R.id.tv_child_name);        TextView tv_child_network = (TextView) view.findViewById(R.id.tv_child_network);        tv_child_name.setText(childs[groupPosition][childPosition]);        tv_child_network.setText(childPosition % 2 == 0?"5G":"6G");        return view;    }    /*子选项是否可选 */    @Override    public boolean isChildSelectable(int groupPosition, int childPosition) {        return true;    }}

根据提示,重写上述所有必须重写的方法.

重点同样在于,这两个方法

getGroupView(...)getChildView(...)

视图的布局一般也是采用xml定义布局文件,再通过LayoutInflater布局填充器进行加载

贴上两个Item的布局文件

item_elv_group.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="40dp"    android:background="#ffffff">    <ImageView        android:padding="5dp"        android:src="@mipmap/arrow_right"        android:id="@+id/iv_group_icon"        android:layout_width="wrap_content"        android:layout_height="match_parent" />    <TextView        android:text="我的好友"        android:gravity="center"        android:id="@+id/tv_group_name"        android:layout_toRightOf="@id/iv_group_icon"        android:layout_width="wrap_content"        android:layout_height="match_parent" />    <TextView        android:text="10/10"        android:gravity="center"        android:id="@+id/tv_group_number"        android:layout_alignParentRight="true"        android:layout_width="wrap_content"        android:layout_height="match_parent" /></RelativeLayout>

item_elv_child.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="60dp"    android:background="#ffffff"    >    <ImageView        android:src="@mipmap/ic_launcher"        android:id="@+id/iv_child_icon"        android:layout_width="60dp"        android:layout_height="60dp" />    <TextView    android:layout_marginTop="5dp"    android:text="金正恩"    android:gravity="center"    android:id="@+id/tv_child_name"    android:layout_toRightOf="@id/iv_child_icon"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />    <TextView        android:layout_marginTop="5dp"        android:text="描述"        android:id="@+id/tv_child_info"        android:layout_alignParentBottom="true"        android:layout_alignLeft="@id/tv_child_name"        android:layout_width="wrap_content"        android:layout_marginBottom="5dp"        android:layout_height="wrap_content" />    <TextView        android:layout_margin="8dp"        android:text="6G"        android:id="@+id/tv_child_network"        android:layout_alignParentRight="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></RelativeLayout>

LayoutInflater 布局填充器

    private Context context;    /* 布局填充器*/    private LayoutInflater inflater;    //获取LayoutInflater示例需要上下文 --> 通过Adapter的构造方法传入    public MyExpandableListViewAdapter (Context context){        this.context = context;         inflater = LayoutInflater.from(context);    }

到这里总的一个模样已经出来了

End

原文链接: http://blog.csdn.net/Vanmz/article/details/49288461

2 0