如何在 ConstraintLayout 中垂直或水平放置视图？

Question

这是具有 3 个视图的 Constraintlayout：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_profile_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toTopOf="@+id/tv_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/iv_profile_image" />

    <TextView
        android:id="@+id/tv_headline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tv_name" />

</android.support.constraint.ConstraintLayout>

结果：

正如您所看到的，每个视图之间都有很大的差距。我怎样才能消除这些间隙并使它们在屏幕上居中。我可以使用RelativeLayout或LinearLayout轻松实现这一点，但如何在这个ConstraintLayout中做到这一点？ConstraintLayout 是否应该替代relativelayout？

Answer 1

当视图有两个相反的约束时，ConstraintLayout将使视图在这些约束之间居中。这就是您的布局中发生的情况。

如果您希望视图在屏幕中央一层一层地堆叠，一种方法是使用打包链。

这是使用垂直包装链的布局：

这是 XML。请注意视图是如何垂直约束的。

<android.support.constraint.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">

    <ImageView
        android:id="@+id/iv_profile_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/tv_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tv_name"
        app:layout_constraintBottom_toTopOf="@+id/tv_headline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" />

    <TextView
        android:id="@+id/tv_headline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tv_headline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_name" />

</android.support.constraint.ConstraintLayout>