如何调整ConstraintLayout中的链长度？实现布局元素紧凑排列

嘿，我看了你的布局代码和截图，现在这些元素分散开是因为你的垂直链被底部的Button给“拉”长了——你给login_button设置了app:layout_constraintBottom_toBottomOf="parent"，这就迫使整个链要填满从父布局顶部到底部的空间，自然元素间的间距就变大了。

要让它们紧凑聚集在一起，你只需要调整垂直链的样式，同时修改Button的底部约束，具体步骤如下：

关键修改点 #

• 给链的第一个元素（也就是some_person这个ImageView）添加垂直链样式为packed，这会让链内所有元素紧紧靠在一起
• 移除login_button的app:layout_constraintBottom_toBottomOf="parent"约束，让链不再被强制拉伸到底部
• 可选：给整个链设置垂直居中的约束，让紧凑的元素组位于屏幕中间

修改后的完整布局代码 #

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/nav_and_action_bar_color" >

    <ImageView
        android:id="@+id/some_person"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/some_person"
        app:layout_constraintBottom_toTopOf="@+id/et_username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        <!-- 添加垂直链样式，让元素紧凑排列 -->
        app:layout_constraintVertical_chainStyle="packed"
        <!-- 可选：让整个链垂直居中 -->
        app:layout_constraintVertical_bias="0.5" />

    <EditText
        android:id="@+id/et_username"
        android:layout_width="@dimen/login_page_text_fields_width"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@android:color/white"
        android:hint="@string/email_hint"
        android:padding="10dp"
        app:layout_constraintBottom_toTopOf="@+id/et_password"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/some_person" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="@dimen/login_page_text_fields_width"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@android:color/white"
        android:hint="@string/password_hint"
        android:inputType="textPassword"
        android:padding="10dp"
        app:layout_constraintBottom_toTopOf="@+id/login_button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_username" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="@dimen/login_button_width"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:elevation="5dp"
        android:onClick="clickedOnLogin"
        android:text="@string/login_button"
        android:textColor="@android:color/white"
        <!-- 移除底部绑定父布局的约束，让链保持紧凑 -->
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_password" />

</android.support.constraint.ConstraintLayout>

效果说明 #

修改后，所有元素会紧密地聚集在一起，如果你添加了app:layout_constraintVertical_bias="0.5"，这个紧凑的元素组会自动居中在屏幕垂直方向上，完全符合你想要的紧凑排列效果。

内容的提问来源于stack exchange，提问作者Dishonered