Recyclerview实现时间轴物流详情效果

最新推荐文章于 2024-07-27 04:32:42 发布
最新推荐文章于 2024-07-27 04:32:42 发布
阅读量855 收藏 3
点赞数 2
分类专栏： recyclerview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thw_m/article/details/85339866
版权

先放上效果图：

物流的小图标：

用的是Recyclerview，需要添加依赖，在项目的build.gradle文件里添加

 compile 'com.android.support:recyclerview-v7:25.4.0'

ExpressActivity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.littlejie.app.R;

import java.util.ArrayList;
import java.util.List;

public class ExpressActivity extends AppCompatActivity {

    private RecyclerView express_recyview;
    List<ExpressBean.ResultBean.ListBean> expressBeanList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_express);
        
        initList();
        initView();
    }

    private void initList() {
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-20","17:55:00","投递并签收，签收人：单位收发章 *【毕节地区】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-18","17:34:00","离开纳雍县 发往纳雍县阳长邮政支局【毕节地区】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-18","09:59:00","到达  纳雍县 处理中心【毕节地区】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-18","07:40:00","离开贵阳市 发往毕节地区（经转）【贵阳市】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-17","07:53:00","到达贵阳市处理中心（经转）【贵阳市】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-16","12:04:00","离开长沙市 发往贵阳市（经转）【长沙市】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-15","21:46:45","郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】",""));
        expressBeanList.add(new ExpressBean.ResultBean.ListBean("2016-06-15","21:44:04","离开郴州市 发往长沙市【郴州市】",""));
    }

    private void initView() {
        express_recyview = (RecyclerView) findViewById(R.id.express_recyview);
        express_recyview.setLayoutManager(new LinearLayoutManager(ExpressActivity.this,LinearLayoutManager.VERTICAL,false));
        express_recyview.setAdapter(new ExpressRecyAdapter(this,expressBeanList));

    }
    
}

ExpressActivity对应的布局文件activity_express.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.littlejie.app.express.ExpressActivity">

    <RelativeLayout
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="48dp">

        <TextView
            android:layout_centerInParent="true"
            android:textSize="17sp"
            android:text="查看物流"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

    <TextView
        android:background="#b9b3b3"
        android:layout_width="match_parent"
        android:layout_height="1dp" />

    <android.support.v7.widget.RecyclerView
        android:layout_marginTop="10dp"
        android:padding="15dp"
        android:id="@+id/express_recyview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

Recyclerview的适配器ExpressRecyAdapter

public class ExpressRecyAdapter extends RecyclerView.Adapter<ExpressRecyAdapter.ExpressViewHolder> {

   List<ExpressBean.ResultBean.ListBean> expressBeanList;
    Context context;
    public ExpressRecyAdapter(Context context, List<ExpressBean.ResultBean.ListBean> expressBeanList) {
        this.context = context;
        this.expressBeanList = expressBeanList;
    }

    @Override
    public ExpressViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.express_item_layout,null,false);
        return new ExpressViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ExpressViewHolder holder, final int position) {
      if (position==expressBeanList.size()-1){//如果是最后一个条目，隐藏掉竖线
            holder.item_shuxian.setVisibility(View.GONE);
         }

         holder.item_day.setText(expressBeanList.get(position).getDate());
         holder.item_time.setText(expressBeanList.get(position).getTime());
         holder.item_content.setText(expressBeanList.get(position).getRemark());
        }

    @Override
    public int getItemCount() {
        return expressBeanList.size();
    }


    public static class ExpressViewHolder extends RecyclerView.ViewHolder {

        private final ImageView item_shuxian;
        private final TextView item_day;
        private final TextView item_time;
        private final TextView item_content;

        public ExpressViewHolder(View itemView) {
            super(itemView);
            //找id
            item_shuxian = itemView.findViewById(R.id.item_shuxian);
            item_day = itemView.findViewById(R.id.item_day);
            item_time = itemView.findViewById(R.id.item_time);
            item_content = itemView.findViewById(R.id.item_content);
        }
    }
}

我这里是自己造的数据，模型类ExpressBean

public class ExpressBean {
    
    /**
     * resultcode : 200
     * reason : 查询物流信息成功
     * result : {"company":"EMS","com":"ems","no":"1186465887499","status":"1","list":[{"datetime":"2016-06-15 21:44:04","remark":"离开郴州市 发往长沙市【郴州市】","zone":""},{"datetime":"2016-06-15 21:46:45","remark":"郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】","zone":""},{"datetime":"2016-06-16 12:04:00","remark":"离开长沙市 发往贵阳市（经转）【长沙市】","zone":""},{"datetime":"2016-06-17 07:53:00","remark":"到达贵阳市处理中心（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 07:40:00","remark":"离开贵阳市 发往毕节地区（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 09:59:00","remark":"离开贵阳市 发往下一城市（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 12:01:00","remark":"到达  纳雍县 处理中心【毕节地区】","zone":""},{"datetime":"2016-06-18 17:34:00","remark":"离开纳雍县 发往纳雍县阳长邮政支局【毕节地区】","zone":""},{"datetime":"2016-06-20 17:55:00","remark":"投递并签收，签收人：单位收发章 *【毕节地区】","zone":""}]}
     * error_code : 0
     */

    private String resultcode;
    private String reason;
    /**
     * company : EMS
     * com : ems
     * no : 1186465887499
     * status : 1
     * list : [{"datetime":"2016-06-15 21:44:04","remark":"离开郴州市 发往长沙市【郴州市】","zone":""},{"datetime":"2016-06-15 21:46:45","remark":"郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】","zone":""},{"datetime":"2016-06-16 12:04:00","remark":"离开长沙市 发往贵阳市（经转）【长沙市】","zone":""},{"datetime":"2016-06-17 07:53:00","remark":"到达贵阳市处理中心（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 07:40:00","remark":"离开贵阳市 发往毕节地区（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 09:59:00","remark":"离开贵阳市 发往下一城市（经转）【贵阳市】","zone":""},{"datetime":"2016-06-18 12:01:00","remark":"到达  纳雍县 处理中心【毕节地区】","zone":""},{"datetime":"2016-06-18 17:34:00","remark":"离开纳雍县 发往纳雍县阳长邮政支局【毕节地区】","zone":""},{"datetime":"2016-06-20 17:55:00","remark":"投递并签收，签收人：单位收发章 *【毕节地区】","zone":""}]
     */

    private ResultBean result;
    private int error_code;

    public String getResultcode() {
        return resultcode;
    }

    public void setResultcode(String resultcode) {
        this.resultcode = resultcode;
    }

    public String getReason() {
        return reason;
    }

    public void setReason(String reason) {
        this.reason = reason;
    }

    public ResultBean getResult() {
        return result;
    }

    public void setResult(ResultBean result) {
        this.result = result;
    }

    public int getError_code() {
        return error_code;
    }

    public void setError_code(int error_code) {
        this.error_code = error_code;
    }

    public static class ResultBean {
        private String company;
        private String com;
        private String no;
        private String status;
        /**
         * datetime : 2016-06-15 21:44:04
         * remark : 离开郴州市 发往长沙市【郴州市】
         * zone :
         */

        private List<ListBean> list;

        public String getCompany() {
            return company;
        }

        public void setCompany(String company) {
            this.company = company;
        }

        public String getCom() {
            return com;
        }

        public void setCom(String com) {
            this.com = com;
        }

        public String getNo() {
            return no;
        }

        public void setNo(String no) {
            this.no = no;
        }

        public String getStatus() {
            return status;
        }

        public void setStatus(String status) {
            this.status = status;
        }

        public List<ListBean> getList() {
            return list;
        }

        public void setList(List<ListBean> list) {
            this.list = list;
        }

        public static class ListBean {
            private String date;
            private String time;
            private String remark;
            private String zone;

