仿京东或淘宝的订单中心页面

因为最近有用到类似京东订单中心的功能，遂决定写篇博客做个Demo，如有问题可留言探讨。

先上效果图：

评价和删除订单功能都做了简单的实现。

开发这个功能主要用到了安卓中的ExpandlistView。ExpandlistView的使用跟ListView的使用类似，

如果对ExpandlistView的使用不太明白的同学可以参考网上的教程：

Android中ExpandableListView的使用（一）

现在我们将上面的页面做一个分析，

如图：

根据上图分析，我们便可以分别画出父布局的layout，和子布局的layout

父layout的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal" android:layout_width="match_parent"android:minHeight="40dp"android:layout_height="match_parent"android:gravity="center_vertical"android:background="@color/colorBackgroudParentView"><ImageViewandroid:layout_marginLeft="8dp"android:id="@+id/iv_parentview_icon"android:layout_width="wrap_content"android:layout_height="wrap_content" /><TextViewandroid:layout_marginLeft="8dp"android:id="@+id/tv_parentview_title"android:layout_width="wrap_content"android:layout_height="wrap_content" />
</LinearLayout>

子layout代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:minHeight="100dp"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="5dp"><TextViewandroid:layout_marginLeft="8dp"android:id="@+id/tv_childview_content"android:layout_width="wrap_content"android:layout_height="wrap_content" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="right"android:layout_alignParentBottom="true"><Buttonandroid:focusable="false"android:visibility="gone"android:id="@+id/btn_childview_evaluate"android:layout_marginRight="5dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="评价"/><Buttonandroid:focusable="false"android:visibility="gone"android:id="@+id/btn_childview_delete"android:layout_marginRight="5dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="删除订单"/></LinearLayout></RelativeLayout>

分析和布局代码都介绍完了我们就可以在activity中写代码啦

activity中代码：

public class MainActivity extends AppCompatActivity {private ExpandableListView elMainOrdercenter;private Map<String,List<OrderInfo>> dataMap;private String[] titleArr;private int[] iconArr=new int[]{R.mipmap.icon1,R.mipmap.icon2,R.mipmap.icon3};private MyAdapter myAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化数据initData();//初始化点击监听事件initOnclickListener();}/*** 初始化数据*/private void initData(){//初始化ExpandlistView的idelMainOrdercenter=(ExpandableListView)findViewById(R.id.el_main_ordercenter);//初始化列表数据，正常由服务器返回的Json数据initJsonData();myAdapter=new MyAdapter();elMainOrdercenter.setAdapter(myAdapter);//设置列表展开for(int i=0;i<dataMap.size();i++){elMainOrdercenter.expandGroup(i);}}/*** 初始点击事件*/private void initOnclickListener(){//设置父标题点击不能收缩elMainOrdercenter.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {@Overridepublic boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {return true;}});//订单子条目的点击事件elMainOrdercenter.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {@Overridepublic boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {Toast.makeText(MainActivity.this,"跳转到订单详细页面:"+childPosition,Toast.LENGTH_SHORT).show();return false;}});}/*** ExpandableListviewAdapter初始化*/private class MyAdapter extends BaseExpandableListAdapter{//  获得父项的数量@Overridepublic int getGroupCount() {return dataMap.size();}//  获得某个父项的子项数目@Overridepublic int getChildrenCount(int groupPosition) {return dataMap.get(titleArr[groupPosition]).size();}//  获得某个父项@Overridepublic Object getGroup(int groupPosition) {return dataMap.get(titleArr[groupPosition]);}//  获得某个父项的某个子项@Overridepublic Object getChild(int groupPosition, int childPosition) {return dataMap.get(titleArr[groupPosition]).get(childPosition);}//  获得某个父项的id@Overridepublic long getGroupId(int groupPosition) {return groupPosition;}//  获得某个父项的某个子项的id@Overridepublic long getChildId(int groupPosition, int childPosition) {return childPosition;}//  按函数的名字来理解应该是是否具有稳定的id，这个方法目前一直都是返回false，没有去改动过@Overridepublic boolean hasStableIds() {return false;}//  获得父项显示的view@Overridepublic View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {if(convertView==null){convertView=View.inflate(MainActivity.this,R.layout.parent_view,null);}ImageView ivParentviewIcon=(ImageView) convertView.findViewById(R.id.iv_parentview_icon);TextView tvParentviewTitle=(TextView) convertView.findViewById(R.id.tv_parentview_title);ivParentviewIcon.setImageResource(iconArr[groupPosition]);tvParentviewTitle.setText(titleArr[groupPosition]);return convertView;}//  获得子项显示的view@Overridepublic View getChildView(final int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {if(convertView==null){convertView=View.inflate(MainActivity.this,R.layout.child_view,null);}//获取布局控件idTextView tvChildviewContent=(TextView) convertView.findViewById(R.id.tv_childview_content);tvChildviewContent.setText(dataMap.get(titleArr[groupPosition]).get(childPosition).getName());Button btnChildviewDelete=(Button) convertView.findViewById(R.id.btn_childview_delete);Button btnChildviewEvaluate=(Button) convertView.findViewById(R.id.btn_childview_evaluate);//根据服务器返回的数据来显示和隐藏按钮final OrderInfo orderInfo=dataMap.get(titleArr[groupPosition]).get(childPosition);if(orderInfo.isEvaluateState()){btnChildviewEvaluate.setVisibility(View.VISIBLE);}else {btnChildviewEvaluate.setVisibility(View.GONE);}if(orderInfo.isDeleteState()){btnChildviewDelete.setVisibility(View.VISIBLE);}else {btnChildviewDelete.setVisibility(View.GONE);}//设置评价按钮的点击事件btnChildviewEvaluate.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this,"跳转到"+orderInfo.getName()+"的评价页面",Toast.LENGTH_SHORT).show();}});//设置删除按钮的点击事件btnChildviewDelete.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {dataMap.get(titleArr[groupPosition]).remove(childPosition);myAdapter.notifyDataSetChanged();}});return convertView;}//  子项是否可选中，如果需要设置子项的点击事件，需要返回true@Overridepublic boolean isChildSelectable(int groupPosition, int childPosition) {return true;}}/*** 初始化列表数据，正常由服务器返回的Json数据*/private void initJsonData(){dataMap=new HashMap<String,List<OrderInfo>>();titleArr=new String[]{"商城店铺1","商城店铺2","商城店铺3"};List<OrderInfo> list1=new ArrayList<OrderInfo>();List<OrderInfo> list2=new ArrayList<OrderInfo>();List<OrderInfo> list3=new ArrayList<OrderInfo>();OrderInfo orderInfo1=new OrderInfo();orderInfo1.setName(titleArr[0]+"_one");orderInfo1.setEvaluateState(true);orderInfo1.setDeleteState(false);OrderInfo orderInfo2=new OrderInfo();orderInfo2.setName(titleArr[0]+"_two");orderInfo2.setEvaluateState(false);orderInfo2.setDeleteState(true);OrderInfo orderInfo3=new OrderInfo();orderInfo3.setName(titleArr[0]+"_three");orderInfo3.setEvaluateState(true);orderInfo3.setDeleteState(true);OrderInfo orderInfo4=new OrderInfo();orderInfo4.setName(titleArr[1]+"_one");orderInfo4.setEvaluateState(true);orderInfo4.setDeleteState(false);OrderInfo orderInfo5=new OrderInfo();orderInfo5.setName(titleArr[1]+"_two");orderInfo5.setEvaluateState(false);orderInfo5.setDeleteState(true);OrderInfo orderInfo6=new OrderInfo();orderInfo6.setName(titleArr[2]+"_one");orderInfo6.setEvaluateState(true);orderInfo6.setDeleteState(false);OrderInfo orderInfo7=new OrderInfo();orderInfo7.setName(titleArr[2]+"_two");orderInfo7.setEvaluateState(false);orderInfo7.setDeleteState(true);OrderInfo orderInfo8=new OrderInfo();orderInfo8.setName(titleArr[2]+"_three");orderInfo8.setEvaluateState(true);orderInfo8.setDeleteState(true);OrderInfo orderInfo9=new OrderInfo();orderInfo9.setName(titleArr[2]+"_four");orderInfo9.setEvaluateState(false);orderInfo9.setDeleteState(false);list1.add(orderInfo1);list1.add(orderInfo2);list1.add(orderInfo3);list2.add(orderInfo4);list2.add(orderInfo5);list3.add(orderInfo6);list3.add(orderInfo7);list3.add(orderInfo8);list3.add(orderInfo9);dataMap.put(titleArr[0],list1);dataMap.put(titleArr[1],list2);dataMap.put(titleArr[2],list3);}
}

