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

【问题标题】：ConstraintLayout Prevent Overlap of Top and Bottom WidgetsConstraintLayout 防止顶部和底部小部件重叠
【发布时间】：2019-10-04 03:17:08
【问题描述】：

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

我想了几种方法来做到这一点，但我无法弄清楚如何正确实施。

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

图片

- - - -

这就是我所拥有的，以及我希望它的外观。 - - - - - 这里是重叠问题。

【问题讨论】：

@JeelVankhede 没用

标签： android android-layout android-constraintlayout android-layout-weight

【解决方案1】：

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

【讨论】：

这就是我最初尝试的方法，但这使得所有小部件都分散开来，而不是像我想要的那样分组。

【解决方案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>

【讨论】：

当高度较小时，TextView 与其他小部件重叠仍然存在问题。
我上传了一张适合我的图片。顺便说一句，你说的是哪个小部件的高度。
当我说高度时，我说的是整个布局的高度。这是因为我将使用这个布局作为一个片段，它可能在显示中具有一个小窗口。发生这种情况时，小部件会重叠，如第二张图片所示。
我可以看看您包含此布局代码的布局。在 TextView 中再添加一行 'app:layout_constraintTop_toBottomOf="@id/signInBtn" ' 然后它将修复代码。

【解决方案3】：

我相信您可以使用Guidelines 和app:layout_constraintHeight_percent 来解决您的问题。

考虑这种布局：

<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent">


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:enabled="false"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline3"
    app:layout_constraintHeight_percent="0.1"

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

<EditText
    android:id="@+id/edit_text_2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:hint="Edit Text 2"
    android:selectAllOnFocus="true"
    app:layout_constraintBottom_toTopOf="@id/button"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/edit_text_1" />

<EditText
    android:id="@+id/edit_text_1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:hint="Edit Text 1"
    android:selectAllOnFocus="true"
    app:layout_constraintBottom_toTopOf="@id/edit_text_2"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"

    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:layout_constraintBottom_toTopOf="@id/clickable_text_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"

    app:layout_constraintTop_toBottomOf="@id/button" />

<TextView
    android:id="@+id/clickable_text_view"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:clickable="true"
    android:gravity="center"
    android:text="Clickable Text View"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent="0.1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".35" />

每个视图高度都等于屏幕高度的10%，这是因为app:layout_constraintHeight_percent="0.1" 属性。这将为您解决重叠问题，因为您将能够告诉您的视图相对于屏幕尺寸的高度。
我也使用了app:layout_constraintGuide_percent=".35" 属性的指南来告诉指南将出现在屏幕上，通过这样做我可以限制不同的视图，你不必坚持你的观点你提到的屏幕底部的顶部（我希望顶部和底部组不适合父布局）

您的布局将如下所示：（这是预览图像，以便更好地理解指南）

【讨论】：