目录

1. 介绍
2. ConstraintLayout的优点
3. ConstraintLayout使用方法
   1. Relative positioning（相对定位）
   2. Margins（边距）
   3. Centering positioning（居中偏移）
   4. Circular positioning（圆心偏移）
   5. Visibility behavior（隐藏行为）
   6.  Dimension constraints(尺寸约束)
   7.  Chains（链）
4. Virtual Helpers objects(辅助工具)

        4.1  Optimizer（计算优化）

        4.2  Barrier（屏障）

        4.3  Group（分组）

        4.4  PlaceHolder（占位符）

        4.5  GuideLine(基准线)

 

 

1.介绍

Contrstraint Layout Library包是Android support library的一部分，现在不再维护了。Contrstraint Layout Library已经被AndroidX约束布局库所取代，后者是Jetpack的一部分。

ConstraintLayout类已经被androidx.constraintlayout.widget.ConstraintLayout所取代。我们建议在所有新项目中使用AndroidX库。

您还应该考虑将现有项目迁移到AndroidX。

2 .ConstrainLayou优点

1. 减少布局的层次，减少过度绘制。

复杂的布局一般会用RelativeLayout嵌套多层RelativeLayout，这样会导致布局层次

过深，性能会很低

1. 适配上更灵活

ConstrainLayout可以按照比例约束控制尺寸和位置能够更好的适配不通的机型

 

3. ConstraintLayout使用方法

   3.1相对定位

        相对定位是在ConstraintLayout中创建布局的基本构件之一。这些约束允许控件

        将给定的控件相对于另一个控件进行定位。您可以约束一控件在水平方向和者

     垂直方向:

      Horizontal 方向: left, right, start and end sides

      Vertical 方向: top, bottom sides and text baseline

       文字描述比较抽象见图3-1

     

     代码如下：

         <Button android:id="@+id/buttonA" ... />

         <Button android:id="@+id/buttonB" ...

                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />

 

             经常用到约束属性列表：

             layout_constraintLeft_toLeftOf

             layout_constraintLeft_toRightOf

             layout_constraintRight_toLeftOf

             layout_constraintRight_toRightOf

              layout_constraintTop_toTopOf

             layout_constraintTop_toBottomOf

             layout_constraintBottom_toTopOf

             layout_constraintBottom_toBottomOf

             layout_constraintBaseline_toBaselineOf

             layout_constraintStart_toEndOf

              layout_constraintStart_toStartOf

             layout_constraintEnd_toStartOf

             layout_constraintEnd_toEndOf

             它们都采用另一个控件的引用id，或者父组件(父组件将引用父容器，

               即ConstraintLayout):<Button android:id="@+id/buttonB" ...

                 app:layout_constraintLeft_toLeftOf="parent" />

 

          3.2Margins(边距)

             

           如果设置了margin，它们将应用于相应的约束(如上图)，将边距强制设置为目标和源端之间的空间。通常的布局边距属性可以这样                使用:

              android:layout_marginStart

             android:layout_marginEnd

             android:layout_marginLeft

             android:layout_marginTop

             android:layout_marginRight

             android:layout_marginBottom

            注意：边界只能是正的或等于0,具体值dp。

           Margins  visiable=gone的控件

           当位置约束目标的可见性为gone，可以使用以下属性指定一个margin值:

            layout_goneMarginStart

           layout_goneMarginEnd

           layout_goneMarginLeft

           layout_goneMarginTop

            layout_goneMarginRight

            layout_goneMarginBottom

           

         3.3  Centering positioning（居中偏移）

              ConstraintLayout水平居中显示写法

             

              控件中居中的写法为：

                                   <Button

                                      app:layout_constraintBottom_toBottomOf="parent"

                                      app:layout_constraintLeft_toLeftOf="parent"

                                      app:layout_constraintRight_toRightOf="parent"

                                         app:layout_constraintTop_toTopOf="parent" />

                    意思是把控件的上下左右约束在布局的上下左右，这样就能把控件放在

                   布局的中间了。相当于RelativeLayout  centerInParent=true

 

                  控件居中也可以添加偏差属性进行调整定位例如：

                  layout_marginLeft=”100dp“

                     居中后使用marginLeft=100dp,button水平居中后向右偏移100dp除了这种，还可以使用Bias（比例）

                      layout_constraintHorizontal_bias和layout_constraintVertical_bias

                     layout_constraintHorizontal_bias取值范围为0-1，如果是0，则Button在布局的最左侧，如果赋值1则Button在布局的最右                               侧，如果为0.5则是水平居中，如果是0.3，则倾向于左侧。垂直偏移同理

 

             3.4  Circular positioning（圆心偏移）

                约束一个控件中心相对于另一个控件中心的角度和距离。

                 将控件定位在圆上(如下图)。

                 layout_constraintCircle : references another widget id

                   layout_constraintCircleRadius : the distance to the other widget center

                 layout_constraintCircleAngle : which angle the widget should be at(in degrees, from 0 to 360)

                3.5 Visibility behavior（隐藏行为）

                 ConstraintLayout会对标记为View.GONE的控件进行的特定处理。设置Gone的控件不会显示也不是布局本身的一部分.

                  如果标记为gone他们的尺寸不会改变，但在布局计算方面，gone的控件仍然是它的一部分，有一个重要的区别:

                  对于布局传递，它们的维度将被认为是零(基本上,它们将被解析为一个点)

                    如果它们对其他控件有约束，它们仍然会有用，但任何边界都将等于零

           3.6 Dimension constraints(尺寸约束)

              控件的尺寸可以通过四种不同方式指定：

             1.使用指定的尺寸

 

              2.使用wrap_content，让控件自己计算大小

                  当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：

                    android:minWidth 最小的宽度

                  android:minHeight 最小的高度

                  android:maxWidth 最大的宽度

                  android:maxHeight 最大的高度

                   注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：

                   app:constrainedWidth=”true”

                     app:constrainedHeight=”true”

 

               3. 使用 0dp (MATCH_CONSTRAINT)

               官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent，举                   个例子：

                  4. 宽高比

                       当宽或高至少有一个尺寸被设置为0dp时，可以通过属性

                         layout_constraintDimensionRatio设置宽高比，

                  除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如：

                   app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3

                   app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

 

                 5. Percent dimension

                   要使用Percent，您需要设置以下内容:

                  1.宽高设置为MATCH_CONSTRAINT (0dp)

                   2.默认值应该设置为% app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"

                    3.layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值

 

         3.7 Chains（链）

            Chains在单个轴(水平或垂直)中提供类似于组的行为。另一个轴可以独立约束。

            1.create chains

              如果一组控件通过双向连接链接在一起，那么它们就被认为是一个链(如图)

                 2.chains heads

                       链是由设置在链的第一个元素(链的“头”)上的属性控制的:如下图

                       head是水平链最左边的控件，垂直链最上面的控件

               3.margins in chains

                  如果在chains上指定了margins ，则会考虑到margins。在spread chains的情况下，margins 将从分配的空间中扣除。

                4.Chain Style

                  在第一个控件上设置属性layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle默认是值是                                  CHAIN_SPREAD

                  CHAIN_SPREAD:默认模式

                   Weighted chain：如果一些控件被设置为MATCH_CONSTRAINT，它们将分割可用空间

                   CHAIN_SPREAD_INSIDE：chain的两端不会被展开

                   CHAIN_PACKED：该链的控件将被打包在一起。子元素的水平或垂直偏差属性将影响打包元素的位置

 

