链中的边距如何在ConstraintLayout 1.1.0(测试版)中工作 [英] How do margins in chains work in ConstraintLayout 1.1.0 (beta)

问题描述

自从转换为ConstraintLayout版本1.1.0-beta4以来，我的布局出现了一些变化.在进行任何更改之前，我想更好地了解边距在ConstraintLayout链中的工作方式.在下文中，我将ConstraintLayout 1.0.2版与1.1.0-beta4版中的布局进行了比较，但是我认为此问题首先出现在1.1.0-beta2中.

I have had a couple of my layouts blow up since changing over to ConstraintLayout version 1.1.0-beta4. Before I make any changes, I want to get a better understanding of how margins work in ConstraintLayout chains. In the following, I compare a layout in ConstraintLayout version 1.0.2 to version 1.1.0-beta4, but I believe that the issue first arose in 1.1.0-beta2.

我的目标是使一些文本视图在屏幕上延伸，在第一和第二文本视图与第二和第三文本视图之间留有间隙.背景应显示在这些边距中.为此，我创建了一个水平链，并指定了从左侧文本视图到中心文本视图的结束页边距，以及从中央文本视图到右边文本视图的结束页边距.水平链样式为spread_inside.

My goal is to have some text views stretch across the screen with gaps between the 1st and 2nd text views and the 2nd and 3rd text views. The background should show in these margins. To do this, I create a horizontal chain and specify an end margin from the left text view to the center text view and an end margin from the center text view to the right text view. The horizontal chain style is spread_inside.

示例1-使用ConstraintLayout版本1.0.2

这是1.0.2版的外观，也是我的期望.

This is how things look in version 1.0.2 and is what I expect.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/tvLeft"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvCenter"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/tvCenter"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRight"
        app:layout_constraintStart_toEndOf="@+id/tvLeft"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/tvRight"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tvCenter"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

示例2-使用ConstraintLayout版本1.1.0-beta4

此相同的布局类似于ConstraintLayout的1.1.0-beta4版本中的以下内容.请注意，边距已消失.我希望这看起来与示例1相同，但事实并非如此.

This same layout looks like the following in version 1.1.0-beta4 of ConstraintLayout. Notice that the margins have disappeared. I expect that this should look the same as example 1, but it doesn't.

示例3-使用具有起始边距的ConstraintLayout版本1.1.0-beta4

如果我采用相同的布局，只需在右边的文本视图(tvRight)中添加开始边距8dp，我的边距不仅会出现在中间和右边的文本视图之间，还会出现在左边和中间的文本视图之间尽管我还没有更改那里的边距.

If I take this same layout and simply add a start margin of 8dp to the right text view (tvRight), my margins reappear not only between the center and right text views but also between the left and center textviews although I have not changed the margins there.

这不仅仅是突然兑现的先前设置的边距.如果我将最右边的文本视图的开始页边距设置为"48dp"，则在左边和中心的文本视图之间也会出现48dp边距.

This is more than just the previously set margins suddenly being honored. If I set the start margin on the rightmost text view to '48dp', what appears to be a 48dp margin also appears between the left and center text views.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_light">

<!-- TextViews tvLeft & tvRight not shown but are the same as above.-->

<TextView
    android:id="@+id/tvRight"
    android:layout_width="0dp"
    android:layout_height="35dp"
    android:layout_marginStart="48dp"
    android:background="@android:color/white"
    android:gravity="center"
    android:text="Text3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tvCenter"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>  

所以，我的问题是，为什么会看到这些结果?"如何在ConstraintLayout链中，特别是在spread_inside链中处理边距?链边距的处理方式是否发生了变化，还是我错过了一些东西?我正在寻找解释或参考一些说明所有这些的文档.

So, my question is, "Why am I seeing these results?" How are margins handled in ConstraintLayout chains, especially spread_inside chains? Has there been a change in the way chain margins are handled, or am I missing something? I am looking for an explanation or a reference to some documentation that explains all this.

推荐答案

我找不到任何文档可以为这个确切问题提供权威的答案.但是， API文档中有一些关于边距的讨论对于ConstraintLayout :

I can find no documentation that gives an authoritative answer to this exact question. However, there is a little bit of discussion about margins in the API documentation for ConstraintLayout:

如果设置了边距，它们将应用于相应的约束(如果存在)

