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

因为最近有用到类似京东订单中心的功能,遂决定写篇博客做个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">
    <ImageView
        android:layout_marginLeft="8dp"
        android:id="@+id/iv_parentview_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android: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">
    <TextView
        android:layout_marginLeft="8dp"
        android:id="@+id/tv_childview_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_alignParentBottom="true"
        >
        <Button
            android: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="评价"/>
        <Button
            android: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;
    @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<dataMap.size();i++){
            elMainOrdercenter.expandGroup(i);
        }
    }
    /**
     * 初始点击事件
     */
    private void initOnclickListener(){
        //设置父标题点击不能收缩
        elMainOrdercenter.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                return true;
            }
        });
        //订单子条目的点击事件
        elMainOrdercenter.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public 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{
        //  获得父项的数量
        @Override
        public int getGroupCount() {
            return dataMap.size();
        }
        //  获得某个父项的子项数目
        @Override
        public int getChildrenCount(int groupPosition) {
            return dataMap.get(titleArr[groupPosition]).size();
        }
        //  获得某个父项
        @Override
        public Object getGroup(int groupPosition) {
            return dataMap.get(titleArr[groupPosition]);
        }
        //  获得某个父项的某个子项
        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return dataMap.get(titleArr[groupPosition]).get(childPosition);
        }
        //  获得某个父项的id
        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }
        //  获得某个父项的某个子项的id
        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
        //  按函数的名字来理解应该是是否具有稳定的id,这个方法目前一直都是返回false,没有去改动过
        @Override
        public boolean hasStableIds() {
            return false;
        }
        //  获得父项显示的view
        @Override
        public 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
        @Override
        public 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);
            }
            //获取布局控件id
            TextView 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() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this,"跳转到"+orderInfo.getName()+"的评价页面",Toast.LENGTH_SHORT).show();
                }
            });
            //设置删除按钮的点击事件
            btnChildviewDelete.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dataMap.get(titleArr[groupPosition]).remove(childPosition);
                    myAdapter.notifyDataSetChanged();
                }
            });
            return convertView;
        }
        //  子项是否可选中,如果需要设置子项的点击事件,需要返回true
        @Override
        public 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的版本,


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


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页