Listview列表收缩与展开——ExpandableListView

最新推荐文章于 2023-12-10 13:38:46 发布
最新推荐文章于 2023-12-10 13:38:46 发布
阅读量3.3k 收藏 2
点赞数 1

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、效果

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

源码免费下载

三、自定义列表图标
上面的图标是系统自己生成的，下面我们要改成自己的
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"

下面我们再来看看效果：

源码免费下载

四、图标放置右边

在上面MainActivity.java的函数setListData()加中：

// 得到屏幕的大小
    DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(dm);
    //图标设置在右边
    getExpandableListView().setIndicatorBounds(dm.widthPixels-60, dm.widthPixels); // 设置指示图标的位置

效果：

源码免费下载：


jenniferyayun
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android仿QQ好友列表实现列表收缩与展开
01-05
ExpandableListView是一个垂直滚动显示两级列表项的视图，与ListView不同的是，它可以有两层：每一层都能够被独立的展开并显示其子项。 好友QQ列表，可以展开，可以收起，在android中，以往用的比较多的是listview，虽然可以实现列表的展示，但在某些情况下，我们还是希望用到可以分组并实现收缩的列表，那就要用到android的ExpandableListView，今天研究了一下这个的用法，也参考了很多资料动手写了一个小demo，实现了基本的功能，下面直接上效果图以及源代码~！ 本文效果： 一、实现原理 1、首先必须在布局文件中定义一个ExpandableListVi
android二级listview列表实现代码
09-05
今天来实现以下大众点评客户端的横向listview二级列表,感兴趣的朋友可以研究下
C#实现listview Group收缩扩展的方法
12-26
本文实例讲述了C#实现listview Group收缩扩展的方法。分享给大家供大家参考，具体如下： 1、本实例是完善了codeprofect上面charju老师“Add Group Collapse Behavior on a Listview Control”的一个限制（点击分组后面的图标不能收缩和扩展）； 2、本实列适用于win2008,vista； 3、仅供参考，如有更好的方法，望大家不吝交流~ 完整代码如下（只需建一个windows工程，在窗体上拖一个listview控件，取名为aoc，右击编辑代码，把下面的代码粘到窗口就可以了~，但需要注意事件对应）： using System;
仿ExpandableListView的ListView列表，展开、关闭动画
06-11
仿ExpandableListView的ListView列表，配有高效、平滑的展开、关闭动画
可展开列表ExpandableListView嵌套GirdView demo
03-17
http://blog.csdn.net/RichieZhu/article/details/50912014
listview 可折叠类，添加后可以使listview 具有折叠功能。
明明先生的专栏
09-27 1277
此类来自网络，非本人所写，但是找不到原地址了，只是在贴子中
ExpandableListView,可展开和折叠的ListView
szy_android的博客
10-10 5532
ExpandableListView界面实现效果： 一、XML代码 1.1 activity_expandable_list_view.xml<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools
java列表展开折叠,Android在开发中的实用技巧之ExpandableListView简单实现商品列表折叠...
weixin_42502382的博客
03-10 236
根据已上线的app里总结出来的实用小技巧一、简介在日常开发，有可能会遇到需要一些可以展开的列表，比如QQ的好友列表。但是，用Android的该怎么做呢？其实在我没有接触过ExpandableListView类之前，都是自定义控件继承于ListView或者ListView嵌套ListView来实现的, 当然也不推荐大家这样使用, 这样使用会降低app页面的加载速度和性能. 然后，后来发现了Andr...
列表中每一项实现展开收起功能
不懂前端的小韩的博客
07-11 499
从后端获取数据，渲染列表，使每一项都有展开收起功能。
vue 列表添加收起展开
最新发布
m0_70265923的博客
12-10 425
【代码】vue 列表添加收起展开。
Html+Element UI+JS实现列表展开收起效果
此人很懒，什么都没有写
03-10 2596
需要实现的效果： 带展开/收起按钮，列表默认展示两条数据 展开时只展示四条数据，其余通过滚动条查看 页面效果实现：外层使用div控制列表的展示数目（高度height）；class itemBoard定义样式，id itemBoard 用于获取div节点对象；v-show控制按钮展示与否（注意：v-show是根据表达式决定是否展示已在页面渲染的内容，v-if是根据表达式决定是否渲染页面内容）；closeItemShow展开/收起列表按钮事件；showMoreText动态展示按钮文本（展开/收起
html 列表实现展开和收起,实现列表展开收起效果
weixin_39705069的博客
05-30 2378
$(".btn").click(function () {$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");});css：.最外层div class .需要收起展开的div的class{display: none;}.showDiv .需要收起展开的div的cla...
实现列表二级展开/收起/选择
weixin_33862188的博客
08-07 924
代码地址如下：http://www.demodashi.com/demo/12628.html 1、先看效果图 2、实现原理 1）通过对UITableView进行分组来实现展开收起的功能； 2）通过cell的model和组model中的是否选中和是否展开的标记字段来记录并实现展开/收起/选择的功能； 3、代码实现 1）创建cell的model类并添加如下属性： // 标记是否选中 @prop...
js实现多个列表展开收缩类似手风琴效果
xiaowang_test的博客
10-12 2604
实现效果大概是多个卡片默认均隐藏详情部分，点击展开可查看该卡片详情，点击收起详情隐藏；同时只展开一个，即某个展开时其他的均收缩状态。 设计思路： 详情模块与展开按钮各设置两个样式类，即默认样式类与展开样式类。每个卡片默认样式类display：none，展开按钮默认样式不设置旋转角度。点击展开按钮后，通过js语句定位到使用展开类名的元素的位置，利用arrt方法将样式类名换为默认样式类，用同样的方法更改展开按钮的样式；将当前卡片及展开按钮的样式该改为展开样式类（通过设置按钮元素css-transform的旋转
Android listView的展开与收起实现折叠，及动态设置子ListView的高度
热门推荐
tsaopin的博客
08-07 1万+
问题重现最近在公司项目中做一个商品展示的功能，要求在分类后 ，对每个类进行展开、收起操作。想法就是在ListView中嵌套一个ListView，通过动态的显示和隐藏ListView，实现展开和收起操作在同一个页面，实现折叠效果。难点：解决ListView的动态设置问题.先看效果图： 解决思路外面一层是一个ListView，在填充Item的时候，在Item布局设置为LinearLayout，在下面设
java 列表展开方式_android列表控件实现展开、收缩功能
weixin_42447681的博客
02-24 275
最近在做一个Rss阅读器，我看了一看别人做的阅读器中的lisView可以伸缩，展开，我就在网上搜索了一下。果然让我找到，下面就我找到的一个小例子，给大家分享一下。ActivityMain .javapackage com.android;import android.app.ExpandableListActivity;import android.os.Bundle;import android...
android expandablelist 自动滚动,ExpandableListView展开折叠列表滚动到指定位置的方法...
weixin_33254139的博客
05-26 361
需求现有一需求，通讯录，需要各组区分(Group)，点击组标题展开后显示该部门下的员工，但存在一个问题，需要能够通过一个 EditText 搜索其中的员工并滚动到指定位置。问题在哪原生的 ExpandableListView 并未提供滚动到第几组第几个的方法，而是保留了 ListView 的 smoothScrollToPosition 方法，但 ListView 的 smoothScrollTo...
Android开发（十三）——全屏滚动与listview
05-25
在Android应用开发过程中，有时候我们需要实现全屏滚动的效果，或者在滚动页面中嵌入ListView等组件。下面就来介绍一下如何实现这些效果。 一、全屏滚动 实现全屏滚动需要用到Android系统提供的ScrollView组件。ScrollView可以包含多个子视图，并且可以在垂直方向上进行滚动。下面是一个简单的例子： ``` <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第一行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第二行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第三行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第四行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第五行"/> </LinearLayout> </ScrollView> ``` 上面的代码中，我们将ScrollView作为根布局，然后在ScrollView内部添加了一个垂直方向的LinearLayout，这个LinearLayout包含了多个TextView，每个TextView显示一行文本。运行这个应用，可以看到整个页面可以在垂直方向上滚动。 二、在滚动页面中嵌入ListView 有时候我们需要在滚动页面中嵌入ListView，这时候可以使用Android系统提供的NestedScrollView组件。NestedScrollView是ScrollView的子类，可以包含多个子视图，并且可以在垂直方向上进行滚动。和ScrollView不同的是，NestedScrollView可以嵌套其他可滚动的组件，例如ListView等。 下面是一个简单的例子： ``` <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第一行"/> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="@null" android:dividerHeight="0dp" android:scrollbars="none"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第三行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第四行"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这是第五行"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> ``` 上面的代码中，我们将NestedScrollView作为根布局，然后在NestedScrollView内部添加了一个垂直方向的LinearLayout。这个LinearLayout包含了多个TextView和一个ListView。由于ListView也可以滚动，所以我们需要将它的滚动条隐藏掉，然后就可以在滚动页面中嵌入ListView了。 以上就是Android开发中如何实现全屏滚动和在滚动页面中嵌入ListView的方法。希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值