XML 属性

边缘约束

  • app:layout_constraintStart_toStartOf：View左边与某 View 左边对齐
  • app:layout_constraintStart_toEndOf：View 左边与某 View 右边对齐
  • app:layout_constraintEnd_toStartOf：View 右边与某 View 左边对齐
  • app:layout_constraintEnd_toEndOf：View 右边与某 View 右边对齐
  • app:layout_constraintTop_toTopOf：View 上边与某 View 上边对齐
  • app:layout_constraintTop_toBottomOf：View 上边与某 View 下边对齐
  • app:layout_constraintBottom_toTopOf：View 下边与某 View 上边对齐
  • app:layout_constraintBottom_toBottomOf：View 下边与某 View 下边对齐
  • app:layout_constraintBaseline_toBaselineOf：View 与某 View 的基线对齐

注：四边的 margin 只有设置了边缘约束才会生效，左右或者上下的约束成对创建会产生居中效果

辅助约束

引导线约束Guideline

宽高属性是无效的，因为这个并不画到屏幕上

  1. <!-- 垂直分割引导线（百分比）：将空间平分成左右两份 -->
  2. <android.support.constraint.Guideline
  3.     android:id="@+id/guideline"
  4.     android:layout_width="wrap_content"
  5.     android:layout_height="wrap_content"
  6.     android:orientation="vertical"
  7.     app:layout_constraintGuide_percent="0.5" />
  9. <!-- 垂直分割引导线（数值）：距离左边 20dp 位置添加分割线 -->
  10. <android.support.constraint.Guideline
  11.     android:id="@+id/guideline"
  12.     android:layout_width="wrap_content"
  13.     android:layout_height="wrap_content"
  14.     android:orientation="vertical"
  15.     app:layout_constraintGuide_begin="20dp" />
  17. <!-- 垂直分割引导线（数值）：距离右边 20dp 位置添加分割线 -->
  18. <android.support.constraint.Guideline
  19.     android:id="@+id/guideline"
  20.     android:layout_width="wrap_content"
  21.     android:layout_height="wrap_content"
  22.     android:orientation="vertical"
  23.     app:layout_constraintGuide_end="20dp" />

水平引导线只需要将 android:orientation="vertical" 修改为 android:orientation="horizontal" 即可

屏障约束Barrier

  1. <!-- 根据 tv1 和 tv2 添加屏障约束，屏障位置为两个 view 的最右边（end) -->
  2. <android.support.constraint.Barrier
  3.     android:id="@+id/barrier"
  4.     android:layout_width="wrap_content"
  5.     android:layout_height="wrap_content"
  6.     app:barrierDirection="end"
  7.     app:constraint_referenced_ids="tv1,tv2"/>

注：就算退 tv1 和 tv2 的宽度改变屏障约束的位置还是会在两个 view 的最右边（ app:barrierDirection="end" ，end：右边，start：左边，top：上边，bottom：下边）

bias偏移约束

app:layout_constraintHorizontal_bias="0" 水平偏移
app:layout_constraintVertical_bias="0" 垂直偏移
默认情况下同时设置左右约束会有居中效果, 可通过 bias 来进行偏移
偏移值 0~1, 0 代表偏移到左侧, 1 代表偏移到右侧, 不设置时为默认值 0.5 (居中), 需要与约束方向相同

  1. <TextView
  2.     android:id="@+id/tv1"
  3.     android:layout_width="0dp"
  4.     android:layout_height="100dp"
  5.     android:text="text1"
  6.     android:visibility="visible"
  7.     app:layout_constraintDimensionRatio="h,1:2"
  8.     app:layout_constraintStart_toStartOf="parent"
  9.     app:layout_constraintEnd_toEndOf="parent"
  10.     app:layout_constraintHorizontal_bias="0.3"
  11.     app:layout_constraintTop_toTopOf="parent" />

比例宽高

