仿京東或淘寶的訂單中心頁面

因為最近有用到類似京東訂單中心的功能，遂決定寫篇部落格做個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的版本，

如有問題，可留言或私信交流。