Question

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

经过搜索，我发现了这个：

How to make ConstraintLayout work with percentage values?

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

我应该在每个视图后放置一个水平指南吗？并使用其顶部和底部指南锚定视图？但这不是两件事吗？对于4个视图，我需要提出8个指南吗？
如果我在50％的屏幕上放置一个水平指南，并希望将其用作锚点，那么我将对其顶部的其他观点应用哪些约束？

如果有人能够理解我的理解，我们将非常感激。

Answer 1

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

阅读ConstraintLayout Chain。

Answer 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链样式：

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

2 个答案: