前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >官方自适应新布局ConstraintLayout

官方自适应新布局ConstraintLayout

作者头像
stormKid
发布2018-09-12 15:35:32
1.1K0
发布2018-09-12 15:35:32
举报
文章被收录于专栏:计算机编程计算机编程

写在前面的话:

谷歌在2016年自己研发的类似于IOS约束的布局,可以很好的完成自定义的布局控件的适配,现如今2K甚至是4K屏的出现,导致很多手机应用的开发受到适配上的限制,但ConstraintLayout就是为简化手机适配,减少程序员使用dimens文件造成app体积增大以及程序员自己代码量的增多。现市面上的博文都是根据 “拖拉弹拽” 的方式来使用ConstraintLayout,而真正意义上的程序员是不需要鼠标进行操作的,所以本篇文章用通俗易懂的方式,列出代码相关的属性,来探究此布局的用法。

1、ConstraintLayout详解:

1.1、ConstrainLayout基本理解: 在日常开发过程中我们总会碰到一个名叫RelativeLayout布局,它就是我们ConstrainLayout理解的重大核心,我们可以就将ConstraintLayout理解为可自适应,多功能的RelativeLayout。 1.2、ConstrainLayout中,子view的布局方式: 在相对布局里面,我们经常做的事情就是使用这样的属性:“android:layout_alignParentXXX”,这里XXX有常见的bottom,top,left,right,分别配置子item对于RelativeLayout的里面的位置。而ConstrainLayout里面将此类型的属性升级为自带的“app:layout_constraintXXXtoXXX”属性,这里方便记录便自己录入了一个表格:

RelativeLayout与ConstraintLayout子控件对父控件相同功能的属性列举.png

根据这表格我们可以清楚的看到ConstraintLayout与RelativeLayout的相似性,我们完全可以用理解RelativeLayout的方式来理解我们的ConstraintLayout。

2、ConstraintLayout下子view属性详解:

这个详细可以参考谷歌官方API文档,这里贴上链接:https://developer.android.google.cn/reference/android/support/constraint/package-summary.html 这里博主简单的抽取其中比较重要以及经常使用的属性: 2.1、方位属性 从上面的四大属性的衍生,于是有以下图示:

基础view的边缘说明.png

根据view的边缘属性,我们在ConstraintLayout中我们两个子view的相关性如以下图示:

两子view在ContraintLayout中对应关系.png

2.2、子view坐标系 无论从哪个方面来说,坐标系是理解一个view在viewgroup上的一个比较准确的方式。说到这里,我们还记得LinearLayout的weightSum属性吗?它能很好的适配线性布局下的某个子控件,在ConstraintLayout中我们也有相类似的子view属性,来达到这样的布局适配效果,其展示方式如图所示:

子view坐标系建立.png

根据这样的属性,我们可以完全了解子View在ConstraintLayout里面所处的left与top权重,构成一个以view开始绘制的点的坐标系,这样就很好的实现了子view的整体权重适配。

2.3、适配属性之goneMargin 本属性比较特殊,是一个自定义控制的属性,即如图所示:

goneMargin的效果.png

这里选取了最常见的直观效果,还有很多类似属性如“layout_goneMarginRight,layout_goneMarginTop等”各位看官们可以自行测试实践。

2.4、宽高比适配 在ConstraintLayout中,子view可以根据自己的属性来显示自定义的方式。“android:layout_width”,"android:layout_height"这两个属性很关键,在设置为"warp_content"时,子view会根据屏幕的尺寸,适配全部屏幕。而当设置为"0dp"的时候,就是为自定义weight的时候,这和LinearLayout使用weight进行适配相同。以下就是关于设置0dp的时候的说明图:

子view宽高比适配.png

这里的“layout_constraintDimensionRatio”是个特殊的属性,在这里指明的"W,1:2"<w一定大写>的值,是明确指代类似图上的margin与view本身的1/2的比例值,如果没有写对于父控件的相关约束属性,那么就是两边的margin叠加起来,子view就往某一边伸缩。同样,限定值为"H, 1:2"是Height变化伸缩的效果。这样一个子view就会根据ConstraintLayout本身而去完成比例适配,相当方便。

结尾:以上就是我花一天的时间去研究的新控件相关的属性,关于此控件还有很多种属性值得研究,期待后期研究深入了,写一个补充的文章,现在ConstraintLayout版本也才1.0.2,我相信谷歌在之后还会改善此控件的源码来更方便我们开发者使用。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.03.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在前面的话:
  • 1、ConstraintLayout详解:
  • 2、ConstraintLayout下子view属性详解:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档