RecyclerView 在 ConstraintLayout 中将其下方按钮推出屏幕答案

【问题标题】：RecyclerView pushes its below button out of the screen in ConstraintLayoutRecyclerView 在 ConstraintLayout 中将其下方按钮推出屏幕
【发布时间】：2020-08-24 06:04:08
【问题描述】：

我正在尝试设置一个布局，其中一个“X”按钮固定在屏幕顶部，然后两个元素在视图中居中。一个是回收器视图，然后固定在回收器视图下方，一个用于提交表单的按钮。我目前一直在使用的布局，直到回收站视图超出其界限。然后提交按钮被推到视图边界以下，回收器视图不会停留在布局内。如果回收器视图变大，如何使两个回收器和按钮视图居中但不让按钮超出视图边界？

使用 Small Recycler View 的视图显示为（它应该居中。我的示例稍微偏离了。）

更大的 Recycler View 应该如何显示（recycler 视图的内容太大而无法滚动）

View 如何在更大的 Recycler View 中实际显示（recycler 视图会滚动，但现在它将按钮从视图底部推开，显示为按钮被切断）

XML 布局的相关代码块

<LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.45"
        android:orientation="vertical"
        android:background="@color/backgroundLightSecondary"
        android:padding="20dp" >

        <Button
            android:id="@+id/bt_close"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="end"
            android:background="@drawable/ic_close"
            android:textColor="@color/textLightPrimary"  />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center_vertical">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical">

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/rv_item_options"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <Button
                android:id="@+id/bt_order"
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:layout_weight="0"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:background="@drawable/bt_rounded_corner"
                android:fontFamily="@font/microbrew_two"
                android:padding="3dp"
                android:text="@string/btn_add_to_order"
                android:textColor="@color/backgroundLightSecondary"
                android:textSize="20sp" />

        </LinearLayout>

    </LinearLayout>

【问题讨论】：

将按钮固定在中间，使其不会被按下。

标签： android xml android-layout android-recyclerview

【解决方案1】：

在这种情况下，最好的方法是使用ConstraintLayout 作为容器。正如您在问题中提到的，您想将 RecyclerView 放在中心。因此，它导致将其顶部和底部绑定到按钮。

另一方面，如果我们在RecyclerView 和submitButton 之间建立一条链，垂直链样式为packed，则submitButton 将粘在RecyclerView 的底部（高度为@ 987654329@ 能够增长）并随着它的底部移动直到它到达屏幕底部（因为app:layout_constraintBottom_toBottomOf="parent"）。

关键是设置app:layout_constrainedHeight="true"为RecyclerView导致两个按钮不重叠。

<?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="match_parent"
    android:padding="8dp" >

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/closeImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_close_24"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintBottom_toTopOf="@id/submitButton"
        app:layout_constraintTop_toBottomOf="@id/closeImageButton"
        app:layout_constraintVertical_chainStyle="packed" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/recyclerView" />

</androidx.constraintlayout.widget.ConstraintLayout>

视觉效果：

【讨论】：

这是完美的。我有一个不同的用例，您可以提供帮助。如果我想在回收站视图上方有一个 TextView，它将自己固定到顶部，那么当回收站视图较小时，它会将文本视图放在顶部，将提交放在底部，我该如何调整这个视图？（我第一次问这个问题时没有的新要求）
其实，nvm。将视图约束到回收器的顶部，并完美地添加了打包作品的链条样式。这很棒。我不知道链条样式和受限高度是如何工作的。一旦时间框架过去，将奖励您代表。再过4个小时就不行了。谢谢你。
不客气，伙计：）我很高兴看到它对你有帮助。
@aminography 可以让按钮区域的背景透明吗？
@mario：没有问题。在上面的例子中，背景是透明的，白色区域是因为活动背景。

【解决方案2】：

据我了解，您希望在顶部有一个按钮，然后是 recyclerview，而不是最后一个提交按钮。如果 recyclerview 的大小增加，提交按钮不应该改变它的位置。

试试这个我做一个粗略的布局

<LinearLayout  //This is root layout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

代码输出如下所示

【讨论】：

这不会使回收站视图居中，并为较小的回收站内容提交按钮。它只会导致回收站内容填充中间空间，而不管其内容大小。
所以你希望提交按钮总是在recyclerview的末尾？或者在最后提交较小的recyclerview的按钮，对于大的recyclerview，提交按钮应该在屏幕底部，如图所示。
它应该始终位于回收站视图的末尾，但回收站视图不应超出其父级的边界或按下父级边界下方的按钮。

【解决方案3】：

您可以通过使用 ConstraintLayout 在一个层次结构中完成您想要的一切。例如，我将您的 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="match_parent">

<Button
    android:id="@+id/bt_close"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@drawable/ic_close"
    android:textColor="@android:color/white"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rv_item_options"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="10dp"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:layout_constraintBottom_toTopOf="@+id/bt_order"
    app:layout_constraintTop_toBottomOf="@+id/bt_close" />

<Button
    android:id="@+id/bt_order"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_dark"
    android:padding="3dp"
    android:text="Button"
    android:textColor="@android:color/white"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/rv_item_options" />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

这样，如果回收站视图的内容变得太大，它不会滚动并且按钮仍然会被推离屏幕底部。
这也达不到目的。有了这个，回收器视图总是在两个按钮之间填充父 ConstraintLayout 的顶部和底部之间的空间。对于回收器中较小的内容大小，回收器视图和提交按钮不会在父视图中居中。