app:layout_constraintDimensionRatio="1" 通过该属性可设置宽高比, 通过比例控制 View 的宽高, 注: 必须有一边是 **0dp**
app:layout_constraintDimensionRatio="1" 以有值的一边为基准, 将另一边设置为 1 倍长度
app:layout_constraintDimensionRatio="1:2" 以有值的一边为基准, 有值边的 1 倍长度等于另一边的 2 倍长度
app:layout_constraintDimensionRatio="h,1:2" 以 h (高度) 基准, w (宽度) 是 h 的 2 倍, 同理 w,1:2 就是以 w (宽度) 基准, 是 h (高度) w 的 2 倍

margin 属性

margin 属性需要通过对应的约束来实现, 在没有设置对应的约束时, margin 属性无效, 负值等同于 0dp

goneMargin 属性

与 margin 属性类似, 但需要对应约束 View 的 android:visibility="gone" , 才会生效

chainStyle 链条样式

  • spread: 所有间距都相同( …view…view…view…)
  • spread_inside: 中间间距都相同(view…view…view)
  • packed: 集中到中间, 两边间距相同(…viewviewview…)

    circle 属性

    app:layout_constraintCircle="@+id/tv1" 约束 View
    app:layout_constraintCircleAngle="45" 所在角度
    app:layout_constraintCircleRadius="150dp" 距 View 中心点距离
    1. <TextView
    2.   ...
    3.   app:layout_constraintCircle="@+id/tv1"
    4.   app:layout_constraintCircleAngle="45"
    5.   app:layout_constraintCircleRadius="150dp" />

    constrainedWidth/constrainedHeight 相关(填充效果)

    ```xml 

  1. <a name="QihhO"></a>
  2. ## 常用示例
  3. <a name="crwIn"></a>
  4. ### 垂直居中
  5. ```xml
  6. <TextView
  7.     android:id="@+id/tv1"
  8.     android:layout_width="wrap_content"
  9.     android:layout_height="wrap_content"
  10.     android:text="text1"
  11.     app:layout_constraintBottom_toBottomOf="parent"
  12.     app:layout_constraintTop_toTopOf="parent" />

水平居中

  1. <TextView
  2.     android:id="@+id/tv1"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:text="text1"
  6.     app:layout_constraintStart_toStartOf="parent"
  7.     app:layout_constraintEnd_toEndOf="parent" />

水平填充

  1. <TextView
  2.     android:id="@+id/tv1"
  3.     android:layout_width="0dp"
  4.     android:layout_height="wrap_content"
  5.     android:text="text1"
  6.     app:layout_constraintStart_toStartOf="parent"
  7.     app:layout_constraintEnd_toEndOf="parent" />
  8. <!-- 或者 -->
  9. <TextView
  10.     android:id="@+id/tv1"
  11.     android:layout_width="wrap_content"
  12.     android:layout_height="wrap_content"
  13.     android:text="text1"
  14.     app:layout_constrainedWidth="true"
  15.     app:layout_constraintStart_toStartOf="parent"
  16.     app:layout_constraintEnd_toEndOf="parent" />

垂直填充

  1. <TextView
  2.     android:id="@+id/tv1"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="0dp"
  5.     android:text="text1"
  6.     app:layout_constraintBottom_toBottomOf="parent"
  7.     app:layout_constraintTop_toTopOf="parent" />
  8. <!-- 或者 -->
  9. <TextView
  10.     android:id="@+id/tv1"
  11.     android:layout_width="wrap_content"
  12.     android:layout_height="wrap_content"
  13.     android:text="text1"
  14.     app:layout_constrainedHeight="true"
  15.     app:layout_constraintBottom_toBottomOf="parent"
  16.     app:layout_constraintTop_toTopOf="parent" />

居中且不超出

  1. <!-- width/height 必须是 wrap_content -->
  2. <!-- layout_constrainedWidth/layout_constrainedHeight 必须是 true -->
  3. <TextView
  4.     android:id="@+id/tv1"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content"
  7.     android:text="text1"
  8.     app:layout_constrainedHeight="true"
  9.     app:layout_constraintBottom_toBottomOf="parent"
  10.     app:layout_constraintTop_toTopOf="parent" />

