Android 约束布局居中对齐两个文本字段

Question

我想将两个项目与另一个元素居中对齐，但我遇到了问题。

现在，如果我将顶部文本约束到左侧元素的顶部，将底部文本约束到左侧元素的底部并将它们链接起来。整个文本会移动。我想修复顶部文本元素，但如果文本较少，它仍会居中

另一种情况还没有被答案覆盖，就是如果最上面的文字不止一行

Answer 1

在左侧视图的 50% 垂直标记处放置一个 Space。然后，您可以像这样将其他视图垂直约束到 Space：

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:background="#8BC34A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view"
        app:layout_constraintStart_toEndOf="@id/view"
        app:layout_constraintTop_toTopOf="@id/view" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="This is the upper TextView."
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toTopOf="@+id/space" />

</androidx.constraintlayout.widget.ConstraintLayout>

这看起来像下面的单行文本：

底部的 multi-line 文本像这样 TextView:

为了解决评论问题，如果顶部 TextView 可以有多行并且只能向下移动，请使用 [=46 添加一个结束屏障=]和上面的TextView作为引用id如下：

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:background="#8BC34A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view"
        app:layout_constraintStart_toEndOf="@id/view"
        app:layout_constraintTop_toTopOf="@id/view" />

    <TextView
        android:id="@+id/helperView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        tools:visibility="invisible" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="This is the upper TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toTopOf="@id/helperView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="This is the lower TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toBottomOf="@id/barrier" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="space,textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android 约束布局居中对齐两个文本字段

Android constraint layout center align two text fields

android

android-constraintlayout