簡單實現物流詳情頁
當在開發有訂單模塊類型的App時基本上都會用到物流詳情頁
大概看了下各大電商App的物流詳情頁, 其實大同小異都差不多是一種
可能也只是部分細節的不同
第三方庫
先看效果圖
example.png
Gradle配置
repositories {
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.40'
}
BaseRecyclerViewAdapterHelper是一個封裝了RecyclerView自帶的Adapter的第三方庫
使用前先解決ScrollView嵌套RecyclerView的沖突
之前寫過一篇文章有說道這個問題
rv_logistics.setLayoutManager(new LinearLayoutManager(this));
//解決ScrollView嵌套RecyclerView出現的系列問題
rv_logistics.setNestedScrollingEnabled(false);
rv_logistics.setHasFixedSize(true);
XML使用
draw_example.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="12dp">
<LinearLayout
android:layout_width="18dp"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<View
android:id="@+id/v_short_line"
android:layout_width="1dp"
android:layout_height="15dp"
android:background="#E6E6E6" />
<ImageView
android:id="@+id/iv_new"
android:layout_width="18dp"
android:layout_height="18dp"
android:scaleType="fitXY"
android:src="@mipmap/icon_logistics_new" />
<ImageView
android:id="@+id/iv_old"
android:layout_width="11dp"
android:layout_height="11dp"
android:scaleType="fitXY"
android:src="@drawable/shape_gray_circle"
android:visibility="gone" />
<View
android:id="@+id/v_long_line"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:background="#E6E6E6" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="11dp">
<TextView
android:id="@+id/tv_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#18C289"
android:textSize="14sp" />
<TextView
android:id="@+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="12dp"
android:textColor="#18C289"
android:textSize="12sp" />
<View
android:id="@+id/v_bottom_line"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#E6E6E6" />
</LinearLayout>
</LinearLayout>
JAVA使用(適配器代碼)
其實核心的使用方法就是控制控件的隱藏和顯示
根據不同的條件來控制
public class LogisticsInfoAdapter extends BaseQuickAdapter<LogisticsInfoBean, BaseViewHolder> {
private Context context;
private List<LogisticsInfoBean> data;
public LogisticsInfoAdapter(Context context, int layoutResId, @Nullable List<LogisticsInfoBean> data) {
super(layoutResId, data);
this.context = context;
this.data = data;
}
@Override
protected void convert(BaseViewHolder helper, LogisticsInfoBean item) {
//獲取物流信息和物流時間的字體顏色, 最新的一條物流數據字體為綠色
int newInfoColor = context.getResources().getColor(helper.getLayoutPosition() == 0 ? R.color.green : R.color.gray);
//當前item的索引==0 && 物流數據的數量大于1條 -> 顯示綠色大圓圈
helper.setGone(R.id.iv_new, helper.getLayoutPosition() == 0 && data.size() > 1)
//當前item的索引!=0 && 物流數據的數量大于1條 -> 顯示灰色小圓圈
.setGone(R.id.iv_old, helper.getLayoutPosition() != 0 && data.size() > 1)
//當前item的索引 != 0 -> 顯示圓點上面短一點的灰線
.setVisible(R.id.v_short_line, helper.getLayoutPosition() != 0)
//當前item的索引 != 物流數據的最后一條 -> 顯示圓點下面長一點的灰線
.setGone(R.id.v_long_line, helper.getLayoutPosition() != data.size() - 1)
//當前item的索引 != 物流數據的最后一條 -> 顯示物流時間下面的橫向的灰線
.setGone(R.id.v_bottom_line, helper.getLayoutPosition() != data.size() - 1)
.setTextColor(R.id.tv_info, newInfoColor)
.setTextColor(R.id.tv_date, newInfoColor)
//物流信息
.setText(R.id.tv_info, item.getAcceptStation())
//物流時間
.setText(R.id.tv_date, item.getAcceptTime());
}
}
Kotlin使用(適配器代碼)
class LogisticsInfoAdapter(var context: BaseActivity?, var data: ArrayList<LogisticsInfoBean>?)
: BaseQuickAdapter<LogisticsInfoBean, BaseViewHolder>(R.layout.item_logistics, data) {
override fun convert(helper: BaseViewHolder?, item: LogisticsInfoBean?) {
//獲取物流信息和物流時間的字體顏色, 最新的一條物流數據字體為綠色
val textColor = context?.getColorFromBase(if (helper?.layoutPosition == 0) R.color.green_18C289 else R.color.text_btn_gray)
//當前item的索引==0 && 物流數據的數量大于1條 -> 顯示綠色大圓圈
helper?.setGone(R.id.iv_new, helper.layoutPosition == 0 && data?.size!! > 1)
//當前item的索引!=0 && 物流數據的數量大于1條 -> 顯示灰色小圓圈
?.setGone(R.id.iv_old, helper.layoutPosition != 0 && data?.size!! > 1)
//當前item的索引 != 0 -> 顯示圓點上面短一點的灰線
?.setVisible(R.id.v_short_line, helper.layoutPosition != 0)
//當前item的索引 != 物流數據的最后一條 -> 顯示圓點下面長一點的灰線
?.setGone(R.id.v_long_line, helper.layoutPosition != data?.size!! - 1)
//當前item的索引 != 物流數據的最后一條 -> 顯示物流時間下面的橫向的灰線
?.setGone(R.id.v_bottom_line, helper.layoutPosition != data?.size!! - 1)
?.setTextColor(R.id.tv_info, textColor!!)
?.setTextColor(R.id.tv_date, textColor!!)
//物流信息
?.setText(R.id.tv_info, item?.acceptStation)
//物流時間
?.setText(R.id.tv_date, item?.acceptTime)
}
}
需要要看詳細的代碼看這里
github源碼地址 歡迎star、fork