If side margins are set, they will be applied to the corresponding constraints (if they exist)

在链的特定实例中，每个视图之间都有双向约束.也就是说，不仅视图A的末尾限制为视图B的开始，而且视图B的末尾也限制为视图A的末尾.

In the specific instance of a chain, you have two-way constraints between each view. That is, not only is View A's end constrained to View B's start, but View B's start is also constrained to View A's end.

在您发布的布局中，视图A具有结束约束和结束边距，而视图B具有没有开始裕度的开始约束.据我所知，这意味着您的布局中有冲突的规则(View A想要与View B保持8dp的距离，但是View B想要与View A保持0dp的距离).也许不同版本的ConstraintLayout库具有不同的策略，用于(a)确定是否甚至算作冲突，以及(b)解决冲突.

In your posted layout, View A has an end constraint and an end margin, but View B has a start constraint with no start margin. As far as I can tell, this means you have conflicting rules in your layout (View A wants to be 8dp away from View B, but View B wants to be 0dp from View A). Perhaps different versions of the ConstraintLayout library have different strategies for (a) determining whether this even counts as a conflict and (b) resolving the conflict if so.

通过实验，这是我发现边距在不同ConstraintLayout库版本上链式工作的方式:

Via experimentation, here is how I've found margins to work in chains on different ConstraintLayout library versions:

链中每个视图的边距不依赖或影响链中其他视图.这对行为至少有两个明显的影响.首先，向一个视图添加边距将使另一视图偏离该数量，而不管该视图的边距如何.其次，在一个视图上增加边距不会影响到整个链条下游的视图边距(例如，在您的第一个视图上放置8dp最终边距本身并不会在第二个视图和第三个视图之间出现价值8dp的空间).

Side margins on each view in the chain don't depend on or affect other views in the chain. This has (at least) two visible effects on behavior. First, adding margin to one view will push the other view away by that amount, regardless of that view's margins. Second, adding margin to one view will not affect margins of views farther down the chain (e.g. putting 8dp end margin on your first view does not by itself also cause 8dp worth of space to appear between your second and third views).

链中每个视图的边距都取决于并影响链中的其他视图.同样，这对行为有两个明显的影响.首先，向一个视图添加边距不会推开另一个视图，除非它也具有相同数量的边距*.其次，在链的第一视图和第二视图之间增加边距也会影响链的第二视图和第三视图之间的间距**.

Side margins on each view in the chain both depend on and affect other views in the chain. Again, this has two visible effects on behavior. First, adding margin to one view will not push the other view away unless it also has a margin of that same amount*. Second, adding margin between the first and second view of the chain will also affect the spacing between the second and third view of the chain**.

*:1.1.0-beta4似乎仅允许起始余量将视图分开，而仅终止余量将无效.无论如何，我都建议匹配边距.

*: It seems that 1.1.0-beta4 allows just a start margin to push the views apart, while just an end margin will have no effect. Regardless, I recommend matching the margins.

**:我怀疑，这是因为该链正试图均匀分配空间".视图A和视图B之间的边距会产生一个间隙，并且由于链要强制保持一致的间距，因此在视图B和视图C之间会增加一个相似的间隙.

**: I suspect this is because the chain is trying to allocate "space" evenly. The margins between views A and B create a gap, and since the chain wants to enforce a consistent spacing it adds a similar gap between views B and C.

示例:

向下剥离，这是一种与原始布局一样的布局，边距略有变化.我保留了其他所有属性.

Stripped way down, here's a layout just like your original, with the margins changed slightly. I've left every other attribute unchanged.

<android.support.constraint.ConstraintLayout>

    <TextView
        android:layout_marginEnd="8dp"/>

    <TextView
        android:layout_marginStart="8dp"/>

    <TextView/>

</android.support.constraint.ConstraintLayout>

v1.0.2:

v1.1.0-beta4:

v1.1.0-beta4:

这应该说明库版本之间的两个区别.再说一次，我完全找不到能解释所有这些问题的官方文档，但是根据实验，它似乎是正确的.

This should illustrate the two differences between the library versions. Again, I've been completely unable to find official documentation that explains all this, but it appears to be true just based on experimentation.

这篇关于链中的边距如何在ConstraintLayout 1.1.0(测试版)中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！