Android简单实现订单模块类APP的物流详情页

简单实现物流详情页

---

当在开发有订单模块类型的App时基本上都会用到物流详情页

大概看了下各大电商App的物流详情页, 其实大同小异都差不多是一种

可能也只是部分细节的不同

第三方库

• BaseRecyclerViewAdapterHelper

先看效果图

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