ConstraintLayout 在底部 Sheet 视图中无法正常工作

Question

问题

在底部 sheet 中使用时，ConstraintLayout 无法按预期工作。在此实例中，ConstraintLayout 包含 2 个图像，其中包含句柄和 1 个底部内容的视图 Sheet。内容视图应该放置在没有发生的句柄图像下方。

实施

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottomSheet"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <ImageView
                android:id="@+id/bottom_handle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/ic_bottom_sheet_handle"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:elevation="16dp"
                android:src="@drawable/ic_save_planet_dark_48dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="@dimen/bottom_sheet_elevation_height"
                android:background="@color/bottom_sheet_handle_elevation"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

            <FrameLayout
                android:id="@+id/savedContentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

        </androidx.constraintlayout.widget.ConstraintLayout>

结果

内容视图中的操作栏浮动在句柄视图后面。

预期结果

句柄位于内容视图和操作栏上方。

可能的解决方案

尽管我更愿意使用 ConstraintLayout 而不是 RelativeLayout，但 RelativeLayout 在这里可以工作。

<RelativeLayout
            android:id="@+id/bottomSheet"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:elevation="16dp"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <ImageView
                android:id="@+id/bottom_handle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/ic_bottom_sheet_handle"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:elevation="16dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:src="@drawable/ic_save_planet_dark_48dp" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="@dimen/bottom_sheet_elevation_height"
                android:background="@color/bottom_sheet_handle_elevation"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:layout_alignBottom="@id/bottom_handle"/>

            <FrameLayout
                android:layout_below="@id/bottom_handle"
                android:id="@+id/savedContentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white" />

        </RelativeLayout>

Answer 1

尝试在约束布局中更改它

<FrameLayout
 ....

     android:layout_height="wrap_content"
     android:layout_width= "wrap_content"
>

Answer 2

不建议将 match_parent 用于 ConstraintLayout 的 children，如 documentation 中所述：

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

在您的情况下，将 FrameLayout 的高度设置为 match_parent 会导致它采用 parent 的高度，而不管约束如何。

而不是使用 match_parent 你应该为你的 FrameLayout 添加底部约束并使用 0dp 到 match_constraint 作为高度：

<FrameLayout
    android:id="@+id/savedContentContainer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

ConstraintLayout 在底部 Sheet 视图中无法正常工作

ConstraintLayout Does Not Work Properly in a Bottom Sheet View

android

android-layout

android-relativelayout

android-constraintlayout

问题

实施

结果

预期结果

可能的解决方案