            public ListBean(String date,String time, String remark, String zone) {
                this.date = date;
                this.time = time;
                this.remark = remark;
                this.zone = zone;
            }


            public String getDate() {
                return date;
            }

            public void setDate(String date) {
                this.date = date;
            }

            public String getTime() {
                return time;
            }

            public void setTime(String time) {
                this.time = time;
            }

            public String getRemark() {
                return remark;
            }

            public void setRemark(String remark) {
                this.remark = remark;
            }

            public String getZone() {
                return zone;
            }

            public void setZone(String zone) {
                this.zone = zone;
            }
        }
    }
}

适配器中引入的条目布局express_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_height="70dp">

    <LinearLayout
        android:paddingBottom="20dp"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <TextView
        android:textColor="#cccccc"
        android:textSize="11sp"
        android:text="2018-12-29"
        android:id="@+id/item_day"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

        <TextView
            android:textColor="#cccccc"
            android:textSize="11sp"
            android:text="21:44:05"
            android:id="@+id/item_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <ImageView
            android:src="@drawable/icon_wuliu"
            android:layout_width="20dp"
            android:layout_height="20dp" />

        <ImageView
            android:id="@+id/item_shuxian"
            android:background="#CCCCCC"
            android:layout_width="1dp"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <TextView
        android:paddingBottom="25dp"
        android:textSize="12sp"
        android:text="离开长沙市 发往贵阳市（经转）【长沙市】"
        android:id="@+id/item_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

 

