Android使用RecyclerView实现日期分组以及时间轴显示

最新推荐文章于 2024-07-24 16:20:20 发布
最新推荐文章于 2024-07-24 16:20:20 发布
阅读量774 收藏 3
点赞数 1
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31481093/article/details/134754735
版权

抽空介绍一下如何使用RecyclerView来实现分组列表以及时间轴的显示，先看下效果图：

作为Android的小伙伴，在需求方面上，难免遇到实现类似的功能实现，实现起来有一定的难度，RecyclerView进行分组，和时间轴的显示。

重点讲下，RecyclerView如何进行分组，其实就是对数据源集合进行分组：

BuildListDataUtil.kt

object BuildListDataUtil {

    /**
     * 集合进行分组
     */
    fun buildListData(sourceList:MutableList<AppInfo>?): MutableList<AppInfo>{
        val tempData = ArrayList<AppInfo>()
        val appInfo = createEmptyObject(sourceList!![0])
        tempData.add(appInfo)
        tempData.add(sourceList[0])
        var preDate = DateUtils.getTimeStampConvertToDate(sourceList[0]
            .orderInfoApp?.publicFirstTime!!, DateUtils.PARAMETER_ALL_DATE_TYPE)
        for (index in 1 until sourceList.size) {
            val curDate = DateUtils.getTimeStampConvertToDate(sourceList[index]
                .orderInfoApp?.publicFirstTime!!, DateUtils.PARAMETER_ALL_DATE_TYPE)
            //日期一致的话，就添加至集合
            if (TextUtils.equals(preDate, curDate)) {
                tempData.add(sourceList[index])
            } else {
                // 日期不一致，则创建新的对象并添加到集合中
                val curAppInfo = createEmptyObject(sourceList[index])
                tempData.add(curAppInfo)
                tempData.add(sourceList[index])
                preDate = curDate
            }
        }
        return tempData
    }

    /**
     * 创建空对象
     */
    private fun createEmptyObject(appInfo: AppInfo): AppInfo {
        var tempInfo = AppInfo()
        var orderInfoApp = OrderInfoApp()
        orderInfoApp.publicFirstTime = appInfo.orderInfoApp?.publicFirstTime!!
        tempInfo.orderInfoApp = orderInfoApp
        return tempInfo
    }
}

我封装了BuildListDataUtil工具类，主要是对数据源集合逻辑进行分组处理，首先根据集合的索引值拿到第一个对象，进行创建空的对象，同时根据时间戳进行赋值，并返回空的对象作为用来展示标题布局的日期标题，并添加到临时的集合中，根据当前的对象的时间戳返回当前的preDate变量，接下来sourceList进行遍历，遍历下一个对象的时间戳返回当前的curDate 变量，和上一个preDate变量进行对比，如果日期一致，就添加到同一集合里面，否则就创建空的对象并添加到集合里面，并且把curDate值赋值给preDate，以此类推。

我打了断点，如下：

接下来就是把集合分好组的tempData变量返回给外部调用。

重点看下RecycleView的Adapter做了什么。

BuildGroupDateAdapter.kt

class BuildGroupDateAdapter constructor(datas:MutableList<AppInfo>?): Adapter<ViewHolder>() {
    //标题
    val ITEM_TITLE_TYPE = 1
    //内容
    val ITEM_CONTENT_TYPE = 2
    private var datas:MutableList<AppInfo>? = null
    private lateinit var itemTitleBing :ItemTitleLayoutBinding
    private lateinit var itemContentBinding: ItemContentLayoutBinding

    init {
        this.datas = datas
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
      var view :View
        return when(viewType) {
            ITEM_TITLE_TYPE -> {
                itemTitleBing = ItemTitleLayoutBinding.inflate(LayoutInflater.from(parent.context), parent, false)
                view = itemTitleBing.root
                TitleViewHolder(view)
            }
            else -> {
                itemContentBinding = ItemContentLayoutBinding
                    .inflate(LayoutInflater.from(parent.context), parent, false)
                view = itemContentBinding.root
                ContentViewHolder(view)
            }
        }
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        when(holder) {
            is TitleViewHolder -> {
                val titleDate = getTimeStampConvertToDate(
                    datas
                        ?.get(position)!!.orderInfoApp!!.publicFirstTime,
                    DateUtils.PARAMETER_ALL_DATE_TYPE
                )
                itemTitleBing.tvTitle.text = titleDate
                dealWithTitleTimeLine(position)
            }
            is ContentViewHolder -> {
                itemContentBinding.tvContent.text = datas!![position].name
                dealWithContentTimeLine(position)
            }
        }
    }

