使用约束布局中的指南更改元素之间的垂直空间，Android答案

【问题标题】：Change vertical space between elements using guidelines in constraint layout, Android使用约束布局中的指南更改元素之间的垂直空间，Android
【发布时间】：2018-05-17 10:05:37
【问题描述】：

我是约束布局的新手。我想构建一个非常基本的 UI，其中有四个视图，它们之间的空间相等。现在我想要的是，当我在较小的设备上运行代码时，元素之间的空间应该更小，而当我在选项卡上运行它时，空间会增加。

在搜索中，我发现了这个：

How to make ConstraintLayout work with percentage values?

现在我知道如何使用百分比添加指南，但我仍然不完全清楚。

我是否应该在每个视图之后放置一条水平参考线？并使用其顶部和底部指南锚定视图？但这不是两个工作量很大吗？对于 4 个视图，我需要放置 8 个准则吗？
如果我在屏幕的 50% 上放置一条水平参考线，并希望将其用作锚，我将在其顶部的其他视图上应用哪些约束？

如果有人能澄清我的理解，将不胜感激。

【问题讨论】：

标签： android android-constraintlayout

【解决方案1】：

可以通过垂直链和水平链来实现。

阅读ConstraintLayout Chain。

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案2】：

您描述的Guidelines 方法可能是使用旧ConstraintLayout 版本的方法，如您链接的主题中所述。现在ConstraintLayout-1.1.0 已经推出，可以使用app:layout_constraintHeight_percent 和app:layout_constraintWidth_percent 为视图设置基于百分比的尺寸。

在您的情况下，我认为最好的方法是创建视图的垂直链，并将所需的高度设置为每个视图的父视图的百分比。假设所有视图的总高度百分比小于 100%，则剩余空间将通过使用 chain_spread_inside 或 chain_spread（默认）属性在视图之间平均分配。

示例 XML：

<?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"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintVertical_chainStyle="spread_inside"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintBottom_toTopOf="@id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintBottom_toTopOf="@id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_dark"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintBottom_toTopOf="@id/view4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_dark"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view3" />

</android.support.constraint.ConstraintLayout>

spread_inside 链样式的结果：

默认spread链样式：

【讨论】：