meng_c_
关注
专栏目录
Android使用RecyclerView实现时间轴，物流进度展示
junling_的博客
08-16 7004
前言 今天在网上看到一篇文章中有个时间轴图片，很是符合我的审美，在能表现出要表达给用户的信息外，极尽简约，很漂亮，打算实现一下。好吧，文章https://www.jianshu.com/p/d03f994b6c44已经给出了实现方式，再copy一遍？No，换一种思路吧。 我的效果 1.只有1条发货数据 2.多于2条数据 右边的实现 右边的实际就是一个普通的不...
RecyclerView(三)：实现时间轴效果
qq_33613491的博客
03-09 294
做项目时有需求展示物流信息，用RecyclerView.ItemDecoration实现，代码如下： 对应activity中 LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL)...
Android时间轴(Timeline)效果的实现(使用RecyclerView)
12-07
Android时间轴(Timeline)效果的实现(使用RecyclerView)代码示例，详细内容请参考：http://blog.csdn.net/u012939909/article/details/53510203
自定义recyclerView实现时光轴效果
最新发布
weixin_41296859的博客
07-27 34
时光轴效果在很多app上都有出现，例如淘宝中快递的跟踪，本文将使用recyclerView实现时光轴效果，我们会到自定义控件，首先先看一下效果图：接下来是步骤分析1自定义属性这个大家应该都了解了，根据我们之前的分析，直接在attrs.xml中进行声明进行一下各个属性的声明• beginLine:开始的线条• endLine...
使用RecyclerView实现电商物流信息的时光轴效果
nanxuan521的专栏
01-26 2796
转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/49734867； 本文出自:【kirk.wang的博客】相信RecyclerView大家已经不陌生了，最近公司项目中查看物流信息需要用到时光轴，所以在完成此功能之后写下了这一篇文章，希望对大家有所帮助. 需求 要达到的效果 实现功能 需求首先为什么要做时光轴，用它来体现有什么好
RecycleView自定义ItemDecoration，实现时间轴效果
ali18510953445的博客
09-21 2001
最近进行知识点扫盲，关于RecycleView的进行整理，自定义ItemDecoration，实现时间轴效果，先上图：此文参考了Carson_Ho的博客：http://www.jianshu.com/p/9a796bb23a47，在此特别感谢，感觉怎么写都没有大神写的好，但是还要自己记录一下，嘿嘿。 时间轴是通过自定义ItemDecoration实现的，接下来我们分析一下ItemDecoratio
android时光轴相册,Android之RecyclerView实现时光轴效果示例
weixin_42301413的博客
05-29 347
做项目的过程中有个需求需要时光轴，于是网上找了部分资料 ，写了个案例，现在分享给大家。如图：activity_main.xmlxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".Main...
Android时光轴实现淘宝物流信息浏览效果
09-01
Android时光轴实现淘宝物流信息浏览效果是一种常见的UI设计，它能有效地展示时间序列中的事件或状态变化，如物流跟踪信息。在Android应用开发中，我们可以自定义组件来实现这样的效果。以下是对这一技术的详细解析。...
html5物流时间轴动画,三分钟实现物流配送页面（时间轴效果）
weixin_42202595的博客
06-09 1130
物流配送页面。主要使用RecycleView实现。通过判断将条目的第一条进行特殊处理。日后复制粘贴备用。效果图如下：查看物流可以通过各个view的相对位置来实现啊,比如那一条竖线可以用imageview来实现,那个圆点也可以用imageview实现啊,唯一不同的就是竖线的view是穿过灰色的圆view的,而position为0的竖线是不穿过蓝色的圆view的,这个也有办法搞定,在adapter里面...
android 可滑动时间轴 ( RecyclerView+verticalseekbar)
06-02
在实现可滑动时间轴时，我们可以通过自定义`RecyclerView.Adapter`来绑定数据，并在`onBindViewHolder()`方法中设置每个时间点的显示内容。同时，我们还需要重写` onCreateViewHolder()`方法来创建`RecyclerView....
Android 物流跟踪
06-17
各大电商App的物流详情页,istView item 左右布局。左边是竖线，状态图片，竖线。右边 是 物流信息和 时间
Android RecyclerView ItemDecoration timeline（一）
Zhang Phil
12-19 696
package zhangphil.book; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.gra...
android 垂直可滑动时间轴 ( RecyclerView+VerticalSeekBarWrapper)
u012664108的博客
06-02 1518
这是之前看到一个技术群一个哥们的需求. 对就是时间轴.问题是那个小车是动的,指不定在这个时间轴的哪个位置 查了一堆资料,发现 度娘貌似没有类似的实现,反正闲着有空就实现下吧.. 第一次写博客,排版有问题请包含 ________________________________________________________________________ 下面先来个效果图. 里面
值得深入学习的控件-RecyclerView（时间轴篇）
錦小白的博客
08-31 691
之前在进阶篇我们讲解了自定义分割线和item的点击事件 传送门 :RecyclerView进阶篇 在那篇的最后提到了时间轴，这个效果我们经常会看到，比如查看快递动态的时候 time.jpg 这就是所谓的时间轴 这里我就实现一个和这不太一样的时间轴效果，它长成这个样子 image.png 它是一个路线走向图，有点像地铁上的路线效果。小...
RecyclerView 的ItemDecoration 类似于时间轴
xuyao625010693的博客
05-07 298
package com.gemry.seneschal; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import androi...
Android 列表时间轴的实现
春暖花自开
03-17 2766
实现的效果图如下: 实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类, 具体如下, public class DividerItemDecoration extends RecyclerView.ItemDecoration{ // 写右边字的画笔(具体信息) private Paint mPaint;...
android列表时间轴,Android实现列表时间轴
weixin_39972019的博客
06-01 533
本文实例为大家分享了Android列表时间轴展示的具体代码，供大家参考，具体内容如下实现的效果图如下:实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类,具体如下public class DividerItemDecoration extends RecyclerView.ItemDecoration{// 写右边字的画笔(具体信息)...
RecycleView 系列（3）--利用 ItemDecoration 实现时光轴（物流时间）样式
qq_33703877的博客
02-14 381
一般竖向 横向
使用JS实现时间轴动态排列效果
"本文主要介绍如何使用JavaScript实现一个时间轴自动排列的效果，通过实例代码进行详细解析。" 在网页设计中，时间轴是一种常见的展示序列事件或历史信息的布局方式。利用JavaScript，我们可以动态地创建和更新时间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值