    /**
     * 标题时间轴
     */
    private fun dealWithTitleTimeLine(index: Int) {
        when(index) {
            0 -> {
                itemTitleBing.aboveLineTitle.visibility = View.INVISIBLE
                itemTitleBing.belowLineTitle.visibility = View.VISIBLE
            }
            else -> {
                itemTitleBing.aboveLineTitle.visibility = View.VISIBLE
                itemTitleBing.belowLineTitle.visibility = View.VISIBLE
            }
        }
    }

    /**
     * 内容时间轴
     */
    private fun dealWithContentTimeLine(index: Int) {
        when(index) {
            datas!!.size - 1  -> {
                itemContentBinding.timeLineContent.renderBg(R.color.time_line_color, true)
            }
            else -> {
                itemContentBinding.timeLineContent.renderBg(R.color.time_line_color, false)
            }
        }
    }

    override fun getItemCount(): Int {
       return datas!!.size
    }

    override fun getItemViewType(position: Int): Int {
        var id = datas!![position].id
        //id是空的 说明该对象是用来展示标题item布局的
        if(id.isNullOrEmpty()) {
          return ITEM_TITLE_TYPE
        }
        return ITEM_CONTENT_TYPE
    }

    class TitleViewHolder(view: View) : ViewHolder(view)

    class ContentViewHolder(view: View) : ViewHolder(view)
}

上面代码逻辑不是很复杂，其实就是创建了两个ViewHolder，一个是用来展示标题的ViewHolder，一个是来展示内容的ViewHolder。

重点看下这个

根据position获取当前对象的id，id是空的用来展示标题item布局的。因为刚讲过， 

 

创建空对象的时候，仅仅是把时间戳赋值给它，并没有赋值给id,因此id是空的话，是用来展示标题的type。

BuildGroupDateActivity.kt

class BuildGroupDateActivity : AppCompatActivity() {

    lateinit var adapter: BuildGroupDateAdapter
    lateinit var binding: ActivityMainBuildGroupDateBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBuildGroupDateBinding.inflate(layoutInflater)
        setContentView(binding.root)
        adapter = BuildGroupDateAdapter(getDatas())
        binding.baseRecyclerView.layoutManager = LinearLayoutManager(this)
        binding.baseRecyclerView.adapter = adapter
    }

    private fun getDatas() : MutableList<AppInfo> {
        return BuildListDataUtil.buildListData(TestBuildData.datas())
    }
}

运行此项目，界面上就可以正常展示RecyclerView日期分组了。

接下来，我们看下时间轴怎么实现。

在adapter里面创建了两个ViewHolder,每个ViewHolder创建了item布局，时间线的显示其实就是在布局里面做。

item_title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        >
        <RelativeLayout
            android:layout_width="30dp"
            android:layout_height="match_parent"
            >
            <View
                android:id="@+id/above_line_title"
                android:layout_width="1dp"
                android:layout_height="18dp"
                android:background="@color/time_line_color"
                android:layout_centerHorizontal="true"
                android:layout_above="@+id/middle_line"
                />
            <View
                android:id="@+id/middle_line"
                android:layout_width="5dp"
                android:layout_height="5dp"
                android:background="@drawable/time_line_round_bg"
                android:layout_centerInParent="true"
                />

            <View
                android:id="@+id/below_line_title"
                android:layout_width="1dp"
                android:layout_height="18dp"
                android:layout_below="@id/middle_line"
                android:layout_centerHorizontal="true"
                android:background="@color/time_line_color" />
        </RelativeLayout>
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_gravity="center_vertical"
        />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

item_content_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        >
        <RelativeLayout
            android:layout_width="30dp"
            android:layout_height="match_parent"
            >
            <com.xilianke.mainapp_master.view.TimeLineView
                android:id="@+id/time_line_content"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:background="@color/teal_700" />
        </RelativeLayout>
        <TextView
            android:id="@+id/tvContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_gravity="center_vertical"
            />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

在该布局里面需要自定义一个View，也就是TimeLineView，需要处理时间线渐变。

TimeLineView.kt

class TimeLineView : View {

    constructor(context: Context) : this(context, null)

    constructor(context: Context, attributeSet: AttributeSet?) :this (context, attributeSet, 0)

    constructor(context: Context, attributeSet: AttributeSet?, def: Int):super(context, attributeSet, def)

    fun renderBg(color: Int,lastItem:Boolean) {
        if (lastItem) {
          val gradient = gradientDrawable(color)
            background = gradient
        } else {
            background = context.resources.getDrawable(color)
        }
        post {
            invalidate()
        }
    }

