使用 RecyclerView 实现简单时间轴

前一段时间在公司中有个项目用到了 时间轴 这种形式的控件，我的第一反应就是去找 demo，但是想想好像并不是很复杂，所以开始着手自己写一个，现在算是搞定了一个简单的时间轴，现在记录一下：

先来上一张图，看看效果：

贴上这么一张图，主要还是不会做 GIF 动图，所以只能放一张半图~~(>_<)~~

时间轴这个东西，说透了，主要是中间的点点还有开始、中间、结束三条线的绘制。

然后开始直接上代码，首先是 RecyclerView 中 Adapter 的 Item 代码：

<?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="wrap_content"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/construction_detail_iv_circular"            android:layout_width="26dp"            android:layout_height="26dp"            android:layout_marginLeft="20dp"            android:layout_marginTop="10dp"            android:src="@drawable/construction_detail_circular" />        <View            android:id="@+id/construction_detail_top_line"            android:layout_width="1dp"            android:layout_height="23dp"            android:layout_marginLeft="33dp"            android:background="#00cdd0" />        <View            android:id="@+id/construction_detail_other_line"            android:layout_width="1dp"            android:layout_height="10000dp"            android:layout_alignBottom="@+id/construction_detail_layout"            android:layout_below="@+id/construction_detail_top_line"            android:layout_marginLeft="33dp"            android:background="#00cdd0" />        <LinearLayout            android:id="@+id/construction_detail_layout"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="10dp"            android:layout_marginTop="15dp"            android:layout_toRightOf="@+id/construction_detail_iv_circular"            android:orientation="vertical">            <TextView                android:id="@+id/construction_detail_tv_time"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginBottom="10dp"                android:layout_marginRight="5dp"                android:text="15：40"                android:textColor="@android:color/black"                android:textSize="14sp" />            <TextView                android:id="@+id/construction_detail_tv_data"                android:layout_width="wrap_content"                android:layout_marginBottom="5dp"                android:layout_height="wrap_content"                android:layout_marginRight="5dp"                android:text=""                android:textColor="@android:color/black"                android:textSize="14sp" />        </LinearLayout>    </RelativeLayout></LinearLayout>

这就是设计之后的样子！！！

适配器一直是使用 BaseRecyclerViewAdapterHelper，主要还是这个比较简单、方便、已操作的。

然后是 Adapter 的代码：

package com.admin.recyclerview.adapter;import android.view.View;import com.admin.recyclerview.R;import com.admin.recyclerview.bean.TimeAxis;import com.admin.recyclerview.util.Info;import com.chad.library.adapter.base.BaseItemDraggableAdapter;import com.chad.library.adapter.base.BaseViewHolder;import java.util.List;public class TimeAxisQuickAdapter extends BaseItemDraggableAdapter<TimeAxis> {    public TimeAxisQuickAdapter(List<TimeAxis> data) {        super(R.layout.time_axis_mb, data);        List<TimeAxis> list = data;    }    @Override    protected void convert(BaseViewHolder baseViewHolder, TimeAxis timeAxis) {        baseViewHolder                .setText(R.id.construction_detail_tv_time, timeAxis.getTime())// 时间                .setText(R.id.construction_detail_tv_data, timeAxis.getData())// 内容                .setVisible(R.id.construction_detail_other_line, (Info.isEmptyOrNullString(timeAxis.getPosition())                        || !timeAxis.getPosition().equals("1")));// 判断是不是尾，如果是，隐藏;        // 判断是不是开头，如果是，隐藏开始的线        View view_TopLine = baseViewHolder.getView(R.id.construction_detail_top_line);        if ((!Info.isEmptyOrNullString(timeAxis.getPosition())                && timeAxis.getPosition().equals("0"))) {            view_TopLine.setVisibility(View.INVISIBLE);        }    }}

首先判断 timeAxis 实体类中的 Position 是不是为空，如果为空，则证明是中间，如果是 “0” 则为开头，如果是 “1” 则为结尾，然后判断显示和隐藏就好了。

然后只需要在对应的 Activity 中进行相应的 RecyclerView 的配置就可以了。

放一张删除部分内容之后的全部显示图，这就搞定了~！

然后放一个我自己 GitHub 的地址：项目地址