ConstraintLayout

基础知识

1. Relative positioning相对定位

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

总结：layout_constraintA_toB 参数为目标id或者parent

A当前控件，B目标控件,A控件的哪一侧（上下左右）与B控件的哪一侧（上下左右）对齐

例如layout_constraintLeft_toLeftOf 控件A的左侧和控件B的左侧对齐
例如layout_constraintTop_toBottomOf 控件A的顶部和控件B的底部侧对齐

注意，如果当前控件的layout_height或者layout_width值为match_parent，约束会失效，改为0dp即可

2. Margins

【1】基础信息

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

注意，值必须为正数或者0，使用Dimension

【2】当被依赖控件隐藏View.GONE时，下面的几个属性生效

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

当约束目标控件可见性设为View.GONE时，启用该属性，代码示例如下

正常显示,图1

<androidx.constraintlayout.widget.ConstraintLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/mainBkg">
​
   <TextView
   android:id="@+id/view"
   android:layout_width="200dp"
   android:layout_height="200dp"
   android:layout_marginStart="50dp"
   android:layout_marginTop="100dp"
   android:background="#fff"
   android:gravity="center"
   android:text="目标控件"
   android:visibility="visible"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />
​
   <TextView
   android:layout_width="50dp"
   android:layout_height="50dp"
   android:layout_marginStart="20dp"
   android:layout_marginTop="20dp"
   android:background="#123"
   android:gravity="center"
   android:text="当前控件"
   android:textColor="#fff"
   app:layout_constraintStart_toEndOf="@id/view"
   app:layout_constraintTop_toTopOf="@id/view"
   app:layout_goneMarginStart="100dp"
   app:layout_goneMarginTop="200dp" />
  ​
 </androidx.constraintlayout.widget.ConstraintLayout>

图1

隐藏目标控件后android:visibility="gone"

图2

3. Centering positioning中心定位和偏差

当控件左侧与父控件左侧对齐，右侧与父控件右侧对齐时app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"，除非控件大小和父控件大小一致，否侧会在约束方向上（此时为横向）居中显示，同理纵向也是一样

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:text="居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

居中

偏移量

当控件在父控件中居中显示或某方向居中显示时，使用bias属性调整控件偏移位置
layout_constraintHorizontal_bias layout_constraintVertical_bias，方向为从上到下，从左到右，如果layout_constraintHorizontal_bias设为1，位于父控件最右侧，layout_constraintVertical_bias设为1，位于控件最底部
取值范围float，0-1，如果大于1会显示不全，默认0.5
如图，目标控件原本居中显示，设置偏移量后位置改变

偏移

4. Circular positioning圆形定位

您可以以一定角度和距离将一个小部件中心相对于另一个小部件中心进行约束。
layout_constraintCircle 定位控件ID
layout_constraintCircleRadius两个控件中心点之间的距离
layout_constraintCircleAngle角度，取值范围0-360的整数

官方截图

5. Visibility behavior可见性处理

与其他layout的区别在于

• 当控件设为GONE时，被认为尺寸为0，可以理解为布局上一个点
• 若GONE的控件对其他控件有约束，约束保留并生效，当margin会清零

6. Dimension constraints尺寸约束

6.1 为ContraintLayout这只最大最小宽高

当ContraintLayout宽高设为WRAP_CONTENT时可以设置最大最小宽高

• android:minWidth、android:minHeight最小宽高
• android:maxWidth、android:maxHeight最大宽高

6.2 设置控件宽高

设置android:layout_width,android:layout_height
参数：

• 明确设置大小，如1dp
• 设为WRAP_CONTENT，控件自己计算大小
• 设为0dp，根据约束条件显示大小
  注意：不建议在ConstarintLayout中使用MATCH_PARENT，建议设为0dp，约束条件中控件使用parnet

6.3 强制约束

当控件设为WRAP_CONTENT时，添加约束尺寸是不生效的，想要生效，需要添加如下属性

• app:layout_constrainedWidth=”true|false”
• app:layout_constrainedHeight=”true|false”

6.4 MATCH_CONSTRAINT

• 改变最大最小，可以设固定dp数字，也可设为wrap(相当于WRAP_CONTENT)
  layout_constraintWidth_min、layout_constraintHeight_min、layout_constraintWidth_max、layout_constraintHeight_max
• 设置百分比模式
  1. 尺寸大小设为0dp
  2. 设置百分比模式app:layout_constraintWidth_default="percent"或app:layout_constraintHeight_default="percent"
  3. 设置所占大小（0-1）layout_constraintWidth_percent或layout_constraintHeight_percent
• 控件宽高按照比例计算大小
  1. 控件宽高至少一个为0dp
  2. 设置属性app:layout_constraintDimensionRatio
     属性取值可以是宽度比高度的比例（float），也可以是固定格式 "width:height"，也可以是前缀W或H，指定一边相对于另一边的尺寸，如”H, 16:9”，高比宽为16:9

7. Chains 链条

在同一个轴上（水平或垂直），两个或两个以上控件首尾双向连接，则将视为链条。链条由链条头（最左侧或左上方View）设置的属性控制

• 如果在连接上指定边距，将被使用，如在最左侧添加margin，则整个链条左侧有了margin效果
• 通过设置layout_constraintHorizontal_chainStyle、layout_constraintVertical_chainStyle属性来控制链条样式。取值如下
  • spread 默认值，元素平均散开展示,两端显示边距
  • 权重链条，在spread模式下，如果控件设为MATCH_CONSTRAINT，将会占用可用空间，设置layout_constraintHorizontal_weight或layout_constraintVertical_weight控制权重（类似LinearLayout中weight）
  • spread_inside 类似 spread模式，两端不会展示margin
  • packed控件压缩在一起，两端均匀展示margin，通过设置链条头偏移量可以控制链条整体偏移位置
    链条样式