    private fun gradientDrawable(arg: Int): GradientDrawable {
      val colors = intArrayOf(
//          arg and 0xFFFFFFFF.toInt(),//0%
//          arg and 0x7FFFFFFF,//50%
          arg and 0x33FFFFFF,//80%
          arg and 0x00FFFFFF,//100%
      )
        val gradientDrawable = GradientDrawable()
        gradientDrawable.colors = colors
        gradientDrawable.orientation = GradientDrawable
            .Orientation.TOP_BOTTOM//从上到下渐变
        return gradientDrawable
    }
}

运行此项目，最终的效果就是文章开头的效果图。

我把这次案例进行总结，方便后续可能会使用到，难免会使用RecyclerView分组实现，例如RecyclerView联系人分组实现。

 

Angel-杭州
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Android之RecyclerView实现时光轴效果示例
08-31
本篇文章主要介绍了Android之RecyclerView实现时光轴效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android时间轴(Timeline)效果的实现(使用RecyclerView)
12-07
Android时间轴(Timeline)效果的实现(使用RecyclerView)代码示例，详细内容请参考：http://blog.csdn.net/u012939909/article/details/53510203
2024年最全Android 从零开始实现RecyclerView分组及粘性头部效果，2024年最新Android高级工程师进阶学习
2401_84519718的博客
05-08 836
目前只支持类型，使用流程如下拷贝路径下的文件到你的项目中inflate你写好的布局调用添加@Override//设置分组，GroupItem(int startPosition)，例如：groupItem.setData(“name”,“第1组”);groupItem.setData(“name”,“第2组”);@Override//构建groupView，通过groupView.findViewById找到内部控件（暂不支持点击事件等），例如。
SectionedRecyclerView
qq_39745566的博客
01-05 1725
这个一定要保存好，里面实现了第1段1个数据，第2段2个数据，第3段3个数据的效果 介绍： 一个让RecyclerView分段（section）显示，并且提供header和footer的adapter类。 运行效果： 使用说明： 要使用这个库，你需要继承SectionedRecyclerView，其中： H是一个继承自Rec
探索高效分组显示的秘密：GroupedRecyclerViewAdapter
gitblog_00043的博客
05-13 311
探索高效分组显示的秘密：GroupedRecyclerViewAdapter 项目地址:https://gitcode.com/donkingliang/GroupedRecyclerViewAdapter 在Android开发中，RecyclerView无疑是最常用的数据展示组件之一，尤其是在处理大量数据并需要进行分组展示时。今天，我们将深入探索一个强大的开源项目——GroupedRecycle...
Android时间轴（使用RecyclerView实现）
03-15 799
Android时间轴（使用RecyclerView实现） 时间轴，其实我们平常非常的常见，比如快递信息很多就是以时间轴呈现 那么我们今天就使用RecyclerView实现一个时间轴 实现效果 这个时间轴是基于RecyclerView实现的。 首先准备布局 RecyclerVIew的每一项都是时间轴的一部分 每个RecyclerView的Item都被分为三大块 最外层是一个
Android使用RecyclerView实现时间轴，物流进度展示
junling_的博客
08-16 6983
前言 今天在网上看到一篇文章中有个时间轴图片，很是符合我的审美，在能表现出要表达给用户的信息外，极尽简约，很漂亮，打算实现一下。好吧，文章https://www.jianshu.com/p/d03f994b6c44已经给出了实现方式，再copy一遍？No，换一种思路吧。 我的效果 1.只有1条发货数据 2.多于2条数据 右边的实现 右边的实际就是一个普通的不...
Android时间轴，RecyclerView实现
weixin_41782226的博客
04-15 3302
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、功能二、使用步骤1.引入库2.图片显示RecyclerView3.单个时间轴内容展示4.自定义时间轴控件5.应用6.其他moudle总结 前言 最近项目需要有个时间轴记录一下进程，研究了一下，有何不足之处望各路大神指正. 废话不多说，先上效果图 提示：以下是本篇文章正文内容，下面案例可供参考 一、功能 大标题、小标题、正文、图片显示 二、使用步骤 1.引入库 不需要引入任何库，原生代码 RecyclerView使用的.
实现TimeLine时间轴 recyclerview
Gestwr博客
08-12 884
实现TimeLine时间轴，练习recyclerview
android自定义实现时间轴
gengbaolong的博客
06-18 624
很常见的一个需求，时间轴。 一般会配合RecyclerView。这次刚好是RecyclerView实现的列表，同时要在左侧显示时间轴。而且这个时间轴不连续。
GroupRecyclerView:按日期分组的文件。 Android的例子
05-25
在Android开发中，`GroupRecyclerView`是一个常用的组件，它扩展了标准的`RecyclerView`，用于显示数据集，这些数据集可以按照特定逻辑（如日期、类别等）进行分组。这个例子展示了如何在Android应用中实现按日期...
Android使用自定义View实现横行时间轴效果
08-25
本文将详细介绍如何在Android中使用自定义View实现横行时间轴的效果，这通常适用于展示项目进度、事件流程等场景。 首先，我们来看一下为什么要在众多已有的实现，如RecycleView，中选择自定义View来实现时间轴。...
Android Kotlin：协程
qq_40853919的博客
07-23 730
1）协程是什么？2）协程和线程的关系？3）协程如何使用？切线程是什么4）挂起函数是什么？5）withContext和lanuch的区别在哪里？6）Defualt、IO和Main的区别。
47、PHP实现机器人的运动范围
weixin_44010641的博客
07-24 824
地上有一个m行和n列的方格。一个机器人从坐标0,0的格子开始移动，每一次只能向左，右，上，下四个方向移动一格，但是不能进入行坐标和列坐标的数位之和大于k的格子。但是，它不能进入方格（35,38），因为3+5+3+8 = 19。请问该机器人能够达到多少个格子？当k为18时，机器人能够进入方格（35,37），因为3+5+3+7 = 18。
MySQL的MHA
最新发布
2402_84844434的博客
07-24 810
高可用模式下的故障切换，基于主从复制。单点故障和主从复制不能切换的问题。至少需要3台。奇数台故障切换的过程0~30秒。根据vip地址所在的主机，确定主备。主和备不是靠优先级决定的，主从复制的时候就确定了主，备是在MHA的过程中确定的。
Android SurfaceFlinger——GraphicBuffer内存申请（三十）
小旭的专栏
07-24 1197
在Android的图形子系统中，GraphicBufferAllocator 和 GraphicBufferMapper 是处理图形缓冲区的核心组件。这两个类分别负责缓冲区的分配和映射，是 GraphicBuffer 类的基础，GraphicBuffer 用于封装和管理图形数据。
【安卓】Android Studio简易计算器（实现加减乘除，整数小数运算，正数负数运算）
qq_73830179的博客
07-24 1442
随着移动互联网的普及，手机应用程序已经成为人们生活中不可或缺的一部分。计算器是一类被广泛使用的应用程序之一，因此学习如何开发一款简易的计算器应用程序是学习Android Studio开发的一个很好的开始。Android Studio是一款Google开发的用于创建安卓应用的集成开发环境(IDE), 它可以帮助开发者快速设计、开发和测试应用程序。接下来我将为大家介绍如何使用Android Studio创建一个简易的计算器应用程序。
Android 源码分析：ViewGroup
liufeismart2024的博客
07-23 410
如果要自定义ViewGroup，对添加到其中的View对应LayoutParams有特殊要求(如需要是MarginLayoutParams)，可重写ViewGroup.generateDefaultLayoutParams()和ViewGroup.generateLayoutParams()如果调用的是ViewGroup.addView(View)，会调用ViewGroup.generateDefaultLayoutParams()创建需要的LayoutParamas对象。
好的，可滑动带刻度时间轴并显示年月日日期 android实现
06-09
好的，如果您想在 Android 上实现可滑动带刻度时间轴并显示年月日日期，可以使用 RecyclerView 来实现，下面是一个简单的实现思路： 1. 在布局文件中，使用 RecyclerView 来展示时间轴，可以使用 LinearLayoutManager 实现水平滚动的效果。 2. 自定义 RecyclerView 的 ItemDecoration，实现刻度尺的样式和布局。在 ItemDecoration 中，可以使用 Canvas 绘制刻度尺和日期文字，计算每个 Item 的位置和大小。 3. 自定义 RecyclerView 的 Adapter，根据需要显示的日期范围，动态生成对应数量的 Item，并为每个 Item 设置日期和位置信息。 4. 在 RecyclerView 中监听滑动事件，根据滑动的距离和方向，计算出当前时间轴应该显示的日期范围，并更新 Adapter 中的数据。 5. 为了实现可滑动的效果，可以使用 RecyclerView 的 smoothScrollToPosition() 方法实现滑动动画，同时，当滑动到边缘时，需要动态地添加或删除 Item，使得时间轴始终显示滑动位置附近的日期。 以上是一个基本的实现思路，具体细节还需要根据需求进行调整和完善。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值