简介

在日常的开发中，有可能会遇到需要一些可以展开的列表，比如QQ的好友列表，电商的购物车折叠显示。Android也给我们提供ExpandableListView类，完美实现这样类似的需求, 极大的方便了我们开发。结合之前的项目我们做一个简单的讲解。
首先懒看一下最终的实现效果：

使用到的第三方框架：
AndroidAutoLayout 屏幕适配框架

代码

首先是布局需要用一个ExpandableListView，配合adapter就能实现上面额效果，直接上代码。
activity_main.xml

<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"><com.zhy.autolayout.AutoLinearLayoutandroid:id="@+id/ll_title_root"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#ec0f38"android:orientation="vertical"><com.zhy.autolayout.AutoFrameLayoutandroid:layout_width="match_parent"android:layout_height="88px"><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_gravity="center"android:gravity="center"android:text="优惠套餐"android:textColor="#ffffff"android:textSize="32px" /><com.zhy.autolayout.AutoLinearLayoutandroid:id="@+id/ll_back"android:layout_width="100px"android:layout_height="match_parent"android:clickable="true"android:gravity="center"><ImageViewandroid:id="@+id/iv_back"android:layout_width="44px"android:layout_height="44px"android:layout_gravity="center_vertical"android:src="@mipmap/icon_back" /></com.zhy.autolayout.AutoLinearLayout></com.zhy.autolayout.AutoFrameLayout></com.zhy.autolayout.AutoLinearLayout></android.support.design.widget.AppBarLayout><ExpandableListViewandroid:id="@+id/elv_collocation"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#eeeff3"android:divider="#eeeff3"android:dividerHeight="0dp"android:groupIndicator="@null"android:listSelector="@null" />
</com.zhy.autolayout.AutoLinearLayout>

MainActivity.java
默认展开第一个，collocation.expandGroup(0);当然更好的写法是将数据写到Controller中。

public class MainActivity extends AppCompatActivity {private ExpandableListView elv_collocation;private List<CollocationPackageBean> collocationList;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);elv_collocation = (ExpandableListView) findViewById(R.id.elv_collocation);initData();}private void initData() {collocationList = new ArrayList<>();CollocationPackageBean collocation_1 = new CollocationPackageBean();CollocationPackageBean collocation_2 = new CollocationPackageBean();collocation_1.setTotalPrice(new BigDecimal(897));collocation_1.setDiscountFee(new BigDecimal(20));collocation_1.setName("818国货套餐3");List<CollocationPackageBean.CollocationSkuBean> goodsList_1 = new ArrayList<>();goodsList_1.add(new CollocationPackageBean.CollocationSkuBean("Meizu/魅族 魅蓝 note3 全网通 手机 银白 16GB", "http://img11.hqbcdn.com/product/07/0a/070ac7abd57c6d9251d89547f3d62501.jpg"));goodsList_1.add(new CollocationPackageBean.CollocationSkuBean("VR PLUS 智能眼镜vr虚拟现实头盔 3D沉浸式 暴风魔镜 vr plus 智能头盔 白色", "http://img15.hqbcdn.com/product/c6/10/c610075082199955a8d5dcf2aa765b17.jpg"));collocation_1.setCollocationSkuDoList(goodsList_1);collocation_2.setTotalPrice(new BigDecimal(1034));collocation_2.setDiscountFee(new BigDecimal(26));collocation_2.setName("超值套餐");List<CollocationPackageBean.CollocationSkuBean> goodsList_2 = new ArrayList<>();goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Meizu/魅族 魅蓝 note3 全网通 手机 银白 16GB", "http://img11.hqbcdn.com/product/07/0a/070ac7abd57c6d9251d89547f3d62501.jpg"));goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Uka/优加 Meizu/魅族 魅蓝 note3全覆盖全屏钢化玻璃膜 白色", "http://img8.hqbcdn.com/product/9c/15/9c15571aa92905ea1edafb0a288f1ebb.jpg"));goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("SanDisk/闪迪 至尊高速MicroSDHC-TF移动存储卡 Class10-48MB/S 升级版 16G", "http://img14.hqbcdn.com/product/29/cd/29cda69f5036b38454b6592f96fde774.jpg"));goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Huawei/华为 AM116 金属耳机 三键线控耳机 尊爵版", "http://img9.hqbcdn.com/product/0a/90/0a905d9988c91fb0625d9ee44377c8e0.jpg"));goodsList_2.add(new CollocationPackageBean.CollocationSkuBean("Lesimo/梵简 初见系列10000毫安充电宝 手机平板通用 移动电源 黑色", "http://img11.hqbcdn.com/product/67/3a/673ac0343758ce64e97c2d9986cbbef3.jpg"));collocation_2.setCollocationSkuDoList(goodsList_2);collocationList.add(collocation_1);collocationList.add(collocation_2);elv_collocation.setAdapter(new CollocationListAdapter(this, elv_collocation, collocationList));elv_collocation.expandGroup(0);}
}

