RecyclerView 在 ConstraintLayout 中将其下方按钮推出屏幕 [英] RecyclerView pushes its below button out of the screen in ConstraintLayout

问题描述

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

I am attempting to set up a layout with an "X" button pinned to the top of the screen, and then two elements centered in the view. One a recycler view and then, pinned below the recycler view, a button for form submission. The layout I currently have worked until the recycler view outgrows its bounds. Then the submission button is pushed below the bounds of the view and the recycler view does not stay within the layout. How can I center the two recycler and button views but not have the button go past view bounds if the recycler view grows large?

View With Small Recycler View 显示为(它应该居中.我的例子有点偏离.)

在较大的回收器视图中，视图应该如何显示(回收器视图的内容太大而无法滚动)

使用较大的 Recycler View 时 View 实际上如何显示(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>

推荐答案

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

In such cases, the best way is to use a ConstraintLayout as the container. As you mentioned in the question, you want to lay the RecyclerView at the center. So, it leads to binding its top and bottom to the buttons.

另一方面，如果我们在 RecyclerView 和 submitButton 之间建立一个链，垂直链样式为 packed，submitButton 会粘在 RecyclerView 的底部(高度是 wrap_content 才能增长)并随着它的底部移动直到它到达底部屏幕(因为 app:layout_constraintBottom_toBottomOf=parent").

On the other hand, if we make a chain between the RecyclerView and submitButton with a vertical chain style of packed, the submitButton would stick to the bottom of RecyclerView (which height is wrap_content to be able to grow) and moves with its bottom until it reaches the bottom of the screen (because of app:layout_constraintBottom_toBottomOf="parent").

关键是要为RecyclerView设置app:layout_constrainedHeight=true"，使两个按钮不重叠.

The key point is to set app:layout_constrainedHeight="true" for the RecyclerView leading to not overlap with the two buttons.

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

视觉效果:

这篇关于RecyclerView 在 ConstraintLayout 中将其下方按钮推出屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！