Android listView的展开与收起实现折叠,及动态设置子ListView的高度_listview折叠_tsaopin的博客-程序员秘密

技术标签: ListView  ListView折叠  展开收起  android  android listview  动态ListView  

问题重现

最近在公司项目中做一个商品展示的功能,要求在分类后 ,对每个类进行展开、收起操作。想法就是在ListView中嵌套一个ListView,通过动态的显示和隐藏ListView,实现展开和收起操作在同一个页面,实现折叠效果。难点:解决ListView的动态设置问题.先看效果图:

这里写图片描述
这里写图片描述

解决思路

外面一层是一个ListView,在填充Item的时候,在Item布局设置为LinearLayout,在下面设置一个ListView,默认为gone。在ListView适配器中动态设置显示和隐藏ListView,显示的时候通过子适配器填充数据,同时设置字ListView动态高度,以便解决之前的只显示一条的问题。

主页面布局

<RelativeLayout 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"
     >
    <ListView
        android:id="@+id/pro_lv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </ListView>
</RelativeLayout>

两个Item布局

item_produces.xml(大ListView Item)实现了分层的Franlayout,效果:图片上有布局。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <View
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#F6F5F4" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tv_control"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="10dp"
                android:clickable="true"
                android:padding="5dp"
                android:text="展开更多"
                android:textColor="#99000000"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv_pro_all"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="11dp"
                android:padding="5dp"
                android:text="美妆专场"
                android:textColor="#000000"
                android:textSize="14sp" />
        </RelativeLayout>
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/iv_produce"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_weight="1"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="当前价:¥189"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="¥899"
                android:textSize="12sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="开始06-18 18:00"
                android:textSize="12sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="#e000BE93"
            android:text="02:00:18"
            android:textSize="12sp" />
    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv_prod_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="5dp"
            android:text="兰蔻最新季护肤套装"
            android:textColor="#000000"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_baoming"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:text="报名"
            android:textColor="#1FDCAC"
            android:textSize="14sp" />
    </RelativeLayout>


    <ListView
        android:id="@+id/lv_more_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         android:dividerHeight="0.0dip"
         android:fadingEdge="none"
        android:visibility="gone" >
    </ListView>

小ListView Item 布局 一定要在布局外面加上LinearLayout,不然会抛异常。

<LinearLayout
        android:id="@+id/ll_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <View
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#F6F5F4" />



    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp" >

        <ImageView
            android:id="@+id/iv_more"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_weight="1"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="当前价:¥1189"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="¥899"
                android:textSize="12sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#e000BE93"
                android:padding="5dp"
                android:text="开始06-18 18:00"
                android:textSize="12sp" />
        </LinearLayout>

        <TextView
            android:layout_margin="10dp"
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#e000BE93"
            android:text="02:00:18"
            android:textSize="12sp" />
    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tv_more_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="5dp"
            android:text="兰蔻最新季护肤套装"
            android:textColor="#000000"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_baoming"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:text="报名"
            android:textColor="#1FDCAC"
            android:textSize="14sp" />
    </RelativeLayout>

</LinearLayout>

主要功能代码

数据的填充,为适配器Adapter准备数据

//填充数据
    private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();//Map集合填充数据

        String exlist_adapter = "1234";
        map.put("exlist_adapter", exlist_adapter);
        map.put("zhuanchang", "美妆专场");
        map.put("info", "兰蔻最新季护肤套装");
        map.put("img", R.drawable.pro);
        list.add(map);

点击展开,点击收起的代码

final TextView tv_control = (TextView) convertView.findViewById(R.id.tv_control);
                final TextView tv_baoming = (TextView) convertView.findViewById(R.id.tv_baoming);
                //默认隐藏的ListView
                final ListView listmore = (ListView) convertView
                        .findViewById(R.id.lv_more_list);//展开的布局

                tv_control.setOnClickListener(new OnClickListener() {
                    boolean isOpened = false;//改变展开状态
                    @Override
                    public void onClick(View v) {
                        if (!isOpened) {
                            listmore.setVisibility(View.VISIBLE);
                            tv_control.setText("收起");
                            isOpened = true;
                        }else {
                            listmore.setVisibility(View.GONE);
                            tv_control.setText("展开更多");
                            isOpened = false;
                        }

                    }
                });
                tv_baoming.setOnClickListener(new OnClickListener() {
   //报名按钮

                    @Override
                    public void onClick(View v) {
                        // TODO Auto-generated method stub

                    }
                });

在大ListView的适配器中要初始化要显示的ListView即点击展开的部分。setListViewHeightBasedOnChildren(listmore);为加载数据的时候根据条目动态设置ListView的高度。如果不进行次设置,会出现只显示一个条目的错误。

final ListView listmore = (ListView) convertView
                        .findViewById(R.id.lv_more_list);
Madapter madapter = new Madapter(getApplicationContext());

                listmore.setAdapter(madapter);
                setListViewHeightBasedOnChildren(listmore);

