使用RecyclerView实现电商物流信息的时光轴效果

转载请标明出处：
http://blog.csdn.net/lmj623565791/article/details/49734867；
本文出自:【kirk.wang的博客】

相信RecyclerView大家已经不陌生了，最近公司项目中查看物流信息需要用到时光轴，所以在完成此功能之后写下了这一篇文章，希望对大家有所帮助.

• 需求
• 要达到的效果
• 实现功能

---

需求

首先为什么要做时光轴，用它来体现有什么好处，现在比较大的电商平台如天猫，京东，物流信息都是使用时光轴，能让用户清晰的看到自己所购买的商品的最新动态，和经过了哪些地方。

要达到的效果:

如下的效果图

实现功能

代码块

先准备好数据设置到RecyclerView

private void initData() {
        mDatas = new ArrayList<DateText>();
        mDatas.add(new DateText("20140710", "【上海市】快件已到达上海"));
        mDatas.add(new DateText("20120209", "【上海市】快件已到达上海浦东新区"));
        mDatas.add(new DateText("20140526", "【上海市】快件已到达上海浦东新区软件园"));
        mDatas.add(new DateText("20140623", "【上海市】因放假原因，快件等工作日发出"));
        mDatas.add(new DateText("20140121", "【上海市】快件已到达上海浦东软件园已发出"));
        mDatas.add(new DateText("20140916", "【上海市】快件已到达上海浦东软件园已签收"));
        mDatas.add(new DateText("20140712", "【上海市】快件已到达上海浦东软件园已发出"));
        mDatas.add(new DateText("20140710", "【上海市】快件已到达上海浦东已收入"));
        initView();
    }
private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.timeline_recyclerview);
        init();
    }

    private void init() {
        // 将数据按照时间排序
        DateComparator comparator = new DateComparator();
        Collections.sort(mDatas, comparator);
        mTimeLineAdapter = new TimeLineAdapter(this, mDatas);
        LayoutManager mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, true);
        recyclerView.setAdapter(mTimeLineAdapter);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setHasFixedSize(true);
    }

适配器需要做的工作

@Override
    public void onBindViewHolder(TimeLineViewHolder holder, int position) {
        //当数据为最后一个时，说明没有要显示的数据了，将线隐藏掉
        if (position == (getItemCount() - 1)) {
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.setMargins(0, 10, 0, 0);
            holder.iv_point.setLayoutParams(layoutParams);
            holder.iv_point.setSelected(true);
            //将下标为最后一个的上方的线头隐藏掉
            holder.line.setVisibility(View.INVISIBLE);
        } else {
            holder.line.setVisibility(View.VISIBLE);
            holder.iv_point.setSelected(false);
        }
        holder.date_time.setText(TimeFormat.format("yyyy.MM.dd", mDatas.get(position).getDate()));
        holder.date_content.setText(mDatas.get(position).getText());
    }

布局文件

<?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="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <View
            android:id="@+id/v_line"
            android:layout_width="0.5dp"
            android:layout_height="0dp"
            android:layout_weight="0.6"
            android:background="#7F7C7C" />

        <ImageView
            android:id="@+id/iv_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_selector" />

        <View
            android:layout_width="0.5dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#7F7C7C" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="8dp"
        android:layout_weight="9" >

        <TextView
            android:id="@+id/txt_date_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:maxLines="2"
            android:text="sad"
            android:textColor="#5296C5"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/txt_date_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/txt_date_content"
            android:layout_below="@+id/txt_date_content"
            android:text="asdssfgdg"
            android:textColor="#FC6802"
            android:textSize="12sp" />
    </RelativeLayout>

</LinearLayout>

指示点用选择器达到最新的信息高亮
详情见源码

源码地址：http://download.csdn.net/detail/nanxuan521/9419181