参考线

将 TextView 布置到距离垂直中线右边 10dp 位置

  1. <androidx.constraintlayout.widget.Guideline
  2.     android:id="@+id/guideline"
  3.     android:orientation="vertical"
  4.     app:layout_constraintGuide_percent="0.5"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content" />
  7. <TextView
  8.     android:id="@+id/tv"
  9.     android:layout_width="wrap_content"
  10.     android:layout_height="wrap_content"
  11.     android:layout_marginStart="10dp"
  12.     app:layout_constraintStart_toEndOf="@+id/guideline" />

垂直中线

  1. <androidx.constraintlayout.widget.Guideline
  2.     android:id="@+id/guideline"
  3.     android:orientation="vertical"
  4.     app:layout_constraintGuide_percent="0.5"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content" />

水平中线

  1. <androidx.constraintlayout.widget.Guideline
  2.     android:id="@+id/guideline"
  3.     android:orientation="horizontal"
  4.     app:layout_constraintGuide_percent="0.5"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content" />

距离参考线

  1. <androidx.constraintlayout.widget.Guideline
  2.     android:id="@+id/guideline"
  3.     android:orientation="horizontal"
  4.     app:layout_constraintGuide_begin="20dp"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="wrap_content" />

左侧距离参考线 app:layout_constraintGuide_begin="20dp"
右侧距离参考线 app:layout_constraintGuide_end="20dp"

屏障

多用于需要参考两个或多个 View 的情况

在两个或多个 View 的右侧

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  9.     <TextView
  10.         android:id="@+id/tv1"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="text1"
  14.         app:layout_constraintStart_toStartOf="parent"
  15.         app:layout_constraintTop_toTopOf="parent" />
  17.     <TextView
  18.         android:id="@+id/tv2"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:text="text2fdfdf"
  22.         app:layout_constraintStart_toStartOf="parent"
  23.         app:layout_constraintTop_toBottomOf="@+id/tv1" />
  25.     <android.support.constraint.Barrier
  26.         android:id="@+id/barrier"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         app:barrierDirection="end"
  30.         app:constraint_referenced_ids="tv1,tv2" />
  32.     <TextView
  33.         android:id="@+id/tv3"
  34.         android:layout_width="wrap_content"
  35.         android:layout_height="wrap_content"
  36.         android:text="text2fdfdf"
  37.         android:layout_marginStart="10dp"
  38.         app:layout_constraintStart_toEndOf="@+id/barrier" />
  40. </android.support.constraint.ConstraintLayout>

app:barrierDirection="end" 设置屏障方位 start, end, top, bottom
app:constraint_referenced_ids="tv1,tv2" 设置参考 ViewId

案例

案例 1

RecyclerView 高度自动调整, 最大不超过全屏高度减去具体值, 最小仅包裹 item

  1. <androidx.constraintlayout.widget.ConstraintLayout
  2.     android:layout_width="match_parent"
  3.     android:layout_height="match_parent"
  4.     android:background="#80000000" >
  6.     <androidx.recyclerview.widget.RecyclerView
  7.         android:layout_width="match_parent"
  8.         android:layout_height="wrap_content"
  9.         android:layout_marginTop="@dimen/sw_155"
  10.         android:background="@color/base_white"
  11.         app:layout_constrainedHeight="true"
  12.         app:layout_constraintBottom_toBottomOf="parent"
  13.         app:layout_constraintTop_toTopOf="parent"
  14.         app:layout_constraintVertical_bias="1"
  15.         tools:itemCount="10"
  16.         tools:listitem="@layout/layout_item" />
  18. </androidx.constraintlayout.widget.ConstraintLayout>

2020-08-19 10.39.57.gif
上图为 itemCount 5 - 50 的效果