使用 RecyclerView 实现简单时间轴

最新推荐文章于 2024-07-27 04:32:42 发布

逆雪残阳

最新推荐文章于 2024-07-27 04:32:42 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：控件实战文章标签：控件时间轴 recyclerview

本文链接：https://blog.youkuaiyun.com/wodexiongdizdp/article/details/78154411

控件实战专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用RecyclerView创建一个简单的时间轴。通过分析时间轴的组成元素——点、线，作者提供了Adapter的Item代码，并利用BaseRecyclerViewAdapterHelper简化操作。在Adapter中，根据timeAxis实体类的Position确定开头、中间和结尾的线条显示。最终，通过在Activity配置RecyclerView，成功实现了时间轴的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 RecyclerView 实现简单时间轴

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

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

timeAxis

贴上这么一张图，主要还是不会做 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>

timeAxis1

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

适配器一直是使用 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);
        }
    }
}