约束布局 - 动态对齐视图答案

【问题标题】：Constraint Layout - Align views dynamically约束布局 - 动态对齐视图
【发布时间】：2021-05-28 11:46:22
【问题描述】：

我有 4 个文本视图在约束布局中水平对齐。现在，我需要将第三个或第四个视图推到下一行并将左侧的视图对齐为第一和第二个视图。我怎样才能做到这一点？

【问题讨论】：

请发布您的.xml 约束布局文件供我们审核。
您也可以建议任何其他布局。或者你可以设计你可能觉得有用的东西。我还没有准备任何具体的设计，因为我无法思考如何设计它。

标签： android android-layout user-interface android-constraintlayout

【解决方案1】：

试试这个方法


    <Textview
     android:id="@+id/text1"
    ....
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    />
    
    <Textview
     android:id="@+id/text2"
    ....
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@id/text1"
    app:layout_constraintEnd_toEndOf="parent"
    />
    
    <Textview
     android:id="@+id/text3"
    ....
    app:layout_constraintTop_toBottomOf="@id/text1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    />
    
    <Textview
     android:id="@+id/text4"
    ....
    app:layout_constraintTop_toBottomOf="@id/text2"
    app:layout_constraintStart_toEndOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    />

【讨论】：

【解决方案2】：

您可以使用相对布局轻松做到这一点

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="70dp">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 1"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/text1"
        android:text="Text 2"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:text="Text 3"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:layout_toRightOf="@id/text3"
        android:text="Text 4"
        android:textSize="40sp" />

</RelativeLayout>

但如果你想使用 ConstraintLayout，它应该可以工作

<?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"
    android:padding="70dp">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 1"
        android:textSize="40sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 2"
        android:textSize="40sp"
        app:layout_constraintStart_toEndOf="@+id/text1"
        app:layout_constraintTop_toTopOf="@+id/text1" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 3"
        android:textSize="40sp"
        app:layout_constraintStart_toStartOf="@+id/text1"
        app:layout_constraintTop_toBottomOf="@+id/text1" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 4"
        android:textSize="40sp"
        app:layout_constraintStart_toEndOf="@+id/text3"
        app:layout_constraintTop_toBottomOf="@+id/text2" />

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：