Android ConstraintLayout 使用链控制线性组

概述使用链控制线性组 链是一组视图，这些视图通过双向位置约束条件相互链接到一起。链中的视图可以垂直或水平分布。 1. Spread：视图是均匀分布的（在考虑外边距之后）。这是默认值。 2. Spread 使用链控制线性组

链是一组视图，这些视图通过双向位置约束条件相互链接到一起。链中的视图可以垂直或水平分布。

Spread：视图是均匀分布的（在考虑外边距之后）。这是默认值。Spread insIDe：第一个和最后一个视图固定在链两端的约束边界上，其余视图均匀分布。Weighted：当链设置为 spread 或 spread insIDe 时，您可以通过将一个或多个视图设置为“match constraints”(0dp) 来填充剩余空间。默认情况下，设置为“match constraints”的每个视图之间的空间均匀分布，但您可以使用 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 属性为每个视图分配重要性权重。如果您熟悉线性布局中的 layout_weight 的话，就会知道该样式与它的原理是相同的。因此，权重值最高的视图获得的空间最大；相同权重的视图获得同样大小的空间。Packed：视图打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。

链的“头”视图：水平链中最左侧的视图以及垂直链中最顶部的视图。

链的“尾”视图：水平链中最右（end）侧的视图以及垂直链中最底部的视图。

要组成链，头和尾必须进行设置。
以水平链为例

头 app:layout_constraintStart_toStartOf="parent"尾 app:layout_constraintEnd_toEndOf="parent"水平链默认均匀分布 Spread

4个TextVIEw水平排开，均匀分布。
layout中简单说来是互相作为参照物。

    <androIDx.constraintlayout.Widget.ConstraintLayout        androID:layout_wIDth="match_parent"        androID:layout_height="60dp"        androID:layout_margintop="20dp"        androID:background="#fff">        <TextVIEw            androID:ID="@+ID/tv1"                        androID:layout_marginEnd="8dp"            androID:background="#009688"            androID:gravity="center"            androID:text="R"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv2"            app:layout_constraintStart_toStartOf="parent"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv2"                        androID:background="#009688"            androID:gravity="center"            androID:text="u"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv3"            app:layout_constraintStart_toEndOf="@+ID/tv1"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv3"                        androID:background="#009688"            androID:gravity="center"            androID:text="s"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv4"            app:layout_constraintStart_toEndOf="@+ID/tv2"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv4"                        androID:background="#009688"            androID:gravity="center"            androID:text="t"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+ID/tv3"            app:layout_constrainttop_totopOf="parent" />    </androIDx.constraintlayout.Widget.ConstraintLayout>

style.xml

    <style name="ConSampleText">        <item name="androID:layout_wIDth">wrap_content</item>        <item name="androID:layout_height">wrap_content</item>        <item name="androID:padding">4dp</item>        <item name="androID:textcolor">#fff</item>        <item name="androID:background">#3F51B5</item>    </style>

Spread insIDe

如果需要Spread insIDe样式，需要设置一下“头”子vIEw：app:layout_constraintHorizontal_chainStyle="spread_insIDe"

    <!-- ... -->    <TextVIEw        androID:ID="@+ID/tv1"                androID:background="#009688"        androID:gravity="center"        androID:text="R"        androID:textcolor="#ffffff"        app:layout_constraintEnd_toStartOf="@+ID/tv22"        app:layout_constraintHorizontal_chainStyle="spread_insIDe"        app:layout_constraintStart_toStartOf="parent"        app:layout_constrainttop_totopOf="parent" />    <!-- ... -->

Weighted

可以设置子vIEw按比例分配剩余空间。需要先把wIDth设为0dp。
并且设置app:layout_constraintHorizontal_weight属性。

    <androIDx.constraintlayout.Widget.ConstraintLayout        androID:layout_wIDth="match_parent"        androID:layout_height="60dp"        androID:layout_margintop="20dp"        androID:background="#fff">        <TextVIEw            androID:ID="@+ID/tv1"                        androID:layout_wIDth="0dp"            app:layout_constraintHorizontal_weight="2"            androID:background="#4CAF50"            androID:gravity="center"            androID:text="R"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv2"            app:layout_constraintStart_toStartOf="parent"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv2"                        androID:layout_wIDth="0dp"            androID:background="#009688"            app:layout_constraintHorizontal_weight="1"            androID:gravity="center"            androID:text="u"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv3"            app:layout_constraintStart_toEndOf="@+ID/tv1"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv3"                        androID:background="#4CAF50"            androID:gravity="center"            androID:text="s"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toStartOf="@+ID/tv4"            app:layout_constraintStart_toEndOf="@+ID/tv2"            app:layout_constrainttop_totopOf="parent" />        <TextVIEw            androID:ID="@+ID/tv4"                        androID:background="#009688"            androID:gravity="center"            androID:text="t"            androID:textcolor="#ffffff"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+ID/tv3"            app:layout_constrainttop_totopOf="parent" />    </androIDx.constraintlayout.Widget.ConstraintLayout>

