ConstraintLayout使用详解——怎么用在这里都能找到

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
  1. 角度定位
属性 说明 补充
app:layout_constraintCircle="@id/t1" 设置参照偏移的控件 偏移点为控件中心
app:layout_constraintCircleAngle=“120” 设置偏移的角度 偏移角度初始值为12点钟方向,0~360
app:layout_constraintCircleRadius=“100dp” 设置偏移的长度

image.png

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

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

  1. 特殊实现
  • 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左右均衡

  1. 其他属性
    • 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 测量优化
  1. barrier 屏障约束
    使用barrier来确定控件在哪些控件的哪个方向
属性 说明 补充
barrierDirection 方向 left/right/top/bottom/start/end
constraint_referenced_ids 控件id 多个用“,”隔开

image.png
4. Group 组
通过group可以指定控制某些控件的显隐状态,通过 constraint_referenced_ids来设置控件id,多个用“,”隔开 ![image.png](https://upload-images.jianshu.io/upload_images/3026588-96773d3b2921bddb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 5. PlaceHolder 占位布局 通过placeholder预先设置布局,通过app:content`指定控件id来确认控件位置
image.png

布局文件:activity_constraint_layout.xml

PS

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

发布了25 篇原创文章 · 获赞 9 · 访问量 4982
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览