RecyclerView 项目装饰的负边距

Question

我需要为我的 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>

我尝试将负边距设置为根 ConstraintLayout 但第二项位于第一项之上，但我需要第一项位于第二项之上。

Answer 1

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

因此，主要挑战是：

在 CardView 上进行曲线切割可能需要使用 canvas 以编程方式构建以获得更好的结果。但为简单起见，将其替换为包裹在 CoordinatorLayout 中的 BottomAppBar，以便与顶部 circle/gap.
产生曲线效果
将顶部 View 替换为 Fab 以便通过将 layout_anchor 设置为 Inset FAB BottomAppBar。 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 不会拦截交叉区域中的事件。

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

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

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

Answer 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 和 ShapeableImageView 作为背景替换了 CardView。

RecyclerView 项目装饰的负边距

Negative Margins For RecyclerView Item Decoration

android

margin

android-layout

android-recyclerview

item-decoration