Android仿QQ好友列表实现列表收缩与展开

程序员文章站 2023-12-17 20:13:04

expandablelistview是一个垂直滚动显示两级列表项的视图，与listview不同的是，它可以有两层：每一层都能够被独立的展开并显示其子项。好友qq列表，可...

expandablelistview是一个垂直滚动显示两级列表项的视图，与listview不同的是，它可以有两层：每一层都能够被独立的展开并显示其子项。
好友qq列表，可以展开，可以收起，在android中，以往用的比较多的是listview，虽然可以实现列表的展示，但在某些情况下，我们还是希望用到可以分组并实现收缩的列表，那就要用到android的expandablelistview，今天研究了一下这个的用法，也参考了很多资料动手写了一个小demo，实现了基本的功能，下面直接上效果图以及源代码~！
本文效果：

一、实现原理
1、首先必须在布局文件中定义一个expandablelistview
2、其次创建一级条目对应的布局文件group
3、创建二级条目对应的布局文件child
4、加载expandablelistview组件的activity必须继承自expandablelistactivity
二、布局与代码
1、首先在主布局中activity_main.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:orientation="vertical" > 
 
  <expandablelistview 
    android:id="@id/android:list" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" /> 
 
</linearlayout>

2、其次在drawable文件夹定义布局一级列表groups.xml

<linearlayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
> 
  <textview 
    android:id="@+id/textgroup" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:paddingleft="40px" 
    android:paddingtop="6px" 
    android:paddingbottom="6px" 
    android:textsize="25sp" 
    android:text="no data" 
  /> 
 
</linearlayout>

3、接着在drawable文件夹定义布局二级列表childs.xml

<linearlayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
 android:orientation="vertical" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
> 
　　 <textview  
    android:id="@+id/textchild" 
  android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:paddingleft="60px" 
    android:paddingtop="10px" 
    android:paddingbottom="10px" 
    android:textsize="20sp" 
  android:text="no data" 
/> 
 
</linearlayout>

4、然后就是初始化和使用了

package com.example.expandablelistview; 
 
import java.util.arraylist; 
import java.util.hashmap; 
import java.util.list; 
import java.util.map; 
import android.os.bundle; 
import android.app.expandablelistactivity; 
import android.util.displaymetrics; 
import android.view.view; 
import android.widget.expandablelistview; 
import android.widget.simpleexpandablelistadapter; 
import android.widget.toast; 
 
public class mainactivity extends expandablelistactivity { 
  /** 
   * 创建一级条目容器 
   */ 
  list<map<string, string>> gruops = new arraylist<map<string, string>>(); 
  /** 
   * 存放内容, 以便显示在列表中 
   */ 
  list<list<map<string, string>>> childs = new arraylist<list<map<string, string>>>(); 
 