动态设置ListView的高度,主要就是获得所有Item的高度总和,设置给ListView即可



          ListAdapter listAdapter = listView.getAdapter();  

          if (listAdapter == null) {  
           return;  
          }  

          int totalHeight = 0;  

          for (int i = 0; i < listAdapter.getCount(); i++) {  
           View listItem = listAdapter.getView(i, null, listView);  
           listItem.measure(0, 0);  
           totalHeight += listItem.getMeasuredHeight();  
          }  

          ViewGroup.LayoutParams params = listView.getLayoutParams();  

          params.height = totalHeight  
            + (listView.getDividerHeight() * (listAdapter.getCount() - 1));  

          ((MarginLayoutParams) params).setMargins(10, 10, 10, 10); // 可删除  

          listView.setLayoutParams(params);  

至此功能实现。

点击源码下载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tsaopin/article/details/47338779

智能推荐

类成员的访问控制权限_类的成员的访问控制权限有哪几种_qingkongyeyue的博客-程序员秘密

1、class 前为什么必须要有public ?public只是class的一种修饰词,表示公开的类,既所有的类都可引入使用2、类成员的访问控制权限

第八章 统一草原_csxc65837的博客-程序员秘密

大唐双龙传 第八章 统一草原 两人钻入车厢,马车开行。 可达志笑道:“小弟不得不用此手段,皆因这里耳目众多,敌人的探子耳目若杂在街上行人里监视我们,神仙也难察觉。小弟将以种种方法,把跟踪者摆脱,认为绝对安全后...

基于GA优化的BP网络算法分析与MATLAB实现【matlab优化算法三】_张叔zhangshu的博客-程序员秘密

简介遗传算法基于GA优化BP网络大脑图像分割基于GA优化BP神经网络矿井通风计算

Win系统--VM10虚拟机安装Mac OS X10.10教程_weixin_34186950的博客-程序员秘密

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

scrollView frame改变时contentOffset会被重置或改变_gaoyuqiang30的博客-程序员秘密

最近做一个功能,当contentOffset改变后 会请求一个网络,当请求返回之后会刷新一下view的大小,然后就发现contentOffset不对了。这个问题查了好久,最后发现是因为我重置了scrollView的frame,即使两个frame是相同的,也会有这个问题。解决方法:先判断一个frame有没有改变if (!CGRectEqualToRect(scrollRect, _s

flask-user and flask-admin实现登录验证_来一份培根的博客-程序员秘密

前几天一直在想着如何能用flask-user对flask-admin进行登录验证通过两天的实验达到了目标(由于资料参考比较少所以花的时间多了些)flask-user 将flask-login整合了进来 因此 实现方式与flask-login有点相识下面是我的代码from flask import Flask,url_forfrom flask_sqlalchemy i...

随便推点

axis2生成客户端代码_axis2解析xml使用cmd方式生成客户端代码_Cages的博客-程序员秘密

Ø         AXIS_HOMED:/axis1_4Ø         AXIS_LIB%AXIS_HOME%/libØ         AXIS_CLASSPATHD:/axis1_4/lib/axis.jar;D:/axis1_4/lib/axis-ant.jar;D:/axis1_4/lib/commons-discovery-0.2.jar;D:/axis1_4/

表单序列化为json字符串_表单序列化成json_arrowV的博客-程序员秘密

通过$("#form").serialize()可以获取到序列化的表单值字符串。例如:a=1&b=2&c=3&d=4&e=5通过$("#form").serializeArray()输出以数组形式序列化表单值。[ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name:

SQL2005四个排名函数(row_number、rank、dense_rank和ntile)的比较_rank的相反函数_nb009网的博客-程序员秘密

排名函数是SQL Server2005新加的功能。在SQL Server2005中有如下四个排名函数:  1.row_number  2.rank  3.dense_rank  4.ntile  一、row_number  row_number函数的用途是非常广泛,这个函数的功能是为查询出来的每一行记录生成一个序号。       其中row_

okhttp的超时_JemyCheung的博客-程序员秘密

这里有个很尴尬的casehttps://github.com/qiniu/android-sdk/blob/5674a4ab5e983b359df91ca544f6b1a22d0423ff/library/src/main/java/com/qiniu/android/http/CountingRequestBody.java#L71ForwardingSink,实现了这个方法,okhttp内部的抽象方法。这个代码通过抛出异常的方式去中断/取消。从log信息看,这个位置应该是走到了throw new然

linux下c读写ini配置_linux c读写ini_boy_going的博客-程序员秘密

转载至:https://blog.csdn.net/niha1993825jian/article/details/41086403#include &lt;stdio.h&gt;#include &lt;errno.h&gt;#include &lt;ctype.h&gt;#include &lt;string.h&gt;#include &lt;stdlib.h&gt;#inc...

NLP笔记(一)——CNN在文本处理中的应用_lengjiayi的博客-程序员秘密

很不错的一篇TutorialUnderstanding Convolutional Neural Networks for NLP,把里面提及的论文整理了一下。Convolutional Neural Networks for Sentence Classification(ACL2014)感觉这应该是最早的一篇把CNN用于处理文本的论文,网络模型十分简单。模型直接在Word Vector...

推荐文章

热门文章

相关标签