CollocationListAdapter.java
CollocationListAdapter负责数据的填充，主要注意两个方法：getGroupView和getChildView

public class CollocationListAdapter extends BaseExpandableListAdapter {private LayoutInflater inflater;private Context context;private ExpandableListView elv_collocation;private List<CollocationPackageBean> data;public CollocationListAdapter(Context context, ExpandableListView elv_collocation, List<CollocationPackageBean> data) {this.context = context;this.elv_collocation = elv_collocation;this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);this.data = data;}@Overridepublic int getGroupCount() {return data.size();}@Overridepublic int getChildrenCount(int groupPosition) {return data.get(groupPosition).getCollocationSkuDoList().size();}@Overridepublic Object getGroup(int groupPosition) {return data.get(groupPosition);}@Overridepublic Object getChild(int groupPosition, int childPosition) {return data.get(groupPosition).getCollocationSkuDoList().get(childPosition);}@Overridepublic long getGroupId(int groupPosition) {return groupPosition;}@Overridepublic long getChildId(int groupPosition, int childPosition) {return childPosition;}@Overridepublic boolean hasStableIds() {return true;}@Overridepublic boolean isChildSelectable(int groupPosition, int childPosition) {return true;//如果子条目需要响应click事件,必需返回true}@Overridepublic View getGroupView(final int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {ParentViewHolder parentViewHolder;if (null == convertView) {convertView = inflater.inflate(R.layout.collocation_list_item_parent, parent, false);parentViewHolder = new ParentViewHolder(convertView);convertView.setTag(parentViewHolder);AutoUtils.auto(convertView);} else {parentViewHolder = (ParentViewHolder) convertView.getTag();}CollocationPackageBean collocationPackageBean = data.get(groupPosition);parentViewHolder.tv_collocation_name.setText(TextUtils.isEmpty(collocationPackageBean.getName()) ? "优惠套餐" : collocationPackageBean.getName());parentViewHolder.tv_save_text.setText("立省￥" + collocationPackageBean.getDiscountFee());parentViewHolder.iv_status.setImageResource(isExpanded ? R.mipmap.icon_top : R.mipmap.icon_bottom);parentViewHolder.v_space.setVisibility(isExpanded ? View.GONE : View.VISIBLE);parentViewHolder.hsv_goods_list.setVisibility(isExpanded ? View.GONE : View.VISIBLE);parentViewHolder.hsv_goods_list.setFocusable(false);//设置后解决套餐无法正常展开的bugif (!isExpanded) {//设置套餐折叠时显示套餐商品的图片initGoodsImage(collocationPackageBean, parentViewHolder, groupPosition);}return convertView;}@Overridepublic View getChildView(final int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {ChildViewHolder childViewHolder;if (null == convertView) {convertView = inflater.inflate(R.layout.collocation_list_item_child, parent, false);childViewHolder = new ChildViewHolder(convertView);convertView.setTag(childViewHolder);AutoUtils.auto(convertView);} else {childViewHolder = (ChildViewHolder) convertView.getTag();}final CollocationPackageBean.CollocationSkuBean collocationSkuBean = data.get(groupPosition).getCollocationSkuDoList().get(childPosition);childViewHolder.sdv_goods_img.setImageURI(Uri.parse(collocationSkuBean.getImageMd5()));childViewHolder.tv_goods_title.setText(collocationSkuBean.getSkuTitle());childViewHolder.ll_root_view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//进入商品详情页操作}});if (childPosition == data.get(groupPosition).getCollocationSkuDoList().size() - 1) {//当前套餐的最后一个商品childViewHolder.ll_bottom.setVisibility(View.VISIBLE);childViewHolder.tv_collocation_price.setText(data.get(groupPosition).getTotalPrice().toString());childViewHolder.tv_add_cart.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//把套餐商品加入购物车操作}});} else {childViewHolder.ll_bottom.setVisibility(View.GONE);}return convertView;}class ParentViewHolder {private View v_space;private ImageView iv_status;private HorizontalScrollView hsv_goods_list;private TextView tv_collocation_name, tv_save_text;private ParentViewHolder (View view) {v_space = view.findViewById(R.id.v_space);iv_status = (ImageView) view.findViewById(R.id.iv_status);hsv_goods_list = (HorizontalScrollView) view.findViewById(R.id.hsv_goods_list);tv_collocation_name = (TextView) view.findViewById(R.id.tv_collocation_name);tv_save_text = (TextView) view.findViewById(R.id.tv_save_text);}}private class ChildViewHolder {private SimpleDraweeView sdv_goods_img;private LinearLayout ll_bottom, ll_root_view;private TextView tv_add_cart, tv_goods_title, tv_collocation_price;private ChildViewHolder (View view) {sdv_goods_img = (SimpleDraweeView) view.findViewById(R.id.sdv_goods_img);ll_bottom = (LinearLayout) view.findViewById(R.id.ll_bottom);ll_root_view = (LinearLayout) view.findViewById(R.id.ll_root_view);tv_add_cart = (TextView) view.findViewById(R.id.tv_add_cart);tv_goods_title = (TextView) view.findViewById(R.id.tv_goods_title);tv_collocation_price = (TextView) view.findViewById(R.id.tv_collocation_price);}}/*** 初始化并设置套餐折叠时的所有商品图片* @param collocationPackageBean* @param parentViewHolder* @param groupPosition*/private void initGoodsImage(CollocationPackageBean collocationPackageBean,ParentViewHolder parentViewHolder, final int groupPosition) {View collocationView;SimpleDraweeView sdv_cart_image;RelativeLayout rl_middle;LinearLayout rootview = new LinearLayout(context);for (int i = 0, len = collocationPackageBean.getCollocationSkuDoList().size(); i < len; i++) {collocationView = inflater.inflate(R.layout.item_gift_img, null);sdv_cart_image = (SimpleDraweeView) collocationView.findViewById(R.id.sdv_cart_image);rl_middle = (RelativeLayout) collocationView.findViewById(R.id.rl_middle);sdv_cart_image.setImageURI(Uri.parse(collocationPackageBean.getCollocationSkuDoList().get(i).getImageMd5()));rl_middle.setVisibility(View.INVISIBLE);collocationView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//手动实现展开操作elv_collocation.expandGroup(groupPosition);}});AutoUtils.auto(collocationView);rootview.addView(collocationView);}parentViewHolder.hsv_goods_list.removeAllViews();parentViewHolder.hsv_goods_list.addView(rootview);}
}

