因为最近有用到类似京东订单中心的功能，遂决定写篇博客做个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><?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);
}
}当然ExpandlistView 与Listview类似，当加载数据很多的情况我们需要考虑对其优化。
考虑到增加优化代码会增加阅读难度，所以本文没有增加优化代码，有需要的同学可以自行添加。
使用ExpandableListView以及如何优化view的显示减少内存占用
本篇文章只给读者一个思路，订单中心还涉及到许多细节，可在此基础上慢慢展开。
最后附上Demo地址：https://github.com/OptimusMX/OrderCenterFragment
对你有帮助的话记得给个star。
有读者反馈fragment上遇到问题，遂增加了带fragment的版本，
如有问题，可留言或私信交流。
扫一扫
2539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
