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

Question

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

View With Small Recycler View 显示为（它应该居中。我的例子有点偏离。）

视图应该如何与更大的回收器视图一起出现（回收器视图的内容太大而无法滚动）

使用更大的回收器视图时视图实际上是如何显示的（回收器视图确实滚动，但现在它将按钮推离视图底部，这显示为按钮被切断）

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>

Answer 1

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

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

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

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

视觉效果：

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

代码的输出看起来像这样

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