如何使用约束布局在 space 的中心对齐

Question

我有以下使用 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>

结果如下：

如何使突出显示的 centered text 位于垂直线性布局旁边的白色 space 的中心？（大约红色箭头指向的位置？

Answer 1

这是一个约束布局，通过在文本视图的顶部添加一个约束来实现。查看此 https://developer.android.com/training/constraint-layout 以了解有关约束布局如何工作的详细信息。

刚刚添加了 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>

这是图片

Answer 2

您可以像这样简单地添加 guideline :

在查看布局之前，让我们先了解一下指南的工作原理：

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

a guideline is a visual guide which will not be seen at runtime that is used to align other views too.

那么我是怎么做到的 - 我创建了一个指南（在我的例子中是水平的）并告诉他在屏幕的 20% 高度 - app:layout_constraintGuide_percent="0.2" 然后我将约束连接到它，现在你的视图位于屏幕顶部和参考线之间。

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

Answer 3

最简单的方法是将 TextView 的顶部和底部限制在 LinearLayout 的相应边缘，以便它在它们之间垂直居中，即使 LinearLayout's身高变化。水平约束很好，就像现在一样。 TextView 的约束如下所示：

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"

结果：

如何使用约束布局在 space 的中心对齐

How to align in center of a space using constraint layout

android-layout

android-view

android-viewgroup

android-constraintlayout