Android高仿淘宝订单列表效果，列表中嵌套列表

Android高仿淘宝订单列表效果，列表中加列表，带刷新功能的列表嵌套列表

首先来看看效果图

是不是很熟悉？没错就是淘宝的订单页面

一开始看到的第一感觉是在RecyclerView中嵌套RecyclerView，一想到嵌套就完了，当然了也有大牛用嵌套很熟练的，本文采用iOS中的分组的概念进行拆分，一听是不是觉得很麻烦，其实也不麻烦，先来看看一张拆分图

如图所示，就是把一个item拆分为三个部分，Top，Content，Bottom
其实最主要的就是RecyclerView的adapter下面上代码

/*** @CreateDate: 2020/12/31* @Author:lp* @Description:*/
public class StoreAllOrderAdapter extends RecyclerView.Adapter<StoreAllOrderAdapter.BaseViewHolder> {List<Object> list;//自定义item的点击事件接口private OnRecyclerItemClick onRecyclerItemClick;public StoreAllOrderAdapter(List<Object> list) {this.list = list;}public void setOnRecyclerItemClick(OnRecyclerItemClick onRecyclerItemClick) {this.onRecyclerItemClick = onRecyclerItemClick;}@Overridepublic BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {BaseViewHolder vh = null;switch (viewType) {case 0:return new TopHolder(inflate(parent, R.layout.item_s_top));case 1:return new BottomHolder(inflate(parent, R.layout.item_s_bottom));case 2:return new GoodsHolder(inflate(parent, R.layout.item_s_in));}return vh;}@Overridepublic void onBindViewHolder(BaseViewHolder holder, int position) {holder.bindData(list.get(position), position);}@Overridepublic int getItemCount() {return list == null ? 0 : list.size();}@Overridepublic int getItemViewType(int position) {Object content = list.get(position);if (content instanceof TopBean) {return 0;}if (content instanceof BottomBean) {return 1;}return 2;}private View inflate(ViewGroup parent, int layout) {return LayoutInflater.from(parent.getContext()).inflate(layout, parent, false);}public abstract class BaseViewHolder<DATA> extends RecyclerView.ViewHolder {public BaseViewHolder(View itemView) {super(itemView);}public abstract void bindData(DATA data, int position);}/*** top部分*/public class TopHolder extends BaseViewHolder<TopBean> {LinearLayout linearLayout;public TopHolder(View itemView) {super(itemView);linearLayout = itemView.findViewById(R.id.ist_ll);}@Overridepublic void bindData(TopBean itemOrderTop, int position) {//TODO 处理数据linearLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (onRecyclerItemClick != null) {onRecyclerItemClick.onItemChildClick(StoreAllOrderAdapter.this, v, itemOrderTop.getPosition());}}});}}/*** Bottom部分*/public class BottomHolder extends BaseViewHolder<BottomBean> {TextView rightTV;TextView leftTV;public BottomHolder(View itemView) {super(itemView);rightTV = itemView.findViewById(R.id.isb_right);leftTV = itemView.findViewById(R.id.isb_left);}@Overridepublic void bindData(BottomBean itemOrderTop, int position) {//TODO 处理数据rightTV.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (onRecyclerItemClick != null) {onRecyclerItemClick.onItemChildClick(StoreAllOrderAdapter.this, v, itemOrderTop.getPosition());}}});leftTV.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (onRecyclerItemClick != null) {onRecyclerItemClick.onItemChildClick(StoreAllOrderAdapter.this, v, itemOrderTop.getPosition());}}});}}/*** content部分*/public class GoodsHolder extends BaseViewHolder<OrderBean> {LinearLayout itemLL;public GoodsHolder(View itemView) {super(itemView);itemLL = itemView.findViewById(R.id.isi_ll);}@Overridepublic void bindData(OrderBean orderBean, int position) {itemLL.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (onRecyclerItemClick != null) {onRecyclerItemClick.onItemChildClick(StoreAllOrderAdapter.this, v, position);}}});}}
}

OnRecyclerItemClick是自定义的一个Item点击事件的接口

