【问题标题】：ConstraintLayout Does Not Work Properly in a Bottom Sheet ViewConstraintLayout 在底部工作表视图中无法正常工作
【发布时间】：2018-11-02 02:06:22
【问题描述】：

问题

在底部工作表中使用时，ConstraintLayout 无法按预期工作。在这种情况下，一个 ConstraintLayout 包含 2 个图像，包括底部表中内容的句柄和 1 个视图。内容视图应该放置在未发生的句柄图像下方。

实施

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

【问题讨论】：

我对bottomsheetdialogfragment 有同样的问题，但我没有尝试使用RelativeLayout 而不是ConstrainLayout。非常感谢！
我建议不要使用RelativeLayout 和fixing the existing ConstraintLayout。
我花了很多时间找出问题的原因，但 ConstraintLayout 的高度始终为 0（已设置约束 (bottom/start/...)）
我发现有时使用带有百分比的Guideline 会有所帮助，尤其是当视图需要在不同屏幕尺寸之间具有相同的比例时。

标签： android android-layout android-constraintlayout android-relativelayout

【解决方案1】：

尝试在约束布局中更改它

<FrameLayout
 ....

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

【讨论】：

【解决方案2】：

不建议将match_parent 用于ConstraintLayout 的子代，如documentation 所述：

重要提示：不建议将 MATCH_PARENT 用于包含在约束布局。类似的行为可以通过使用来定义 MATCH_CONSTRAINT 与对应的左/右或上/下约束被设置为“父”。

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

您应该为FrameLayout 添加底部约束，而不是使用match_parent，并使用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" />

【讨论】：