注释已经写得很明白了我就不做介绍了。到此一个简单的Demo制作完成。

当然ExpandlistView 与Listview类似，当加载数据很多的情况我们需要考虑对其优化。

考虑到增加优化代码会增加阅读难度，所以本文没有增加优化代码，有需要的同学可以自行添加。

使用ExpandableListView以及如何优化view的显示减少内存占用

本篇文章只给读者一个思路，订单中心还涉及到许多细节，可在此基础上慢慢展开。

最后附上Demo地址：https://github.com/OptimusMX/OrderCenterFragment

对你有帮助的话记得给个star。

有读者反馈fragment上遇到问题，遂增加了带fragment的版本，

如有问题，可留言或私信交流。

仿京东或淘宝的订单中心页面相关推荐

vue 实现仿京东、淘宝省市区三级联动
vue 实现仿京东.淘宝省市区三级联动在做电商或其他项目的时候,物流我们肯定会集成进去,那么我们肯定需要集成地址管理,地址管理除了最基本的省.市.区外,我们还要单独添加一个详细地址字段,不然我们无法 ...
仿京东、淘宝实现购物车（二级列表的形式）
本章仿京东.淘宝实现的形式是通过二级列表实现的,网络请求工具类是通过okHttp实现的本章使用到的依赖 //相关依赖//okhttpimplementation 'com.squareup.okht ...
仿京东、淘宝首页，通过两层嵌套的RecyclerView实现tab的吸顶效果
为什么会有这篇文章之前写过一篇文章使用CoordinatorLayout过程中遇到的两个问题以及浅析CoordinatorLayout工作机制,这篇文章上主要讲了通过CoordinatorLayou ...
Elasticsearch仿京东、淘宝APP客户端的商品侧边栏筛选条件过滤和分页列表查询的实现案例
目录需求分析项目环境 API接口实现需求分析通过Elasticsearch完成商品列表查询和分类.品牌.规格参数的分组聚合统计查询当用户输入关键字搜索后,查询出商品列表后点击右上角筛选按钮, ...
Android仿京东、淘宝商品详情页上拉查看更多详情
老规矩,先上图,没图说个J8 高清原图GIF图,请移步:https://github.com/kangkanger/SlideSeeMoreLayout/blob/master/screenshots ...
看京东和淘宝的地址薄设计----填写订单的场景下
本人在工作中碰到设计地址薄的工作,就是在填写订单的情况下填写地址.于是本着拿来主义,先参考京东和天猫的做法. 京东APP: 图1.订单页面--京东 ...
闲鱼代付|淘宝天猫订单监控|找人代付|淘宝代付源码/协议监控源码
闲鱼代付|淘宝天猫订单监控|找人代付|淘宝代付源码/协议监控源码 <head><meta charset="utf-8"> <title> 淘宝 ...
淘宝客订单同步，关联私域授权用户，给用户返分，流程是如何串起来的
淘宝客订单同步,关联用户,给用户返分整体实现流程: 提前完成: 渠道管理申请 .专属的推广位完成备案 .实现用户授权相关接口开放平台-文档中心 .实现绑定私域用户接口taobao.tbk.sc. ...
京东，淘宝开放平台初探
前提这几天遇到一个需求,就是要接入京东,天猫等订单,然后采用顺丰进行发货处理,首先最主要的就是先了解下京东,天猫的接入流程. 京东:http://jos.jd.com/doc/channel.htm ...

仿京东或淘宝的订单中心页面

仿京东或淘宝的订单中心页面相关推荐

最新文章

热门文章