ConstraintLayout简单体验

本文深入解析了ConstraintLayout在Android应用布局中的优势与特性,包括其如何替代传统的LinearLayout、RelativeLayout等布局,实现更灵活、扁平化的界面设计。文章详细介绍了ConstraintLayout的属性与用法,如链表性、相对性、偏移性等,以及如何利用这些特性实现类似其他布局的效果。

ConstraintLayout

ConstraintLayout(约束布局)的出现是为了在Android应用布局中保持扁平的层次结构,减少布局的嵌套,为应用创建响应快速而灵敏的界面。ConstraintLayout可以替代其他布局。

由来

Android Studio在3.5.+版本之后创建布局时,默认的布局根节点就是ConstraintLayout,虽然可以通过修改Android Studio的默认配置以及自己手动选择根节点来继续使用LinearLayoutRelativeLayoutGrideLayoutTabLayoutFrameLayout等布局,但是这些布局毕竟相对于ConstraintLayout来说局限性很大,所以这里对常用的ConstraintLayout中的一些属性进行说明。

ConstraintLayout的属性

ConstraintLayout包含很多特性,这里针对一些常用的特效进行说明。通过实现以上布局的效果来进行说明。

实现类似LinearLayout的效果

可以使用ConstraintLayout来实现,LinearLayout从左到右,从上到下的布局效果。

LinearLayout从左到右

ConstraintLayout具有RelativeLayout的能力,即具有相对性(Relative position),可以将一个控件置于相对于另一个控件的位置。这里使用相对性实现该效果:
linear_horizontal

LinearLayout从上到下

ConstraintLayout具有链表性(Chains),链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。

一组控件它们通过一个双向的约束关系链接起来,并且链的属性由一条链的头结点控制。实现该效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uoulz7SY-1594656939873)(./constraint/linear_vertical.png)]

Chain style

layout_constraintHorizontal_chainStyle:水平链条的样式

layout_constraintVertical_chainStyle:竖直链条的样式

chains_styles

实现类似RelativeLayout的效果

可以使用ConstraintLayout来实现,RelativeLayout的任意效果。使用相对性即可完美实现,这里另外使用偏移性(Bias)来实现水平靠左且垂直居于屏幕3/10处
bias_vertical

如果想要将控件在水平方向偏向左、或者在竖直方向偏向一个方向,就可以配合使用bias属性:

水平方向的偏移设置使用layout_constraintHorizontal_bias,垂直方向的偏移设置使用layout_constraintVertical_bias。居中情况下,bias的默认值为0.5,取值范围是0~1,是以left或top为始起边界。

实现类似FrameLayout的效果

可以使用ConstraintLayout来实现,FrameLayout的任意效果。这里使用Circular positioning(圆形定位)来实现A居中B位于A右侧上方30度

circle_position

相关属性

  • layout_constraintCircle:参照控件的id
  • layout_constraintCircleRadius:两个控件中心连线的距离
  • layout_constraintCircleAngle:当前View的中心与目标View的中心的连线与Y轴方向的夹角(取值:0~360)。

实现类似TabLayout的效果

可以使用ConstraintLayout来实现,TabLayout的任意效果。这里使用Percent dimension(百分比性)来实现水平2个button平分父布局的宽度
percent_width

更多

具体更多特性,请自行查看官方文档

参考:

https://developer.android.com/reference/android/support/constraint/ConstraintLayout

https://www.jianshu.com/p/106e4282a383

https://www.jianshu.com/p/a74557359882

https://blog.youkuaiyun.com/lmj623565791/article/details/78011599

https://blog.youkuaiyun.com/guolin_blog/article/details/53122387

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值