RecyclerView 项目装饰的负边距答案

【问题标题】：Negative Margins For RecyclerView Item DecorationRecyclerView 项目装饰的负边距
【发布时间】：2021-08-26 08:25:11
【问题描述】：

我需要为我的RecyclerView 项目实现以下布局（图片代表两行）：

这是我的XML 文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/theme_primary_color">

    <View
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@drawable/half_circle"
        android:translationZ="3dp"
        app:layout_constraintBottom_toTopOf="@id/cvTop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/cvTop" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cvTop"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        android:layout_marginEnd="8dp"
        app:cardCornerRadius="@dimen/card_view_corner"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.cardview.widget.CardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabCall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_call"
        app:backgroundTint="@color/fab_green"
        app:fabSize="mini"
        app:layout_constraintBottom_toBottomOf="@+id/cvTop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cvTop" />

</androidx.constraintlayout.widget.ConstraintLayout>

我尝试将负边距设置为 root ConstraintLayout，但第二个项目位于第一个项目的顶部，但我需要第一个项目位于第二个项目的顶部。

【问题讨论】：

两个项目代表一行？
没有。每个项目都放置在单独的行中
这听起来不是一个好的设计理念，无论您如何实现它，视图边界都会重叠，这将导致触摸事件出现问题（映射到重叠区域上的错误位置）
有没有无bug的解决方案？
不是添加半圆视图，而是采用中间有半圆的自定义卡片或中间有半圆的矩形视图

标签： android android-layout android-recyclerview margin item-decoration

【解决方案1】：

所以，这并不完全是您想要的，但至少它具有与您想要的相同的布局，采用更简单的方法。

因此，主要挑战是：

在CardView 上进行曲线切割可能需要使用画布以编程方式构建以获得更好的结果。但为简单起见，这被替换为 BottomAppBar 包裹在 CoordinatorLayout 中，以便具有顶部圆/间隙的曲线效果。
通过将layout_anchor 设置为BottomAppBar，将顶部View 替换为Fab 以获得Inset FAB。 Check material design for this.

并且具有剪切行为需要通过设置透明 backgroundTint 并删除 outlineProvider 来使 FAB 看起来不存在。
使特定行的顶部切口（间隙）与顶行重叠，就像它是它的一部分一样。这适用于根视图上的负边距。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-20dp"
    android:background="@android:color/transparent">


    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cvTop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:outlineProvider="none"
            app:backgroundTint="@android:color/transparent"
            app:layout_anchor="@id/navigation" />

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_gravity="bottom"
            android:layout_marginStart="8dp"
            android:layout_marginTop="2dp"
            android:layout_marginEnd="8dp"
            app:backgroundTint="@android:color/holo_blue_dark">

        </com.google.android.material.bottomappbar.BottomAppBar>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabCall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@color/fab_green"
        app:layout_constraintBottom_toBottomOf="@+id/cvTop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cvTop" />

    <TextView
        android:id="@+id/tv_item_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Item No. 0" />

</androidx.constraintlayout.widget.ConstraintLayout>

注意：您可以删除TextView，我只是添加它以检查该项目不会像您的情况那样改变其位置。

RecyclerView上的预览

更新：

一个新的挑战：

只有FAB 的上半部分会拦截触摸事件，因为任何特定行都将放在其直接顶行之上；因此顶行的FAB 不会拦截交叉区域的事件。

嗯，这可以使用画布和自定义视图很好地操作。但在当前方法中，这也可以通过从下到上布置RecyclerViews 的行来解决。一种方法是setReverseLayout(true)，然后是：

=> 在提交给适配器之前反转RecyclerView 列表位置

=> 或者在适配器中使用mList.size - 1 - position 而不是position。假设项目列表是mList

【讨论】：

出于好奇，您在触摸事件处理方面遇到过任何挑战吗？特别是在 FAB 的底部，我最初的假设是它可能需要一个知道其剪辑边界的自定义视图来消耗或传递触摸输入事件 cmiiw
@rahul.taicho 很可能需要在FAB的相交底部处理，我会测试它
@rahul.taicho 你是对的，因为事件在顶部的非相交部分被拦截，但不是在底部。我正在努力解决这个问题。
@rahul.taicho 请查看更新后的答案。
哇！反向布局技术非常简洁 TIL

【解决方案2】：

我假设一般的 RecyclerView 布局看起来和运行正常，只是每个项目视图都覆盖了上面项目视图的一部分，这样顶部视图的 FAB 的底部就无法看到。

我相信您所看到的是 RecyclerView 自上而下的默认绘制顺序的结果。要将绘制顺序更改为自下而上，以便最底部的视图覆盖上面的视图，请查看RecyclerView.ChildDrawingOrderCallback，看看您是否可以获得可行的反向绘制顺序。

尝试以下方法：

mRecycler.setChildDrawingOrderCallback(new RecyclerView.ChildDrawingOrderCallback() {
    @Override
    public int onGetChildDrawingOrder(int childCount, int i) {
        return childCount - i - 1;
    }
});

我不确定您是如何抵消您的项目的，但请考虑使用RecyclerView.ItemDecoration。像这样的：

class OverlapItemDecoration(context: Context, overlapDp: Int) : RecyclerView.ItemDecoration() {

    private val overlapPx: Int

    init {
        overlapPx = (context.resources.displayMetrics.density * overlapDp.toFloat()).toInt()
    }

    override fun getItemOffsets(
        outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State
    ) {
        if (parent.getChildAdapterPosition(view) == 0) return
        outRect.set(0, overlapPx, 0, 0)
    }
}

这两种技术一起将创建一个 RecyclerView，其中重叠的项目视图从下到上布局，因此 FAB 是 100% 可点击的。

以下是这些技术的应用示例。我还用 MaterialCardView 替换了 CardView，并以 ShapeableImageView 作为背景。

【讨论】：