packed

第一个子vIEw设置 app:layout_constraintHorizontal_chainStyle="packed"

    <!-- ... -->    <TextVIEw        androID:ID="@+ID/tv1"                androID:background="#009688"        androID:gravity="center"        androID:text="R"        androID:textcolor="#ffffff"        app:layout_constraintEnd_toStartOf="@+ID/tv22"        app:layout_constraintHorizontal_chainStyle="packed"        app:layout_constraintStart_toStartOf="parent"        app:layout_constrainttop_totopOf="parent" />    <!-- ... -->

5等分屏幕

等分屏幕的方法有很多种方式。例如加上guIDeline，设置好比例。这里我们用链式来水平等分屏幕或父layout。
不论是平分，3等分或是5等分，方式都是类似的。以5等分为例。

切分的vIEw，宽度设置为0dp，layout_constraintHorizontal_weight设置为一样的，比如1。

头视图注意设置app:layout_constraintHorizontal_chainStyle="spread"和app:layout_constraintStart_toStartOf="parent"；
尾视图注意设置app:layout_constraintEnd_toEndOf="parent"。

    <androIDx.constraintlayout.Widget.ConstraintLayout        androID:layout_wIDth="match_parent"        androID:layout_height="290dp"        androID:layout_margintop="8dp"        androID:background="#ffffff">        <relativeLayout            androID:ID="@+ID/dc_start"            androID:layout_wIDth="0dp"            androID:layout_height="match_parent"            app:layout_constraintEnd_toStartOf="@ID/dc_2"            app:layout_constraintHorizontal_chainStyle="spread"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintStart_toStartOf="parent">            <ImageVIEw                androID:layout_wIDth="match_parent"                androID:layout_height="match_parent"                androID:scaleType="center"                androID:src="@drawable/pic_hj1" />        </relativeLayout>        <relativeLayout            androID:ID="@+ID/dc_2"            androID:layout_wIDth="0dp"            androID:layout_height="match_parent"            app:layout_constraintEnd_toStartOf="@ID/dc_3"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintStart_toEndOf="@ID/dc_start">            <ImageVIEw                androID:layout_wIDth="match_parent"                androID:layout_height="match_parent"                androID:scaleType="center"                androID:src="@drawable/pic_hj2" />        </relativeLayout>        <relativeLayout            androID:ID="@+ID/dc_3"            androID:layout_wIDth="0dp"            androID:layout_height="match_parent"            app:layout_constraintEnd_toStartOf="@ID/dc_4"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintStart_toEndOf="@ID/dc_2">            <ImageVIEw                androID:layout_wIDth="match_parent"                androID:layout_height="match_parent"                androID:scaleType="center"                androID:src="@drawable/pic_hj3" />        </relativeLayout>        <relativeLayout            androID:ID="@+ID/dc_4"            androID:layout_wIDth="0dp"            androID:layout_height="match_parent"            app:layout_constraintEnd_toStartOf="@ID/dc_tail"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintStart_toEndOf="@ID/dc_3">            <ImageVIEw                androID:layout_wIDth="match_parent"                androID:layout_height="match_parent"                androID:scaleType="center"                androID:src="@drawable/pic_hj4" />        </relativeLayout>        <relativeLayout            androID:ID="@+ID/dc_tail"            androID:layout_wIDth="0dp"            androID:layout_height="match_parent"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintHorizontal_weight="1"            app:layout_constraintStart_toEndOf="@+ID/dc_4">            <ImageVIEw                androID:layout_wIDth="match_parent"                androID:layout_height="match_parent"                androID:scaleType="center"                androID:src="@drawable/pic_hj5" />        </relativeLayout>    </androIDx.constraintlayout.Widget.ConstraintLayout>

注意事项

以下是使用链时需要考虑的其他事项：

视图可以是水平链和垂直链的一部分，因此可以轻松构建灵活的网格布局。只有当链的每一端都被约束到同一轴上的另一个对象时，链才能正常工作。虽然链的方向为垂直或水平，但使用其中一个方向不会沿该方向与视图对齐。因此，请务必包含其他约束条件，以便使链中的每个视图都能正确定位，例如对齐约束。 总结

以上是内存溢出为你收集整理的Android ConstraintLayout 使用链控制线性组全部内容，希望文章能够帮你解决Android ConstraintLayout 使用链控制线性组所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。