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

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

先上效果图：

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

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

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

Android中ExpandableListView的使用（一）

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

如图：

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

父layout的代码：

子layout代码：

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

activity中代码：

public class MainActivity extends AppCompatActivity {

    private ExpandableListView elMainOrdercenter;
    private Map> dataMap;
    private String[] titleArr;
    private int[] iconArr=new int[]{R.mipmap.icon1,R.mipmap.icon2,R.mipmap.icon3};
    private MyAdapter myAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化数据
        initData();
        //初始化点击监听事件
        initOnclickListener();
    }

    /**
     * 初始化数据
     */
    private void initData(){
        //初始化ExpandlistView的id
        elMainOrdercenter=(ExpandableListView)findViewById(R.id.el_main_ordercenter);
        //初始化列表数据，正常由服务器返回的Json数据
        initJsonData();
        myAdapter=new MyAdapter();
        elMainOrdercenter.setAdapter(myAdapter);
        //设置列表展开
        for(int i=0;i>();
        titleArr=new String[]{"商城店铺1","商城店铺2","商城店铺3"};
        List list1=new ArrayList();
        List list2=new ArrayList();
        List list3=new ArrayList();
        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的版本，

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