如何在 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

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的底部对齐吗？以此类推其他观点...

Answer 2

当一个视图有两个相反的约束时，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 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>

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

How to place views vertically or horizontally in ConstraintLayout?

android

android-layout

android-constraintlayout

试试这个对你有帮助

很高兴为您提供帮助