android - ConstraintLayout 防止顶部和底部小部件重叠

Question

我正在尝试创建一个包含三组小部件的布局。我希望一组限制在顶部，一组限制在底部，一组漂浮在两组之间的空间中间。布局将在 fragment 中使用，因此它可能会被压扁，尤其是在显示键盘时。我无法弄清楚如何防止两组重叠，同时将顶部和底部限制在布局的顶部和底部。

我想了几种方法，但我想不出如何正确实现。

• 使用 app:layout_constraintVertical_bias 或 app:layout_constraintVertical_weight 将小部件拉到一起或分开。
• 使用一条链，但在组之间有中断。我想不出如何将链条分开，让不同的群体分散开来。
• 指定取决于所包含的小部件的最小高度。 (它将包含在 ScrollView 中，因此如果高度受到限制，它将起作用)
• 创建打包链组，其中打包链位于展开链中。

或者有比这些更好的方法来获得我想要的东西吗？

注意:我希望顶部和底部组不与父布局相对，但我无法弄清楚如何让这些组动态地与父布局保持距离也没有将小组分开。我希望顶部和底部组靠近父布局，但不一定正好反对它。最好让它们靠着父布局而不是靠近中间。理想情况下，我可以为此使用 app:layout_constraintVertical_bias 或 app:layout_constraintVertical_weight。

---

代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto" >


    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
        android:layout_marginRight="@dimen/edit_text_horizontal_margin"
        android:layout_marginTop="@dimen/edit_text_vertical_margin"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/edit_text_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:hint="Edit Text 1"
        android:selectAllOnFocus="true" />

    <EditText
        android:id="@+id/edit_text_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/edit_text_horizontal_margin"
        android:layout_marginRight="@dimen/edit_text_horizontal_margin"
        android:layout_marginTop="@dimen/edit_text_vertical_margin"
        android:layout_marginBottom="@dimen/edit_text_vertical_margin"

        app:layout_constraintTop_toBottomOf="@id/edit_text_1"
        app:layout_constraintBottom_toTopOf="@id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:hint="Edit Text 2"
        android:selectAllOnFocus="true" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        app:layout_constraintTop_toBottomOf="@id/edit_text_2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:enabled="false"
        android:text="Button" />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/progress_bar_margin"

        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:visibility="gone" />

    <TextView
        android:id="@+id/clickable_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/text_button_horizontal_margin"
        android:layout_marginRight="@dimen/text_button_horizontal_margin"
        android:layout_marginTop="@dimen/text_button_vertical_margin"
        android:layout_marginBottom="@dimen/text_button_vertical_margin"
        android:paddingLeft="@dimen/text_button_horizontal_margin"
        android:paddingRight="@dimen/text_button_horizontal_margin"
        android:paddingTop="@dimen/text_button_vertical_margin"
        android:paddingBottom="@dimen/text_button_vertical_margin"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"

        android:text="Clickable Text View"
        android:clickable="true"/>

</androidx.constraintlayout.widget.ConstraintLayout>

---

图片

- - - -

这是我所拥有的，以及我希望它看起来如何。 - - - - - 这是重叠的问题。

Answer 1

对于 TextView ，在按钮的顶部到底部添加约束，即 app:layout_constraintTop_toBottomOf="@+id/button"。 IMO 总是尽可能限制所有 4 个角度；从上到下开始。这样，当您的 View 被“压缩”时，它仍将遵守约束集