Question

我正在使用constarintLayout。目的是提供五个垂直对齐的ui组件，它们之间没有间隙。在xml文件中，五个ui组件之间有很大的间隔。如何缩小或消除差距。

我提到了互联网上的一些例子，但不清楚如何消除分隔差距

代码：

<Button
    android:id="@+id/btn_start_gps_reading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/str_start_gps_readings"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/ll_lat_container"/>

<LinearLayout
    android:id="@+id/ll_lat_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn_start_gps_reading"
    app:layout_constraintBottom_toBottomOf="@+id/ll_long_container">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/lat_readings"/>
<TextView
    android:id="@+id/tv_lat_readings_value"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/ll_long_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ll_lat_container"
    app:layout_constraintBottom_toTopOf="@+id/ll_alt_container">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/long_readings"/>
    <TextView
        android:id="@+id/tv_long_readings_value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
    android:id="@+id/ll_alt_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ll_long_container"
    app:layout_constraintBottom_toTopOf="@+id/ll_acc_container">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/alt_readings"/>
    <TextView
        android:id="@+id/tv_alt_readings_value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
    android:id="@+id/ll_acc_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ll_alt_container"
    app:layout_constraintBottom_toBottomOf="parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/acc_readings"/>
    <TextView
        android:id="@+id/tv_acc_readings_value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Answer 1

如果删除最后一个线性布局的底部约束，则间隙消失


<LinearLayout
    android:id="@+id/ll_acc_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ll_alt_container">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/acc_readings"/>
    <TextView
        android:id="@+id/tv_acc_readings_value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Answer 2

如果元素均匀分布，则表示您已成功创建垂直链。

默认链接模式为spread，这就是您所遇到的。您真正想要的是将连锁模式更改为packed，这将消除所有差距。

您可以通过修改链中的第一项来完成此操作（对于垂直链而言，这意味着最顶部）：

<Button
    android:id="@+id/btn_start_gps_reading"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/str_start_gps_readings"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/ll_lat_container"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintVertical_bias="0.5"/>

layout_constraintVertical_chainStyle更改链式。

layout_constraintVertical_bias相对于父视图放置打包视图：0.0在顶部，1.0在底部，0.5在中心（默认）。

查看documentation以获得更多详细信息。

如何消除隐含布局中的垂直间隙

2 个答案: