Android layout 如何使用约束布局在空间中心对齐

我有以下使用

ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
            android:id="@+id/main_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is my header text and is long"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />


    <LinearLayout
            android:id="@+id/vertical_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/main_header"
            android:layout_marginTop="15dp"
    >
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foo foo fo"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
    </LinearLayout>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="centered text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_layout"
            app:layout_constraintTop_toBottomOf="@id/main_header"
    />
</android.support.constraint.ConstraintLayout>

如何使突出显示的
居中文本
位于垂直线性布局旁边空白区域的中心？（红色箭头指向的大致位置？
这是一个约束布局，在文本视图顶部添加约束即可。查看此项了解约束布局工作原理的详细信息

刚刚加上marginTop解决了你的问题

这是你的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">


<TextView
    android:id="@+id/main_header"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is my header text and is long"
    android:textSize="20sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />


<LinearLayout
    android:id="@+id/vertical_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/main_header"
    android:layout_marginTop="15dp"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Foo foo fo"
        android:textSize="18sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        />
</LinearLayout>

   <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:text="centered text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/vertical_layout"
    app:layout_constraintTop_toBottomOf="@id/main_header" />

</android.support.constraint.ConstraintLayout>


您可以这样简单地添加：

在查看布局之前，让我们先看看指导原则是如何工作的：

您可以将其视为不可见视图，不会影响布局，来自文档：

指南是运行时看不到的视觉指南，用于对齐其他视图

所以我是如何做到的-我创建了一个指导原则（在我的例子中是水平的），并告诉他要在屏幕的20%高度-
app:layout\u constraintGuide\u center=“0.2”
，然后我将constraint连接到它，现在您的视图位于屏幕顶部和指导线之间

<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">


    <TextView
        android:id="@+id/main_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is my header text and is long"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <LinearLayout
        android:id="@+id/vertical_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foo foo fo"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_layout"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <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="0.2" />




但是请避免使用嵌套视图，因为这不是constraintLayout的用途

以下是不带嵌套视图组的布局示例：

<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">


    <TextView
        android:id="@+id/main_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is my header text and is long"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Foo foo fo"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="@+id/textView10"
        app:layout_constraintStart_toStartOf="@+id/textView10"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:layout_marginStart="8dp"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_header" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <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="0.2" />

最简单的方法是将
文本视图的顶部和底部约束到
线性布局的相应边缘，使其垂直居中，即使
线性布局的高度发生变化。
的水平约束与现在一样好。
文本视图的约束xtView
将如下所示：

app:layout_constraintBottom_toBottomOf="@id/vertical_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_layout"
app:layout_constraintTop_toTopOf="@id/vertical_layout"

结果:

我已经阅读了文档，并且对其他元素使用了约束。我不明白如何使用约束将textview移动到垂直布局右侧空白区域的中心。检查此toomargin 40dp仅在垂直线性布局中的文本未更改时才起作用。因此，它不是常规设置问题的解决方案，但要添加多少空间的试验我不明白屏幕高度为20%的水平基准线如何有助于居中。20%是一个神奇的数字吗？你是怎么发现的？第二个问题：你提到不要使用垂直线性布局。自定义视图如何？这也是一个反模式吗？一点也不，它只是一个幻数例如，现在将20%的准则视为一个不可见的视图。如果您将文本顶部约束到屏幕顶部，将文本底部约束到准则，则文本将居中于两者之间（因为这是约束的工作方式）。让我们来看看。