collocation_list_item_child.xml
子布局

<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:fresco="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"android:clickable="true"android:orientation="vertical"><com.zhy.autolayout.AutoLinearLayoutandroid:id="@+id/ll_root_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/selector_me_bg_item"android:paddingBottom="28px"android:paddingLeft="24px"android:paddingRight="24px"android:paddingTop="30px"><com.facebook.drawee.view.SimpleDraweeViewandroid:id="@+id/sdv_goods_img"android:layout_width="120px"android:layout_height="120px"android:background="@drawable/shape_cart_goods_border"android:padding="1dp"fresco:placeholderImage="@mipmap/icon_loading_bg" /><TextViewandroid:id="@+id/tv_goods_title"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginLeft="20px"android:layout_weight="1"android:ellipsize="end"android:maxLines="2"android:textColor="#222222"android:textSize="30px" /><Viewandroid:layout_width="118px"android:layout_height="1px" /><ImageViewandroid:layout_width="18px"android:layout_height="28px"android:src="@mipmap/icon_right" /></com.zhy.autolayout.AutoLinearLayout><Viewandroid:layout_width="match_parent"android:layout_height="1px"android:layout_marginLeft="24px"android:background="#dddddd" /><com.zhy.autolayout.AutoLinearLayoutandroid:id="@+id/ll_bottom"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><com.zhy.autolayout.AutoLinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical"android:paddingLeft="24px"android:paddingRight="24px"android:paddingTop="20px"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="套餐价格:"android:textColor="#888888"android:textSize="30px" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20px"android:text="￥"android:textColor="#ec0f38"android:textSize="22px" /><TextViewandroid:id="@+id/tv_collocation_price"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ec0f38"android:textSize="30px" /><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:layout_weight="1" /><TextViewandroid:id="@+id/tv_add_cart"android:layout_width="180px"android:layout_height="50px"android:background="@drawable/selector_add_cart_red_btn"android:gravity="center"android:text="加入购物车"android:textColor="@drawable/selector_add_cart_red_tv"android:textSize="28px" /></com.zhy.autolayout.AutoLinearLayout><Viewandroid:layout_width="match_parent"android:layout_height="20px"android:layout_marginTop="20px"android:background="#eeeff3" /></com.zhy.autolayout.AutoLinearLayout>
</com.zhy.autolayout.AutoLinearLayout>

collocation_list_item_parent.xml
父布局

<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"android:orientation="vertical"android:paddingTop="20px"><com.zhy.autolayout.AutoLinearLayoutandroid:layout_width="match_parent"android:layout_height="50px"android:layout_marginBottom="30px"android:gravity="center_vertical"android:paddingLeft="24px"android:paddingRight="24px"><TextViewandroid:id="@+id/tv_collocation_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#222222"android:textSize="30px" /><TextViewandroid:id="@+id/tv_save_text"android:layout_width="wrap_content"android:layout_height="40px"android:layout_marginLeft="20px"android:background="@drawable/shape_save_money"android:gravity="center"android:paddingLeft="18px"android:paddingRight="18px"android:textColor="#ffffff"android:textSize="24px" /><Viewandroid:layout_width="0dp"android:layout_height="1px"android:layout_weight="1" /><ImageViewandroid:id="@+id/iv_status"android:layout_width="28px"android:layout_height="18px"android:layout_gravity="right|center_vertical"android:src="@mipmap/icon_top" /></com.zhy.autolayout.AutoLinearLayout><HorizontalScrollViewandroid:id="@+id/hsv_goods_list"android:layout_width="match_parent"android:layout_height="wrap_content"android:paddingLeft="24px"android:scrollbars="none" /><Viewandroid:id="@+id/v_space"android:layout_width="match_parent"android:layout_height="20px"android:layout_marginTop="20px"android:background="#eeeff3"android:visibility="gone" />
</com.zhy.autolayout.AutoLinearLayout>

这样就基本实现了。源码地址

ExpandableListView实现商品列表折叠相关推荐

java列表展开折叠,Android在开发中的实用技巧之ExpandableListView简单实现商品列表折叠...
根据已上线的app里总结出来的实用小技巧一.简介在日常开发,有可能会遇到需要一些可以展开的列表,比如QQ的好友列表.但是,用Android的该怎么做呢?其实在我没有接触过ExpandableLis ...
（转）淘淘商城系列——MyBatis分页插件(PageHelper)的使用以及商品列表展示
http://blog.csdn.net/yerenyuan_pku/article/details/72774381 上文我们实现了展示后台页面的功能,而本文我们实现的主要功能是展示商品列表,大家要 ...
淘宝商品详情页API接口、淘宝商品销量API接口、淘宝商品列表API接口、淘宝APP详情API接口、淘宝详情API接口
大家都知道,淘宝的反爬虫机制十分严,而很多时候,没办法高效的拿到数据内容响应终端需求,而依赖爬虫就会造成动不动就出现滑块验证,让人很无解,正好,公司有这样的需求,让我负责解决这个问题,刚开始各种尝试, ...
淘宝 item_recommend - 获取推荐商品列表
item_recommend - 获取推荐商品列表测试网址:http://console.open.onebound.cn/console/?i=eidi Result Object: ------ ...
淘宝商品详情页接口,淘宝实时销量接口，淘宝商品列表接口，淘宝APP详情接口，H5商品详情接口
采集淘宝商品列表和商品详情及淘宝实时销量遇到滑块验证码的解决方法(带SKU和商品描述,可高并发),主要是解决了高频情况下的阿里系滑块和必须要N多小号才能解决的反扒问题,以后都可以使用以下的方法: 大家 ...
淘宝商品列表接口和商品详情接口（带SKU和商品描述，可高并发，解决滑块）
通过API接口采集淘宝商品列表和商品详情遇到滑块验证码的解决方法(带SKU和商品描述,可高并发),主要是解决了高频情况下的阿里系滑块和必须要N多小号才能解决的反扒问题,以后都可以使用本方法: 大家都知 ...
如何通过API接口从淘宝（或天猫店）复制宝贝到拼多多（商品详情，商品销量，商品列表，商品主图，商品sku）接口代码对接教程
如何通过API接口从淘宝(或天猫店)复制宝贝到拼多多(商品详情,商品销量,商品列表,商品主图,商品sku)接口代码对接教程如下: 1.公共参数名称类型必须描述 key String 是调用k ...
淘宝商品详情页API接口、淘宝商品列表API接口，淘宝商品销量API接口，淘宝APP详情API接口，淘宝详情API接口
淘宝商品列表和商品详情及淘宝实时销量采集遇到滑块验证码的解决方法(带SKU和商品描述,可高并发),主要是解决了高频情况下的阿里系滑块和必须要N多小号才能解决的反扒问题,以后都可以使用以下的方法,包括淘 ...
android天猫app首页布局,仿天猫App实现商品列表布局切换效果
昨天有朋友问了我这样一个需求,就是在天猫App中首页进入搜索界面,搜索出的商品页中,有一个按钮可以切换商品列表的布局.没有用过或者用的少天猫App的赶紧下载体验下(哈哈,给天猫打个广告~).如果你很懒 ...

ExpandableListView实现商品列表折叠

简介

代码

ExpandableListView实现商品列表折叠相关推荐

最新文章

热门文章