物流配送頁(yè)面。主要使用RecycleView實(shí)現(xiàn)挖息。通過(guò)判斷將條目的第一條進(jìn)行特殊處理掉丽。日后復(fù)制粘貼備用签孔。效果圖如下:
可以通過(guò)各個(gè)view的相對(duì)位置來(lái)實(shí)現(xiàn)啊,比如那一條豎線(xiàn)可以用imageview來(lái)實(shí)現(xiàn),那個(gè)圓點(diǎn)也可以用imageview實(shí)現(xiàn)啊,唯一不同的就是豎線(xiàn)的view是穿過(guò)灰色的圓view的,而position為0的豎線(xiàn)是不穿過(guò)藍(lán)色的圓view的,這個(gè)也有辦法搞定,在adapter里面單獨(dú)處理,設(shè)置他們的相對(duì)位置!
1. 先做兩個(gè)shape圓。
一個(gè)灰色的一個(gè)紅色的华临。(也可以使用圖片資源)
紅色圓 logistics_shape_circle_red:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ff4143" />
<stroke
android:width="2dp"
android:color="#ff7471" />
</shape>
灰色圓 shape_circle_logistics_gray:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#dddddd" />
</shape>
2. 設(shè)置每個(gè)條目的布局芯杀。
logistics_recycle_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--左邊 時(shí)間-->
<TextView
android:id="@+id/tv_time"
android:layout_width="85dp"
android:layout_height="match_parent"
android:layout_marginLeft="14dp"
android:gravity="center"
android:lines="2"
android:text="2016-10-12 08:02:18"
android:textColor="@color/gray9"
android:textSize="16sp" />
<!--中間 時(shí)間軸-->
<RelativeLayout
android:id="@+id/rl_left"
android:layout_width="35dp"
android:layout_height="86dp">
<ImageView
android:id="@+id/iv_status"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerInParent="true" />
<ImageView
android:id="@+id/iv_line"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_below="@id/iv_status"
android:layout_centerInParent="true"
android:src="#dddddd" />
</RelativeLayout>
<!--右邊 信息-->
<TextView
android:id="@+id/tv_status"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/rl_left"
android:autoLink="email|phone|web"
android:text="正在派送途中,請(qǐng)您準(zhǔn)備簽收(派件人:張小建,電話(huà):18513394441)"
android:textColor="@color/gray9" />
<TextView
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_below="@id/tv_time"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="@id/rl_left"
android:background="#9b9b9b"
android:visibility="gone" />
</LinearLayout>
3. Adapter代碼
LogisticsAdapter.xml
public class LogisticsAdapter0 extends RecyclerView.Adapter<LogisticsAdapter0.LogisticsAdapterHolder> {
private Context context;
private LayoutInflater mLayoutInflater;
private LogisticsJson bean;
public LogisticsAdapter0(Context context, LogisticsJson bean) {
this.context = context;
this.mLayoutInflater = LayoutInflater.from(context);
this.bean = bean;
}
@Override
public int getItemCount() {
return bean.getData().getList().size();
}
@Override
public LogisticsAdapter0.LogisticsAdapterHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new LogisticsAdapter0.LogisticsAdapterHolder(mLayoutInflater.inflate(R.layout.logistics_recycle_item, parent, false));
}
@Override
public void onBindViewHolder(LogisticsAdapter0.LogisticsAdapterHolder holder, int position) {
try {
holder.tv_status.setText(bean.getData().getList().get(position).getContext());//訂單狀態(tài)
holder.tv_time.setText(bean.getData().getList().get(position).getTime());//時(shí)間
if (position == 0) {
//紅色的圓點(diǎn)
holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_red);
RelativeLayout.LayoutParams pointParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 20), DensityUtil.dp2px(context, 20));
pointParams.addRule(RelativeLayout.CENTER_IN_PARENT);
holder.iv_status.setLayoutParams(pointParams);
holder.tv_time.setTextColor(context.getResources().getColor(R.color.newPrimary));
holder.tv_status.setTextColor(context.getResources().getColor(R.color.newPrimary));
//灰色的豎線(xiàn)
RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線(xiàn)置于圓點(diǎn)下面
lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
holder.iv_line.setLayoutParams(lineParams);
} else {
// holder.iv_status.setBackgroundResource(R.mipmap.ic_logistics_bottom);
holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_gray);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 10), DensityUtil.dp2px(context, 10));
lp.addRule(RelativeLayout.CENTER_IN_PARENT);
holder.iv_status.setLayoutParams(lp);
holder.tv_time.setTextColor(context.getResources().getColor(R.color.textColor_9b));
holder.tv_status.setTextColor(context.getResources().getColor(R.color.textColor_9b));
//灰色的豎線(xiàn)
RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
// lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線(xiàn)置于圓點(diǎn)下面
lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
holder.iv_line.setLayoutParams(lineParams);
}
} catch (Exception e) {
e.printStackTrace();
}
}
//自定義的ViewHolder,持有每個(gè)Item的的所有界面元素
public static class LogisticsAdapterHolder extends RecyclerView.ViewHolder {
ImageView iv_status;
TextView tv_status;
TextView tv_time;
ImageView iv_line;
LogisticsAdapterHolder(View view) {
super(view);
iv_line = (ImageView) view.findViewById(R.id.iv_line);
iv_status = (ImageView) view.findViewById(R.id.iv_status);
tv_status = (TextView) view.findViewById(R.id.tv_status);
tv_time = (TextView) view.findViewById(R.id.tv_time);
}
}
}
4. 最后雅潭,Activity里面設(shè)置一下
LogisticsJson logisticsJson = new Gson().fromJson(json, LogisticsJson.class);
LogisticsAdapter logisticsAdapter = new LogisticsAdapter(LogisticsActivity.this, logisticsJson);
rvLogisticsDetail.setAdapter(logisticsAdapter);
再給一個(gè)測(cè)試的json瘪匿,自己生成Gson 的bean類(lèi)吧!
{
"code": 1,
"message": "Success",
"data": {
"id": "1",
"state": "3",
"num": "71265042088396",
"time": "2018-03-11 12:55:09",
"com_name": "匯通",
"list": [
{
"time": "2018-03-02 08:46:40",
"context": "秦皇島市|秦皇島市【秦皇島市區(qū)五部】寻馏,八棟西霞超市 已簽收"
}棋弥, {
"time": "2018-03-02 08:46:40",
"context": "秦皇島市|秦皇島市【秦皇島市區(qū)五部】,八棟西霞超市 已簽收"
}
]
}
}
大功告成诚欠!復(fù)制粘貼大法好~~