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

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

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

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

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

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

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

图片

Desired Layout Look - - - - Overlap Problem

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

最佳答案

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

关于android - ConstraintLayout 防止顶部和底部小部件重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58229460/

相关文章:

android - 使用选择器使按钮背景透明

java - 解析 JSON - JSONObject 类型的 null 无法转换为 JSONArray

android - 全屏表面 View 隐藏 snackbar

android - 如何处理 android 中 TabLayout 中的重叠 fragment ?

android - 如何以编程方式创建垂直或水平指南

android - ConstraintLayout 将 TextView 弹出屏幕

android - 将 View 与另一个 View 的左右位置对齐,约束布局?

android - ExoPlayer 和 HLS 流媒体

android - AsyncTask 中的蓝牙发现

android - htc explorer USB 驱动程序信息