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

Question

我正在尝试创建具有三组小部件的布局。我希望一组约束在顶部，一组约束在底部，而另一组漂浮在两组之间的中间。该布局将被片段使用，因此可能会被压缩，尤其是在显示键盘时。我很难弄清楚如何防止两组重叠，同时将顶部和底部限制在布局的顶部和底部。

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

• 使用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”。海事组织总是尽可能地限制所有四个角度。从上到下开始。这样，当您的视图被“压缩”时，它将仍然遵守约束集]

Answer 2

这里，尝试这个。

<?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"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/emailId"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="36dp"
        android:hint="Enter email ID"
        android:inputType="textEmailAddress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="36dp"
        android:hint="Enter password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailId" />

    <Button
        android:id="@+id/signInBtn"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="@color/colorAccent"
        android:text="Sign in"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/password" />

    <TextView
        android:id="@+id/analyticsLog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:text="Click me to create a log"
        android:textColor="@android:color/holo_blue_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>