在ConstraintLayout 1.1.0 (beta)中链中的利润率是如何工作的？
自从切换到ConstraintLayout版本1.1.0-beta4之后，我的一些布局就被炸掉了。在进行任何更改之前，我希望更好地了解ConstraintLayout链中的利润率是如何工作的。在下面的文章中，我比较了ConstraintLayout版本1.0.2和版本1.1.0-beta4中的布局，但是我相信这个问题首先出现在1.1.0beta2中。
我的目标是让一些文本视图延伸到屏幕上，在第1和第2文本视图以及第2和第3文本视图之间存在空白。背景应显示在这些空白处。为此，我创建了一个水平链，并指定了从左侧文本视图到中心文本视图的结束边距，以及从中间文本视图到右侧文本视图的结束边距。水平链样式是spread_inside。
示例1-使用ConstraintLayout版本1.0.2
这就是1.0.2版中的情况，也是我所期望的。
<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 4
这个布局类似于ConstraintLayout版本1.1.0-beta4中的如下所示。请注意，空白处已经消失。我希望这看起来应该和示例1一样，但事实并非如此。
示例3--使用ConstraintLayout版本1.1.0-beta4 4并具有起始裕度
如果我采用相同的布局，只需向右侧文本视图( 8dp )添加一个开始边距(tvRight)，那么我的页边距不仅在中间文本视图和右侧文本视图之间，而且在左文本视图和中间文本视图之间重新出现，尽管我没有在那里更改页边距。
这不仅仅是先前设定的利润率突然被授予的结果。如果我将最右边文本视图的开始边距设置为'48dp'，那么在左文本视图和中间文本视图之间也会出现一个48dp边距。
<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链？处理链边距的方式是否发生了变化，还是我遗漏了什么？我正在寻找一个解释或参考一些文件，解释所有这一切。
回答 3
Stack Overflow用户
发布于 2018-01-04 20:42:43
我找不到任何文件能给出这个问题的权威答案。然而，在ConstraintLayout中有一些关于边距的讨论。
如果设置了边边距，则它们将应用于相应的约束(如果存在)。
在链的特定实例中，每个视图之间都有双向约束。也就是说，不仅视图A的结束被限制为查看B的开始，而且视图B的开始也被限制到视图A的结束。
在您发布的布局中，View A有结束约束和结束边距，但是View B有一个开始约束，没有开始边距。据我所知，这意味着您的布局中有冲突的规则(视图A希望8dp远离视图B，而视图B希望从视图A变为0dp )。也许不同版本的ConstraintLayout库具有不同的策略，用于(a)确定这是否算是冲突，(b)解决冲突。
通过实验，下面是我如何在不同的ConstraintLayout库版本上找到在链中工作的边距：
1.0.2版
链中每个视图的边距不依赖于或影响链中的其他视图。这至少对行为有两个明显的影响。首先，向一个视图添加保证金会将另一个视图推开，而不管该视图的边距如何。第二，向一个视图添加边距不会影响更深层次的视图边距(例如，在第一个视图上添加8dp结束边距本身并不会导致8dp值的空间出现在第二个视图和第三个视图之间)。
版本1.1.0-beta4 4
链中每个视图的边距都取决于并影响到链中的其他视图。同样，这对行为有两个明显的影响。首先，向一个视图添加页边距不会将另一个视图推开，除非它也有相同数量的保证金*。第二，在链的第一视图和第二视图之间添加空白也将影响链的第二视图和第三视图之间的间距**。
*：似乎1.1.0-beta4 4只允许一个开始边距将视图分开，而仅仅一个结束边距就不会产生任何影响。无论如何，我建议与边距匹配。
**：我怀疑这是因为连锁店试图平均分配“空间”。视图A和B之间的边距造成了空白，由于链希望强制执行一致的间距，所以在视图B和视图C之间增加了类似的间隔。
示例：
剥离的方式，这是一个布局，就像你的原版，边距略有变化。我把其他属性都保留不变了。
<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：
这应该说明库版本之间的两个不同之处。同样，我一直无法找到解释所有这些的官方文档，但仅仅基于实验，这似乎是正确的。
Stack Overflow用户
发布于 2018-01-11 15:10:34
关于本·P.的回答，我已经确定了关于ConstraintLayout链中的利润率的以下内容。这一信息适用于ConstraintLayout版本1.1.0-beta4。
一般性意见
- 在一个链中，所有的起始边距(
android:layout_marginStart)都会被遵守。这意味着视图之间的间隔将不小于指定的开始裕度。但是，如下文所述，间距可能更大。 - 结束边缘(
android:layout_marginEnd)没有相关性，似乎被忽视。这不适用于链尾视图的结束边距，而只适用于视图交叉链接以创建链的内部边距。 - 当一条链以其约束为中心时，该链位于链头的起始边和链尾的端缘之间。
在下面的示例中，视图"A“、"D”和"G“被限制在父开头。视图"C“、"F”和"I“被限制在父端。
链式风格：packed
如果链样式是“打包”的，则所有视图都以指定的起始边距分隔。视图之间的间隔可以根据定义起始边距的方式而变化。在下面的图像中，视图的宽度为match_constraints，边距按指示设置。
如果视图的宽度设置为match_constraints以外的其他内容，视图仍然填充指定的边距，但链集中在链头的起始边距和链尾的尾缘之间。
我采用了这种解释，而不是考虑将结束边距附加到结束视图，因为Android设计人员有同样的解释：
链式风格：spread
在“扩展”链样式中，所有视图都分布在开始和结束约束之间，这样每个视图之前和之后的空间是相同的，并且等于定义的最大开始裕度。如果每个视图的宽度为match_constraints，那么默认情况下所有视图的宽度都是相同的。
链式风格：spread_inside
链的spread_inside样式将显示链的第一个视图，并将其锚定在其开始约束下，同时遵守其开始裕度。结束视图将锚定在其结束约束上，同时遵守其结束裕度。内部视图将以相同的间距分布在视图之间，如spread链。
下面是相同的布局与不同的边距设置。视图"F“和"I”具有8dp集的起始边距，但差距已扩展到16dp。查看"G“、"H”和"I“的宽度都是相同的，尽管它们似乎不是。
此布局的XML将在本文末尾介绍。
有趣但不重要:如果视图的宽度为match_constraints且所有边距为零，则不同的链类型是不可区分的。
上述信息也适用于垂直链。android:layout_marginTop代替android:layout_marginStart，android:layout_marginBottom代替android:layout_marginEnd。
布局
<android.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_light">
<TextView
android:id="@+id/heading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="packed, match_constraints"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/textA"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginTop="8dp"
android:background="@android:color/white"
android:gravity="center"
android:text="A"
android:textColor="@android:color/black"
app:layout_constraintEnd_toStartOf="@+id/textB"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/heading1"
tools:ignore="HardcodedText" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#ff00cc"
app:layout_constraintEnd_toStartOf="@id/textB"
app:layout_constraintTop_toTopOf="@id/textB" />
<TextView
android:id="@+id/textB"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:background="@android:color/darker_gray"
android:gravity="center"
android:text="B"
android:textColor="@android:color/white"
app:layout_constraintEnd_toStartOf="@+id/textC"
app:layout_constraintStart_toEndOf="@+id/textA"
app:layout_constraintTop_toTopOf="@+id/textA"
tools:ignore="HardcodedText" />
<View
android:id="@+id/view16dpOnC"
android:layout_width="16dp"
android:layout_height="35dp"
android:background="#fffb00"
app:layout_constraintEnd_toStartOf="@id/textC"
app:layout_constraintTop_toTopOf="@+id/textC" />
<TextView
android:id="@+id/textC"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="16dp"
android:background="@android:color/white"
android:gravity="center"
android:text="C"
android:textColor="@android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textB"
app:layout_constraintTop_toTopOf="@+id/textA"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/heading2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="spread, match_constraints"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/textA"
tools:ignore="HardcodedText" />
<View
android:layout_width="16dp"
android:layout_height="35dp"
android:background="#00ff19"
app:layout_constraintEnd_toStartOf="@id/textD"
app:layout_constraintTop_toTopOf="@id/textD" />
<TextView
android:id="@+id/textD"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginTop="8dp"
android:background="@android:color/white"
android:gravity="center"
android:text="D"
android:textColor="@android:color/black"
app:layout_constraintEnd_toStartOf="@+id/textE"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/heading2"
tools:ignore="HardcodedText" />
<View
android:layout_width="16dp"
android:layout_height="35dp"
android:background="#fffb00"
app:layout_constraintEnd_toStartOf="@id/textE"
app:layout_constraintTop_toTopOf="@id/textE" />
<TextView
android:id="@+id/textE"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="16dp"
android:background="@android:color/darker_gray"
android:gravity="center"
android:text="E"
android:textColor="@android:color/white"
app:layout_constraintEnd_toStartOf="@+id/textF"
app:layout_constraintStart_toEndOf="@+id/textD"
app:layout_constraintTop_toTopOf="@+id/textD"
tools:ignore="HardcodedText" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#003cff"
app:layout_constraintStart_toEndOf="@id/textE"
app:layout_constraintTop_toTopOf="@+id/textE" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#ff00cc"
app:layout_constraintEnd_toStartOf="@id/textF"
app:layout_constraintTop_toTopOf="@id/textF" />
<TextView
android:id="@+id/textF"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:background="@android:color/white"
android:gravity="center"
android:text="F"
android:textColor="@android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textE"
app:layout_constraintTop_toTopOf="@+id/textD"
tools:ignore="HardcodedText" />
<View
android:layout_width="16dp"
android:layout_height="35dp"
android:background="#00ff19"
app:layout_constraintStart_toEndOf="@id/textF"
app:layout_constraintTop_toTopOf="@id/textF" />
<TextView
android:id="@+id/heading3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="spread_inside, match_constraints"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/textD"
tools:ignore="HardcodedText" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#003cff"
app:layout_constraintEnd_toStartOf="@id/textG"
app:layout_constraintTop_toTopOf="@+id/textG" />
<TextView
android:id="@+id/textG"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@android:color/white"
android:gravity="center"
android:text="G"
android:textColor="@android:color/black"
app:layout_constraintEnd_toStartOf="@+id/textH"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/heading3"
tools:ignore="HardcodedText" />
<View
android:layout_width="16dp"
android:layout_height="35dp"
android:background="#fffb00"
app:layout_constraintEnd_toStartOf="@id/textH"
app:layout_constraintTop_toTopOf="@id/textH" />
<TextView
android:id="@+id/textH"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="16dp"
android:background="@android:color/darker_gray"
android:gravity="center"
android:text="H"
android:textColor="@android:color/white"
app:layout_constraintEnd_toStartOf="@+id/textI"
app:layout_constraintStart_toEndOf="@+id/textG"
app:layout_constraintTop_toTopOf="@+id/textG"
tools:ignore="HardcodedText" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#003cff"
app:layout_constraintStart_toEndOf="@id/textH"
app:layout_constraintTop_toTopOf="@id/textH" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#ff00cc"
app:layout_constraintEnd_toStartOf="@id/textI"
app:layout_constraintTop_toTopOf="@id/textI" />
<TextView
android:id="@+id/textI"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:background="@android:color/white"
android:gravity="center"
android:text="I"
android:textColor="@android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textH"
app:layout_constraintTop_toTopOf="@+id/textG"
tools:ignore="HardcodedText" />
<View
android:layout_width="8dp"
android:layout_height="35dp"
android:background="#ff00cc"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="@id/textC"
app:layout_constraintTop_toTopOf="@id/textC" />
<View
android:id="@+id/view8dp"
android:layout_width="8dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:background="#ff00cc"
app:layout_constraintBottom_toTopOf="@id/view8dpGap"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textG"
app:layout_constraintVertical_bias="0.100000024"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/text8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="8dp start margin"
app:layout_constraintBottom_toBottomOf="@+id/view8dp"
app:layout_constraintStart_toEndOf="@id/view8dp"
app:layout_constraintTop_toTopOf="@+id/view8dp"
tools:ignore="HardcodedText" />
<View
android:id="@+id/view8dpGap"
android:layout_width="8dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:background="#003cff"
app:layout_constraintBottom_toTopOf="@+id/view16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view8dp" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="8dp gap not defined by start margin"
app:layout_constraintBottom_toBottomOf="@+id/view8dpGap"
app:layout_constraintStart_toEndOf="@+id/view8dpGap"
app:layout_constraintTop_toTopOf="@+id/view8dpGap"
tools:ignore="HardcodedText" />
<View
android:id="@+id/view16dp"
android:layout_width="17dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:background="#fffb00"
app:layout_constraintBottom_toTopOf="@+id/view16dpGap"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view8dpGap" />
<TextView
android:id="@+id/text16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="16dp start margin"
app:layout_constraintBottom_toBottomOf="@+id/view16dp"
app:layout_constraintStart_toEndOf="@+id/view16dp"
app:layout_constraintTop_toTopOf="@+id/view16dp"
tools:ignore="HardcodedText" />
<View
android:id="@+id/view16dpGap"
android:layout_width="17dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:background="#00ff19"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view16dp" />
<TextView
android:id="@+id/text16dpGap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="16dp gap not defined by start margin"
app:layout_constraintBottom_toBottomOf="@+id/view16dpGap"
app:layout_constraintStart_toEndOf="@+id/view16dpGap"
app:layout_constraintTop_toTopOf="@+id/view16dpGap"
tools:ignore="HardcodedText" />
</android.support.constraint.ConstraintLayout>Stack Overflow用户
发布于 2017-12-22 07:42:13
在constraintLayout中，链式的工作方式如下所示
1.扩展：视图分布均匀。例如app:layout_constraintHorizontal_chainStyle=”spread”app:layout_constraintVertical_chainStyle=”spread”
2.扩展到内部：第一个和最后一个视图被附加到链的每一端的约束上，其余的都是均匀分布的。例如app:layout_constraintHorizontal_chainStyle=”spread_inside”app:layout_constraintVertical_chainStyle=”spread_inside”
3.打包：将视图打包在一起(在考虑了利润率之后)。然后，您可以通过更改链的头视图偏差来调整整个链的偏差(左/右或上/下)。例如app:layout_constraintHorizontal_chainStyle=”packed”app:layout_constraintVertical_chainStyle=”packed”
4.加权:当链设置为扩散或扩展到内部时，可以通过将一个或多个视图设置为“匹配约束”(0dp)来填充剩余空间。默认情况下，空间在设置为“匹配约束”的每个视图之间均匀分布，但是可以使用thelayout_constraintHorizontal_weight和layout_constraintVertical_weight属性为每个视图分配重要的权重。如果您熟悉线性布局中的layout_weight，它的工作方式也是一样的。因此，具有最高权重值的视图获得最多的空间；具有相同权重的视图获得相同的空间。
要获得更多信息，可以参考下面的图像
https://stackoverflow.com/questions/47931430
复制相似问题
腾讯云开发者