/*** @CreateDate: 2021/1/5* @Author:lp* @Description: 自定义点击事件*/
public interface OnRecyclerItemClick{void onItemChildClick(StoreAllOrderAdapter adapter, View view, int position);
}

三个布局文件
item_s_top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="@dimen/dp_10"android:layout_marginTop="@dimen/dp_12"android:id="@+id/ist_ll"android:background="@drawable/bg_ff_r8_r8_r0_r0"android:orientation="vertical"></LinearLayout>

item_s_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/bg_ff_r0_r0_r8_r8"android:paddingRight="@dimen/dp_7"android:orientation="vertical"android:paddingBottom="@dimen/dp_10"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dp_10"android:layout_marginBottom="@dimen/dp_15"android:gravity="center_vertical|right"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="总价"android:textColor="@color/color_99"android:textSize="@dimen/sp_15" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/dp_4"android:layout_marginRight="@dimen/dp_4"android:text="￥"android:textColor="@color/color_99"android:textSize="@dimen/sp_12" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="0.00"android:textColor="@color/color_99"android:textSize="@dimen/sp_15" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/dp_16"android:text="实付款"android:textColor="@color/color_33"android:textSize="@dimen/sp_15" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/dp_4"android:layout_marginRight="@dimen/dp_4"android:text="￥"android:textColor="@color/color_33"android:textSize="@dimen/sp_12" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="0.00"android:textColor="@color/color_33"android:textSize="@dimen/sp_15" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical|right"android:orientation="horizontal"><TextViewandroid:id="@+id/isb_left"android:layout_width="wrap_content"android:layout_height="@dimen/dp_29"android:background="@drawable/bg_99_r15"android:gravity="center"android:paddingLeft="@dimen/dp_17"android:paddingRight="@dimen/dp_17"android:text="查看物流"android:textColor="@color/color_33"android:textSize="@dimen/sp_13" /><TextViewandroid:id="@+id/isb_right"android:clickable="true"android:layout_width="wrap_content"android:layout_height="@dimen/dp_29"android:layout_marginLeft="@dimen/dp_10"android:background="@drawable/bg_3890f9_r15"android:gravity="center"android:paddingLeft="@dimen/dp_17"android:paddingRight="@dimen/dp_17"android:text="确定收货"android:textColor="@color/color_3890F9"android:textSize="@dimen/sp_13" /></LinearLayout></LinearLayout>

item_s_in.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:id="@+id/isi_ll"android:layout_height="wrap_content"android:background="@color/color_FF"android:orientation="horizontal"android:paddingLeft="@dimen/dp_12"android:paddingTop="@dimen/dp_8"android:paddingRight="@dimen/dp_12"><ImageViewandroid:layout_width="@dimen/dp_90"android:layout_height="@dimen/dp_90"android:src="@mipmap/warm_icon" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="@dimen/dp_10"android:layout_weight="1"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:ellipsize="end"android:lines="2"android:text="金意车载空气净化器太阳能除甲醛汽车内用算法的发放沙发撒的发"android:textColor="@color/color_33"android:textSize="@dimen/sp_14" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dp_3"android:text="黑色；XL"android:textColor="@color/color_99"android:textSize="@dimen/sp_12" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="@dimen/dp_90"android:orientation="vertical"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:gravity="bottom"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="@dimen/dp_3"android:text="￥"android:textColor="@color/color_33"android:textSize="@dimen/sp_12" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:ellipsize="end"android:lines="1"android:maxWidth="@dimen/dp_140"android:text="0.00"android:textColor="@color/color_33"android:textSize="@dimen/sp_15" /></LinearLayout><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="x1"android:textColor="@color/color_99"android:textSize="@dimen/sp_12" /><Viewandroid:layout_width="@dimen/dp_0"android:layout_height="@dimen/dp_0"android:layout_weight="1" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:text="卖家已发货"android:textColor="@color/color_3890F9"android:textSize="@dimen/sp_13" /></LinearLayout>
</LinearLayout>

里面的一些冗余资源文件就不上传了，浪费空间，可以随便找找就行

TopBean.java

public class TopBean {int position;public TopBean() {}public TopBean(int position) {this.position = position;}public int getPosition() {return position;}public void setPosition(int position) {this.position = position;}
}

