java列表展开折叠,Android在开发中的实用技巧之ExpandableListView简单实现商品列表折叠...

根据已上线的app里总结出来的实用小技巧

一、简介

在日常开发,有可能会遇到需要一些可以展开的列表,比如QQ的好友列表。但是,用Android的该怎么做呢?其实在我没有接触过ExpandableListView类之前,都是自定义控件继承于ListView或者ListView嵌套ListView来实现的, 当然也不推荐大家这样使用, 这样使用会降低app页面的加载速度和性能. 然后,后来发现了Android也给我们提供了ExpandableListView类,完美实现这样类似的需求, 极大的方便了我们开发.

二、使用

开发工具:

Android Studio

使用的第三方框架:

Demo来自某个线上电商app的页面, 使用前先看看效果图

75efb5ac3c7a

example.gif

activity_main.xml

使用AppBarLayout 来作为标题, 是因为有阴影效果, 看着还不错

是一个实现第三方适配的控件

ExpandableListView里的android:groupIndicator="@null"功能是去除掉默认的关闭和打开状态的图片(系统默认的不好看)

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/ll_title_root"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ec0f38"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="88px">

android: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" />

android:id="@+id/ll_back"

android:layout_width="100px"

android:layout_height="match_parent"

android:clickable="true"

android:gravity="center">

android:id="@+id/iv_back"

android:layout_width="44px"

android:layout_height="44px"

android:layout_gravity="center_vertical"

android:src="@mipmap/icon_back" />

android: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" />

MainActivity.java

初始化数据

elv_collocation.expandGroup(0);默认展开第一个

public class MainActivity extends AppCompatActivity {

private ExpandableListView elv_collocation;

private List collocationList;

@Override

protected 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 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 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

ExpandableListView的适配器需要继承自该控件特有的适配器BaseExpandableListAdapter

public class CollocationListAdapter extends BaseExpandableListAdapter {

private LayoutInflater inflater;

private Context context;

private ExpandableListView elv_collocation;

private List data;

public CollocationListAdapter(Context context, ExpandableListView elv_collocation, List data) {

this.context = context;

this.elv_collocation = elv_collocation;

this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.data = data;

}

@Override

public int getGroupCount() {

return data.size();

}

@Override

public int getChildrenCount(int groupPosition) {

return data.get(groupPosition).getCollocationSkuDoList().size();

}

@Override

public Object getGroup(int groupPosition) {

return data.get(groupPosition);

}

@Override

public Object getChild(int groupPosition, int childPosition) {

return data.get(groupPosition).getCollocationSkuDoList().get(childPosition);

}

@Override

public long getGroupId(int groupPosition) {

return groupPosition;

}

@Override

public long getChildId(int groupPosition, int childPosition) {

return childPosition;

}

@Override

public boolean hasStableIds() {

return true;

}

@Override

public boolean isChildSelectable(int groupPosition, int childPosition) {

return true;//如果子条目需要响应click事件,必需返回true

}

@Override

public 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);//设置后解决套餐无法正常展开的bug

if (!isExpanded) {

//设置套餐折叠时显示套餐商品的图片

initGoodsImage(collocationPackageBean, parentViewHolder, groupPosition);

}

return convertView;

}

@Override

public 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() {

@Override

public 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() {

@Override

public 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() {

@Override

public 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

套餐子布局

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">

android: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">

android: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" />

android: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" />

android:layout_width="118px"

android:layout_height="1px" />

android:layout_width="18px"

android:layout_height="28px"

android:src="@mipmap/icon_right" />

android:layout_width="match_parent"

android:layout_height="1px"

android:layout_marginLeft="24px"

android:background="#dddddd" />

android:id="@+id/ll_bottom"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:paddingLeft="24px"

android:paddingRight="24px"

android:paddingTop="20px">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="套餐价格:"

android:textColor="#888888"

android:textSize="30px" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20px"

android:text="¥"

android:textColor="#ec0f38"

android:textSize="22px" />

android:id="@+id/tv_collocation_price"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#ec0f38"

android:textSize="30px" />

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_weight="1" />

android: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" />

android:layout_width="match_parent"

android:layout_height="20px"

android:layout_marginTop="20px"

android:background="#eeeff3" />

collocation_list_item_parent.xml

套餐父布局

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffff"

android:orientation="vertical"

android:paddingTop="20px">

android:layout_width="match_parent"

android:layout_height="50px"

android:layout_marginBottom="30px"

android:gravity="center_vertical"

android:paddingLeft="24px"

android:paddingRight="24px">

android:id="@+id/tv_collocation_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#222222"

android:textSize="30px" />

android: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" />

android:layout_width="0dp"

android:layout_height="1px"

android:layout_weight="1" />

android:id="@+id/iv_status"

android:layout_width="28px"

android:layout_height="18px"

android:layout_gravity="right|center_vertical"

android:src="@mipmap/icon_top" />

android:id="@+id/hsv_goods_list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingLeft="24px"

android:scrollbars="none" />

android:id="@+id/v_space"

android:layout_width="match_parent"

android:layout_height="20px"

android:layout_marginTop="20px"

android:background="#eeeff3"

android:visibility="gone" />

item_gift_img.xml

图片item布局

SimpleDraweeView是Fresco里的控件, 显示网络图片

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:fresco="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="bottom"

android:orientation="horizontal">

android:id="@+id/sdv_cart_image"

android:layout_width="126px"

android:layout_height="126px"

android:background="@drawable/shape_cart_goods_border"

android:padding="1px"

android:scaleType="fitXY"

fresco:placeholderImage="@mipmap/icon_loading_bg"

fresco:progressBarImage="@mipmap/icon_loading_bg" />

android:id="@+id/rl_middle"

android:layout_width="wrap_content"

android:layout_height="126px"

android:layout_marginLeft="13px"

android:layout_marginRight="13px"

android:orientation="vertical">

android:id="@+id/tv_gift_goods_num"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_gravity="bottom"

android:text="x1"

android:textColor="#ec0f38"

android:textSize="26px" />

CollocationPackageBean.java

存放数据的bean

public class CollocationPackageBean {

private BigDecimal totalPrice;

private String name;

private List collocationSkuDoList;

private BigDecimal discountFee;

public static class CollocationSkuBean {

private String skuTitle;

private String imageMd5;

public CollocationSkuBean(String skuTitle, String imageMd5) {

this.skuTitle = skuTitle;

this.imageMd5 = imageMd5;

}

set...

get..

}

set...

get...

}

几个主要的文件就这几个

其他哪些shape, selector文件之类的就没有必要贴上来了

需要要看详细的代码看这里

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值