ConstraintLayout使用详解

ConstraintLayout 官方文档

1. 相对定位
   定位规则为：app:layout_自身位置_相对位置=“目标控件id/parent(父布局)”
   自身位置 : constraint+left/start/right/end/top/bottom
   相对位置：_to+left/start/right/end/top/bottom

   
   image.png
   官方位置的定义.png

注意：

• layout_constraintBaseline_toBaselineOf文本对齐 image.png
• 同一方向上的约束只能约束到统一方向上，例如自身控件的左侧不能约束到相对控件的上下方向
• 编写布局时可以使用缩写快速找出需要的约束属性，例如 ltl可以快速找出app:layout_constraintLeft_toLeftOf="" image.png

2. 角度定位

属性	说明	补充
app:layout_constraintCircle="@id/t1"	设置参照偏移的控件	偏移点为控件中心
app:layout_constraintCircleAngle="120"	设置偏移的角度	偏移角度初始值为12点钟方向，0~360
app:layout_constraintCircleRadius="100dp"	设置偏移的长度

image.png

3. guideLine定位

属性	说明	补充
orientation	方向	horizontal/vertical
layout_constraintGuide_percent	百分比	0~1

当控件不依赖其他同级控件时 ，为了能够指定位置可以通过添加辅助线的方式来帮助定位

image.png

4. 特殊实现

• Chains 链条
  在同一方向上 控件均互相设置了约束，同时第一个控键为链头，通过链头的layout_constraintHorizontal_chainStyle/layout_constraintVertical_chainStyle属性来设置显示风格
  Chain

---

官方介绍

• 以横向为例

  • spread(散开的) Chain 注意设置控件宽不能为0dp 该风格是默认风格，不指定则为此项

    
    image.png

  • spread_inside Chain 注意设置控件宽不能为0dp

    
    image.png

  • packed(充满包装） 注意设置控件宽不能为0dp

    
    image.png
  • Weighted Chain 权重链 该风格不是通过链头设置ChainStyle实现，而是通过layout_constraintHorizontal_weight/layout_constraintHorizontal_weight来配置所占权重，同时对应方向上的长度应设置为0dp(也就是match_constraint)
    image.png

  • Packed Chain with Bias(偏差),通过设置链头左边约束力的偏差来形成不对称的显示

    
    image.png

注意
在官方介绍中Using "0dp", which is the equivalent of "MATCH_CONSTRAINT",意思是在约束布局中没有了match_content的概念，同时如果宽高设置为0dp则代表着 控件的宽高将占满约束
layout_constraintHorizontal_bias/layout_constraintVertical_bias 用来设置控件的左/上约束力的大小，取值0~1,默认为0.5左右均衡

5. 其他属性

   • Margin与goneMargin
     

     Margin与其他根布局类似没有什么变化，但多了一个goneMargin，针对约束目标消失(gone)时的边距控制，同时只有针对该约束目标的约束方向上goneMargin才生效 image.png
     属性：
     • layout_goneMarginStart
     • layout_goneMarginEnd
     • layout_goneMarginLeft
     • layout_goneMarginTop
     • layout_goneMarginRight
     • layout_goneMarginBottom
   • 宽高比 使用宽高比时至少有一个设置为0dp 默认为宽比高，也可主动指定方向
     layout_constraintDimensionRatio可以设置N:M，也可以指定W,N:M或H,N:M 也可以用N:M的比值来代替
     如 ”W,1:2“等同于“W,0.5”都代表 宽比高 比值为0.5；
     image.png

补充

1. 关于尺寸
   • 使用wrap_content时，可以指定最大值最小值(android:maxWidth/android:maxHeight/android:minWidth/android:minHeight)来确定； 如果控件长度可能超过约束长度时，需要添加app:layout_constrainedWidth=”true|false” //默认false
app:layout_constrainedHeight=”true|false” //默认false来确保不会超出约束长度
   • 使用 0dp 时相当与match_constraint，上方已经解释，同时不赞成使用match_content，因为match_constraint在constaintLayout中的含义可以替代match_content
2. Optimizer 优化器

• 1.1版本之后公开了优化器来对测量时进行优化
  • none : no optimizations are applied 不应用任何优化
  • standard : Default. Optimize direct and barrier constraints only 默认，仅优化直接约束和屏障约束
  • direct : optimize direct constraints 优化直接约束
  • barrier : optimize barrier constraints 优化屏障约束
  • chain : optimize chain constraints (experimental) 优化链约束
  • dimensions : optimize dimensions measures (experimental), reducing the number of measures of match constraints elements 测量优化

3. barrier 屏障约束
   使用barrier来确定控件在哪些控件的哪个方向

属性	说明	补充
barrierDirection	方向	left/right/top/bottom/start/end
constraint_referenced_ids	控件id	多个用“,”隔开

image.png

4. Group 组
   通过group可以指定控制某些控件的显隐状态，通过 constraint_referenced_ids来设置控件id，多个用“,”隔开 `
   image.png
5. PlaceHolder 占位布局
   通过placeholder预先设置布局，通过app:content指定控件id来确认控件位置
   image.png

布局文件：activity_constraint_layout.xml

PS

欢迎评论指正、一起交流：AndroidFamily