LogisticsDisplayExample
LogisticsDisplayExample copied to clipboard
Published
20 hours ago •
hexianqiao3755
hexianqiao3755
简单实现物流详情页
简单实现物流详情页
当在开发有订单模块类型的App时基本上都会用到物流详情页
大概看了下各大电商App的物流详情页, 其实大同小异都差不多是一种
可能也只是部分细节的不同
先看效果图
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使用
<?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)
}
}
反馈
欢迎各位提issues和PRs
第三方库
联系我
许可证
Copyright 2017 He Qiao
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
hexianqiao3755