  @override 
  public void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    setlistdata(); 
  } 
 
  /** 
   * 设置列表内容 
   */ 
  public void setlistdata() { 
    // 创建二个一级条目标题 
    map<string, string> title_1 = new hashmap<string, string>(); 
    map<string, string> title_2 = new hashmap<string, string>(); 
    map<string, string> title_3 = new hashmap<string, string>(); 
    title_1.put("group", "林炳文"); 
    title_2.put("group", "文炳林"); 
    gruops.add(title_1); 
    gruops.add(title_2); 
 
    // 创建二级条目内容 
    // 内容一 
    map<string, string> title_1_content_1 = new hashmap<string, string>(); 
    map<string, string> title_1_content_2 = new hashmap<string, string>(); 
    map<string, string> title_1_content_3 = new hashmap<string, string>(); 
    title_1_content_1.put("child", "工人"); 
    title_1_content_2.put("child", "学生"); 
    title_1_content_3.put("child", "农民"); 
 
    list<map<string, string>> childs_1 = new arraylist<map<string, string>>(); 
    childs_1.add(title_1_content_1); 
    childs_1.add(title_1_content_2); 
    childs_1.add(title_1_content_3); 
 
    // 内容二 
    map<string, string> title_2_content_1 = new hashmap<string, string>(); 
    map<string, string> title_2_content_2 = new hashmap<string, string>(); 
    map<string, string> title_2_content_3 = new hashmap<string, string>(); 
    title_2_content_1.put("child", "猩猩"); 
    title_2_content_2.put("child", "老虎"); 
    title_2_content_3.put("child", "狮子"); 
    list<map<string, string>> childs_2 = new arraylist<map<string, string>>(); 
    childs_2.add(title_2_content_1); 
    childs_2.add(title_2_content_2); 
    childs_2.add(title_2_content_3); 
 
    childs.add(childs_1); 
    childs.add(childs_2); 
 
    /** 
     * 创建expandablelist的adapter容器 参数: 1.上下文 2.一级集合 3.一级样式文件 4. 一级条目键值 
     * 5.一级显示控件名 6. 二级集合 7. 二级样式 8.二级条目键值 9.二级显示控件名 
     * 
     */ 
    simpleexpandablelistadapter sela = new simpleexpandablelistadapter( 
        this, gruops, r.drawable.groups, new string[] { "group" }, 
        new int[] { r.id.textgroup }, childs, r.drawable.childs, 
        new string[] { "child" }, new int[] { r.id.textchild }); 
    // 加入列表 
    setlistadapter(sela); 
  } 
 
  /** 
   * 列表内容按下 
   */ 
  @override 
  public boolean onchildclick(expandablelistview parent, view v, 
      int groupposition, int childposition, long id) { 
    toast.maketext( 
        mainactivity.this, 
        "您选择了" 
            + gruops.get(groupposition).tostring() 
            + "子编号" 
            + childs.get(groupposition).get(childposition) 
                .tostring(), toast.length_short).show(); 
    return super.onchildclick(parent, v, groupposition, childposition, id); 
  } 
 
  /** 
   * 二级标题按下 
   */ 
  @override 
  public boolean setselectedchild(int groupposition, int childposition, 
      boolean shouldexpandgroup) { 
    return super.setselectedchild(groupposition, childposition, 
        shouldexpandgroup); 
  } 
 
  /** 
   * 一级标题按下 
   */ 
  @override 
  public void setselectedgroup(int groupposition) { 
    super.setselectedgroup(groupposition); 
  } 
}

5、效果
这是我手机上的效果，点击工人。学生等二级列表时，我手机上会有提示框出现的，但是不知为什么录制下来就是没有。

Android仿QQ好友列表实现列表收缩与展开

三、自定义列表图标
上面的图标是系统自己生成的，下面我们要改成自己的
1、更改自定义图标
在drawable文件夹下新建expandablelistview_change.xml

<?xml version = "1.0"  encoding = "utf-8"?> 
<selector  xmlns:android = "http://schemas.android.com/apk/res/android" >    
   <item android:state_expanded = "true"  android:drawable = "@drawable/w2"/>    
   <item android:drawable = "@drawable/w1"/>    
</selector >

2、修改上面布局activity.main.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:orientation="vertical" > 
 
  <expandablelistview 
    android:id="@id/android:list" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#f5f5f5" 
    android:cachecolorhint="#f5f5f5" 
    android:groupindicator="@drawable/expandablelistview_change" /> 
 
</linearlayout>

其实就是加了一句
android:groupindicator="@drawable/expandablelistview_change"
下面我们再来看看效果：

Android仿QQ好友列表实现列表收缩与展开

四、图标放置右边
在上面mainactivity.java的函数setlistdata()加中：

// 得到屏幕的大小 
displaymetrics dm = new displaymetrics(); 
getwindowmanager().getdefaultdisplay().getmetrics(dm); 
//图标设置在右边 
getexpandablelistview().setindicatorbounds(dm.widthpixels-60, dm.widthpixels); // 设置指示图标的位置

效果：

Android仿QQ好友列表实现列表收缩与展开

以上就是本文的全部内容，希望对大家的学习android软件编程有所帮助。

Android仿QQ好友列表实现列表收缩与展开

Android仿QQ好友列表实现列表收缩与展开

android列表控件实现展开、收缩功能

Android UI仿QQ好友列表分组悬浮效果

JS仿QQ好友列表展开、收缩功能(第二篇)

Android中使用listview实现qq/微信好友列表

JS仿QQ好友列表展开、收缩功能(第一篇)

JavaScript实现QQ列表展开收缩扩展功能

用Qt实现QQ好友列表界面伸缩功能（完全一模一样）（伸展和收缩、抽屉效果、类似树形控件）（鼠标划过QSS效果）

Android Studio实现QQ的注册登录和好友列表跳转

iOS之仿QQ好友列表展开收缩效果的实现