时间戳

首页 > 解决方案 > RecyclerView 项目装饰的负边距

android - RecyclerView 项目装饰的负边距

问题描述

我需要为我的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，但第二个项目位于第一个项目的顶部，但我需要第一个项目位于第二个项目的顶部。

标签： androidandroid-layoutandroid-recyclerviewmarginitem-decoration

解决方案

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

因此，主要挑战是：

  • CardView对可能需要使用画布以编程方式构建的曲线切口以获得更好的结果。但为简单起见，这被替换为BottomAppBar包裹在 aCoordinatorLayout中，以便与顶部圆/间隙产生曲线效果。

  • 将顶部View替换Fab为. _ _ 检查材料设计。layout_anchorBottomAppBar

    backgroundTint并且具有剪切行为需要通过设置透明并删除FAB来使FAB不存在outlineProvider

  • 使特定行的顶部切口（间隙）与顶行重叠，就像它是它的一部分一样。这适用于根视图上的负边距。

<?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

推荐阅读