如何在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会将视图置于这些约束之间。这就是您的布局中发生的事情。

如果您希望视图在屏幕中央叠加在一起，则一种方法是使用packed chain。

以下是使用垂直打包链的布局：

这是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>

Answer 2

据说ConstraintLayouts提供了比普通RelativeLayouts更平坦的视图层次结构和更好的性能。

我看到一些可能导致奇怪行为的事情。例如，在此视图中：

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

你说这个视图的顶部应该与@ + id / iv_profile_image-view的顶部对齐。您确定并不意味着此视图的顶部应与@ + id / iv_profile_image-view的 bottom 对齐吗？等等其他观点...

Answer 3

试试这对你有帮助

• 我们要使用constraints
之类的所有四个left,right,top and bottom
• 你也可以这样实现
• 我不认为你总是喜欢Drag and Drop你也可以选择程序化的审议

<?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_constraintTop_toBottomOf="@+id/iv_profile_image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/tv_headline" />

<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_toBottomOf="@+id/tv_name" />

   </android.support.constraint.ConstraintLayout>

乐意帮助您