BottomBean.java 以及OrderBean.java都和TopBean一样只是类名不一样而已，这里就不多于上传了，主要看功能需求，这里说一下为什么我要在三个实体类中添加一个position属性，主要就是为了区分在点击的时候是列表的位置，因为现在这个adapter是top一个item，内容是1+个item，底部是一个item，所以点击的时候是区分不了是列表的哪个位置如图：

因此在属性中添加了position标识数据，当然大家可能有更好的方案，这里赶项目就先这样写吧，后期在优化啦

这里写了一个初始化的方法，主要是看看数据格式：

 private void initData2() {//一般都是从服务器拿过来的数据，这里随便写测试数据List<List<OrderBean>> orderList = new ArrayList<>();for (int i = 0; i < 15; i++) {List<OrderBean> orderGroup = new ArrayList<>();for (int k = 0; k < i + 1; k++) {OrderBean orderBean = new OrderBean();orderGroup.add(orderBean);}orderList.add(orderGroup);}//拆分数据if (orderList != null) {for (int i = 0; i < orderList.size(); i++) {orderContents2.add(new TopBean(i));orderContents2.addAll(orderList.get(i));orderContents2.add(new BottomBean(i));}}allOrderAdapter.notifyDataSetChanged();}

adapter的点击事件：

  allOrderAdapter.setOnRecyclerItemClick(new OnRecyclerItemClick() {@Overridepublic void onItemChildClick(StoreAllOrderAdapter adapter, View view, int position) {switch (view.getId()) {case R.id.ist_ll:showErrorToast("点击头部 item：" + position);break;case R.id.isb_right:showErrorToast("点击底部蓝色按钮  item：" + position);break;case R.id.isb_left:showErrorToast("点击底部灰色按钮  item：" + position);break;case R.id.isi_ll:showErrorToast("点击条目" + position);break;}}});

到这里基本也就结束啦，后期在优化吧

Android高仿淘宝订单列表效果，列表中嵌套列表相关推荐

Android/安卓仿淘宝直播点赞效果/qq空间点赞效果动画
之前玩淘宝误入它的直播频道,发现它的直播界面的点赞效果挺好看,然后发现QQ控件点赞有类似动画,于是趁有空花了点时间玩玩. 先上个效果图: 添加了一个按钮模拟点赞,点击多少次就出现多个水果,他们的运动轨 ...
android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
高仿淘宝分页:jQuery分页插件kkpager-Array-专题视频课程
高仿淘宝分页:jQuery分页插件kkpager-503人已学习课程介绍天底下万能的分页课程收益让所有人不再为分页所苦恼讲师介绍 Array 更多讲师课程 ...
微信小程序三级分类（高仿淘宝页面分类）
** 三级分类(高仿淘宝页面分类) ** 初步的二级页面参考的这个文章的代码:https://blog.csdn.net/luowei85520/article/details/90510311 这个 ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
伯乐发卡系统高级版源码高仿淘宝模板带用户中心
介绍: 内置高仿淘宝模板,带用户中心分销代理等等推荐使用宝塔面板安装,设置运行目录为public,测试环境为php7.0 mysql5.5 伪静态选择为thinkphp 授权已经去了,后台是/h ...
Android一点仿淘宝购物车动画
首先看看ios上的淘宝购物车的动画效果ios淘宝购物车动画我们实现的效果看特效是分为两个界面,一个是主view,一个是弹出层.弹出层是用dialog实现的,只是加入了弹出的动画,这里就不分析了,我 ...
仿淘宝图片局部放大效果
本人前端小白一枚做了个仿淘宝的图片放大效果与大家分享一下,还望大神批评主要思路是水平放两个同等大小的div用来分别盛放原图和放大后的图片.下图所示在img1和img2中放入相同的图片,div2 ...
H5高仿淘宝(html模板)
[实例截图] [核心代码] H5仿淘宝移动端大型综合购物商城app模板 ├── car.html ├── class.html ├── find.html ├── index.html ├── my- ...

Android高仿淘宝订单列表效果，列表中嵌套列表

Android高仿淘宝订单列表效果，列表中嵌套列表相关推荐

最新文章

热门文章