精美的仿微信底部菜单栏
网络请求失败时如何显示空View
那么,这一篇,我准备完成:
精美的订单追踪页面
fragment+viewpage实现完整订单查看模块
baseAdapter+下拉刷新
litepal数据库操作
其实到上一篇为止,我们的快速开发框架已经基本完成了。所以呢,接下来我准备在此基础上开发我们的一款APP—–玩快递
上面所说的准备完成的4部分其实我已经做完了,代码在Git上,所以这儿我只是带大家看一下,就不细说。
1、开门见山,看下什么是精美的订单追踪页面?
如上:我们使用 recycleview 来实现。
首先是一个自定义View,这个自定义 View 包含三部分,
beginline
mark
endline
代码在这里:
https://github.com/qht1003077897/AppFrame/blob/master/app/src/main/java/com/qht/blog2/View/TimeLineMarkerView.java
使用了自定义属性,以便在 adapter 中设置这三个位置的 drawable,比如图中的红点
如果已经签收,setbeginline(null); setmark(color.red);
如果在途中,则不用设置,使用 xml 中定义的即可。
如果是第一条信息,即为开始派件,则 setendline(null);
然后 View 的左边是订单时间,右边是具体信息,下面加了一条 height=1px的 view 作为分割线,并且设置 recycleview 的分割线为 null。
接下来看下我们 recycleview 所使用的 Adapter,考虑到 recycleview 的通用性,以及我们的订单页面使用的也是 recycleview,所以我们需要一个 BaseAdapter。
在 github上找了一个,算是比较强大的,并且作者一直在维护:RecycleViewBaseAdapter
看下我们是怎么用的,
/** * Created by QHT on 2017-04-12. * 订单详情页面 */ public class OrderDetail_RV_Adapter extends BaseQuickAdapter<OrderInfoDetailBean,BaseViewHolder> { private Context context; private TimeLineMarkerView timelineView; private String state; public OrderDetail_RV_Adapter(List<OrderInfoDetailBean> list,String state,Context context) { super(R.layout.activity_orderdetail_rv_item, list); this.context=context; this.state=state; } @Override protected void convert(BaseViewHolder helper, OrderInfoDetailBean item) { if(timelineView==null ) { timelineView = (TimeLineMarkerView) (helper.getView(R.id.tv_rv_activity_orderdetail_timelineview)); } if(helper.getItemViewType()==OrderSite.BEGIN){ timelineView.setBeginLine(null); helper.setTextColor(R.id.tv_rv_activity_orderdetail_time,context.getResources().getColor(R.color.red)); helper.setTextColor(R.id.tv_rv_activity_orderdetail_content,context.getResources().getColor(R.color.red)); timelineView.setMarkerDrawable(context.getResources().getDrawable(R.drawable.timeline_bg_red)); } else if(helper.getItemViewType()==OrderSite.END){ timelineView.setEndLine(null); } helper.setText(R.id.tv_rv_activity_orderdetail_content, item.getContext()); //分两行显示 helper.setText(R.id.tv_rv_activity_orderdetail_time, item.getTime().toString().substring(0,10)+"\n"+ item.getTime().toString().substring(10)); } @Override public int getItemViewType(int position) { if(position==0 && state.equals("3")){ return OrderSite.BEGIN; }else if(position==getItemCount()-1){ return OrderSite.END; } return super.getItemViewType(position); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
我们在 getItemViewType 类里面判断 item 的类型,返回不同的 int 值:
OrderSite.BEGIN 代表订单已经签收。
OrderSite.END 代表订单开始派发。
然后在convert 方法中对 viewtype 进行判断,若为签收状态,则不显示 beginline,且 mark 为红色标示;若为派单状态,则 endline 不显示。
2、接下来我们需要花很多时间看这个地方–订单列表 ↓