4.Virtual Helpers objects(辅助工具)

      4.1 Optimizer（计算优化）

     可以通过将设置: ConstraintLayout 属性layout_optimizationLevel来进行计算优化

     取值：none : 无优化

     standard : 只优化直接约束和障碍约束

      direct : 优化直接约束

      barrier : 优化屏障约束

      chain : 优化链约束

      dimensions : 优化尺寸测量

   4.2 Barrier(屏障)

    

                        barrierDirection取值：BOTTOM  END  LEFT RIGHT  START

 

               4.3 Group

                   该类控制一组引用控件的可见性。控件通过添加到逗号分隔的id列表来引用

                       <androidx.constraintlayout.widget.Group
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:visibility="visible"
                               app:constraint_referenced_ids="TextView1,TextView2"
                              />

               4.4 GuideLine

                        Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。

                         Guildline的主要属性：

                         android:orientation 垂直vertical，水平horizontal

                         layout_constraintGuide_begin 开始位置

                          layout_constraintGuide_end 结束位置

                         layout_constraintGuide_percent 距离顶部的百分比(orientation= horizontal时则为距离左边)

         <android.support.constraint.Guideline

                android:id="@+id/guideline1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:orientation="horizontal"

                 app:layout_constraintGuide_begin="50dp" />



              <android.support.constraint.Guideline

                 android:id="@+id/guideline2"

                  android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                  android:orientation="vertical"

                 app:layout_constraintGuide_percent="0.5" />

 

                4.5 Placeholder

                     Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。          <android.support.constraint.Placeholder

              android:id="@+id/placeholder"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               app:content="@+id/textview"

               app:layout_constraintLeft_toLeftOf="parent"

               app:layout_constraintTop_toTopOf="parent" />



            <TextView

               android:id="@+id/textview"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:background="#cccccc"

                android:padding="16dp"

                 android:text="TextView"

               android:textColor="#000000"

               app:layout_constraintRight_toRightOf="parent"

               app:layout_constraintTop_toTopOf="parent" />