Question

我有一个包含许多输入的注册表单，每个输入的边距为8dp。它还有一个标题，24dp marginBottom。在某些情况下，必须隐藏输入。

所以我希望第一个，无论它是什么，从标题获得特定的24dp边距，以及彼此8dp的边距。

我想用ConstraintLayout解决这个问题。这是我的xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/cho_card_document"
tools:background="#FF0000"
tools:ignore="SpUsage, RtlHardcoded,RtlSymmetry"
android:layout_width="match_parent"
android:layout_height="match_parent">

<View
    android:layout_width="274dp"
    android:layout_height="200dp"
    android:background="@drawable/cho_shape_round_white_background"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="50dp"
    android:id="@+id/cho_ticket_view"/>

<TextView
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:id="@+id/title"
    tools:text="Awesome Title Form"
    android:layout_marginTop="24dp"
    android:layout_marginLeft="16dp"
    app:layout_constraintRight_toRightOf="@+id/cho_ticket_view"
    app:layout_constraintLeft_toLeftOf="@+id/cho_ticket_view"
    app:layout_constraintTop_toTopOf="@+id/cho_ticket_view" />

<TextView
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:id="@+id/input1"
    tools:text="Awesome Input 1"
    android:layout_marginTop="24dp"
    app:layout_constraintLeft_toLeftOf="@+id/title"
    app:layout_constraintTop_toBottomOf="@+id/title" />

<TextView
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:id="@+id/input2"
    tools:text="Awesome Input 2"
    android:layout_marginTop="8dp"
    app:layout_constraintLeft_toLeftOf="@+id/title"
    app:layout_constraintTop_toBottomOf="@+id/input1" />

<TextView
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:id="@+id/input3"
    tools:text="Awesome Input 3"
    android:layout_marginTop="8dp"
    app:layout_constraintLeft_toLeftOf="@+id/title"
    app:layout_constraintTop_toBottomOf="@+id/input2" />

</android.support.constraint.ConstraintLayout>

编辑：我已经用实际的实现更新了布局，还有一些截图。

在：

隐藏input1后，我input2离title

太近了

Answer 1

你可以通过做两件事来解决这个问题：

重新平衡垂直边距的分配方式
创建一个垂直的＆＃34;链＆＃34;在您的标题和三个输入视图之间

重新平衡利润很容易。更改android:layout_marginTop="24dp"视图中的input1以改为使用8dp（就像input2和input3），并将android:layout_marginBottom="16dp"添加到title 1}}查看。这样，无论您的哪个输入视图被隐藏/可见，标题和第一个输入之间总共会有24dp。

创建链条有点复杂。链中的每个视图都必须具有顶部和底部约束。链中的第一个视图应该将其顶部约束到cho_ticket_view，链中的最后一个视图应该将其底部约束到cho_ticket_view，其他所有视图都应该被约束（在两个方向上）到它的邻居。

这就是它的样子（为了简洁省略其他属性）：

<TextView
    android:id="@+id/title"
    app:layout_constraintTop_toTopOf="@+id/cho_ticket_view"
    app:layout_constraintBottom_toTopOf="@+id/input1"/>

<TextView
    android:id="@+id/input1"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:layout_constraintBottom_toTopOf="@+id/input2"/>

<TextView
    android:id="@+id/input2"
    app:layout_constraintTop_toBottomOf="@+id/input1"
    app:layout_constraintBottom_toTopOf="@+id/input3"/>

<TextView
    android:id="@+id/input3"
    app:layout_constraintTop_toBottomOf="@+id/input2"
    app:layout_constraintBottom_toBottomOf="@+id/cho_ticket_view"/>

一旦你有这八个约束，这四个视图现在是一个＆＃34;链＆＃34;。可以通过向＆＃34; head＆＃34;添加额外属性来配置链。链（第一个视图，即你的title）。

您需要title视图中的这些属性：

    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintVertical_bias="0"

使链条成为＆＃34;包装＆＃34;链意味着它将所有额外空间放在链外（而不是在链中的视图之间）。赋予它0的垂直偏差意味着所有额外的空间都在链条下方（而非上方）。

这里是完整的XML，结合了上面提到的所有内容：

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/cho_card_document"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:background="#FF0000"
    tools:ignore="SpUsage, RtlHardcoded,RtlSymmetry">

    <View
        android:id="@+id/cho_ticket_view"
        android:layout_width="274dp"
        android:layout_height="200dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/cho_shape_round_white_background"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintTop_toTopOf="@+id/cho_ticket_view"
        app:layout_constraintLeft_toLeftOf="@+id/cho_ticket_view"
        app:layout_constraintRight_toRightOf="@+id/cho_ticket_view"
        app:layout_constraintBottom_toTopOf="@+id/input1"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintVertical_bias="0"
        tools:text="Awesome Title Form"/>

    <TextView
        android:id="@+id/input1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="@+id/title"
        app:layout_constraintBottom_toTopOf="@+id/input2"
        tools:text="Awesome Input 1"/>

    <TextView
        android:id="@+id/input2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/input1"
        app:layout_constraintLeft_toLeftOf="@+id/title"
        app:layout_constraintBottom_toTopOf="@+id/input3"
        tools:text="Awesome Input 2"/>

    <TextView
        android:id="@+id/input3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/input2"
        app:layout_constraintLeft_toLeftOf="@+id/title"
        app:layout_constraintBottom_toBottomOf="@+id/cho_ticket_view"
        tools:text="Awesome Input 3"/>

</android.support.constraint.ConstraintLayout>

＆＃13;

Answer 2

最佳解决方案是将它们放在Contraintlayout中。然后，您将该布局限制在所需边距的标题表单底部。然后，当您隐藏输入1时，输入2最多可以向上移动并替换输入1的位置但不会移动整体布局。希望这有帮助

Answer 3

    <RelativeLayout
        android:layout_margin="24dp"
        android:id="@+id/title1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/title"
        android:text="Awesome Title Form"
       />
</RelativeLayout>
    <RelativeLayout
        android:layout_margin="8dp"
        android:layout_below="@+id/title1"
        android:id="@+id/subject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/input1"
        android:text="Awesome Input 1"
    />

    <TextView
        android:layout_below="@+id/input1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/input2"
        android:text="Awesome Input 2"
   />

    <TextView
        android:layout_below="@+id/input2"

        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/input3"
        android:text="Awesome Input 3"

 />
    </RelativeLayout>

垂直约束许多视图永不跨越一条线？

3 个答案: