如何为StaggeredGridLayoutManager的RecyclerView添加带时间戳的文本分隔符？

你遇到的问题很典型：ItemDecoration 默认只能处理间距，没法直接绘制文本；而且在交错网格布局中，Item的位置和跨度不规则，直接用基础的ItemDecoration很容易出现布局错位。下面给你两种可行的解决方案，按可靠性排序：

方案一：Adapter多类型布局（推荐） #

这种方法把时间戳分隔符当成独立的Item类型，适配交错网格的灵活性最高，布局也更容易控制。

步骤1：定义Item类型和数据结构 #

先区分内容Item和分隔符Item：

sealed class FeedItem {
    data class ContentItem(val id: Int, val content: String, val timestampGroup: String) : FeedItem()
    data class TimestampItem(val timestamp: String) : FeedItem()
}

步骤2：预处理数据，插入分隔符 #

根据业务逻辑（比如按时间分组），在原始数据中插入时间戳Item：

fun generateFeedItems(originalContent: List<FeedItem.ContentItem>): List<FeedItem> {
    val result = mutableListOf<FeedItem>()
    var lastTimestampGroup: String? = null

    originalContent.forEach { content ->
        if (content.timestampGroup != lastTimestampGroup) {
            result.add(FeedItem.TimestampItem(content.timestampGroup))
            lastTimestampGroup = content.timestampGroup
        }
        result.add(content)
    }
    return result
}

步骤3：实现多类型Adapter #

class FeedAdapter(private val items: List<FeedItem>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    companion object {
        private const val TYPE_TIMESTAMP = 0
        private const val TYPE_CONTENT = 1
    }

    override fun getItemViewType(position: Int): Int {
        return when (items[position]) {
            is FeedItem.TimestampItem -> TYPE_TIMESTAMP
            is FeedItem.ContentItem -> TYPE_CONTENT
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        return if (viewType == TYPE_TIMESTAMP) {
            val view = inflater.inflate(R.layout.item_timestamp, parent, false)
            TimestampViewHolder(view)
        } else {
            val view = inflater.inflate(R.layout.item_content, parent, false)
            ContentViewHolder(view)
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is TimestampViewHolder -> {
                val timestampItem = items[position] as FeedItem.TimestampItem
                holder.tvTimestamp.text = timestampItem.timestamp
                // 让分隔符跨全列显示
                val params = holder.itemView.layoutParams as StaggeredGridLayoutManager.LayoutParams
                params.isFullSpan = true
            }
            is ContentViewHolder -> {
                val contentItem = items[position] as FeedItem.ContentItem
                holder.tvContent.text = contentItem.content
            }
        }
    }

    override fun getItemCount() = items.size

    class TimestampViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvTimestamp: TextView = itemView.findViewById(R.id.tv_timestamp)
    }

    class ContentViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val tvContent: TextView = itemView.findViewById(R.id.tv_content)
    }
}

步骤4：分隔符布局（item_timestamp.xml） #

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_timestamp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="12dp"
    android:textColor="@color/gray_600"
    android:textSize="14sp"
    android:gravity="center"/>

这种方法的优势是：分隔符作为独立Item，完全适配交错网格的布局规则，不会出现错位；布局样式可以自由定制，比如添加背景、图标等。

方案二：改进ItemDecoration绘制文本 #

如果不想修改Adapter和数据结构，可以重写ItemDecoration的onDraw方法，手动绘制时间戳文本，但需要处理交错网格的位置计算，逻辑相对复杂。

改进后的ItemDecoration代码 #

class TimestampItemDecoration(
    context: Context,
    private val adapter: RecyclerView.Adapter<*>
) : RecyclerView.ItemDecoration() {
    private val textPaint = Paint().apply {
        color = Color.parseColor("#666666")
        textSize = spToPx(context, 14).toFloat()
        textAlign = Paint.Align.CENTER
        isAntiAlias = true
    }
    private val verticalSpace = dpToPx(context, 40) // 预留文本显示空间

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        val position = parent.getChildAdapterPosition(view)
        if (position == RecyclerView.NO_POSITION) return

        // 判断当前Item是否需要显示顶部分隔符
        if (shouldShowTimestamp(position)) {
            outRect.top = verticalSpace
        }
        outRect.bottom = dpToPx(context, 10) // 普通Item间距
    }

    override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDraw(c, parent, state)
        val childCount = parent.childCount

        for (i in 0 until childCount) {
            val child = parent.getChildAt(i)
            val position = parent.getChildAdapterPosition(child)
            if (position == RecyclerView.NO_POSITION || !shouldShowTimestamp(position)) continue

            // 计算文本绘制位置：居中显示在Item顶部预留空间
            val x = parent.width / 2f
            val y = child.top - verticalSpace / 2f + (textPaint.descent() - textPaint.ascent()) / 2f
            val timestamp = getTimestampForPosition(position)
            c.drawText(timestamp, x, y, textPaint)
        }
    }

    // 根据业务逻辑判断是否显示分隔符（示例：每组第一个Item）
    private fun shouldShowTimestamp(position: Int): Boolean {
        if (position == 0) return true
        val currentItem = adapter.getItem(position) as FeedItem.ContentItem
        val prevItem = adapter.getItem(position - 1) as FeedItem.ContentItem
        return currentItem.timestampGroup != prevItem.timestampGroup
    }

    // 获取对应位置的时间戳文本
    private fun getTimestampForPosition(position: Int): String {
        val item = adapter.getItem(position) as FeedItem.ContentItem
        return item.timestampGroup
    }

    private fun dpToPx(context: Context, dp: Int): Int {
        return (dp * context.resources.displayMetrics.density).toInt()
    }

    private fun spToPx(context: Context, sp: Int): Int {
        return (sp * context.resources.displayMetrics.scaledDensity).toInt()
    }
}

使用方式 #

val adapter = FeedAdapter(generateFeedItems(originalData))
binding.recyclerView.adapter = adapter
binding.recyclerView.addItemDecoration(TimestampItemDecoration(requireContext(), adapter))

这种方法的注意点：需要确保shouldShowTimestamp和getTimestampForPosition逻辑正确；如果Item存在跨列（isFullSpan=true），需要调整文本绘制的x坐标，避免错位。

内容的提问来源于stack exchange，提问作者L00tma5ter