搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 全栈攻城狮之道 > android布局控件ConstraintLayout,看这篇就够了

android布局控件ConstraintLayout,看这篇就够了

全栈攻城狮之道 2017-10-11


ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在2016年的I/O大会上重点宣传的一个功能。android studio2.2以上的版本都支持ConstraintLayout布局,这个约束布局很像ios中的约束布局,如果你懂ios中的布局,那么这个理解起来就很容易了。


今天就来体验一下这神奇的ConstraintLayout吧。



项目中添加对ConstraintLayout的依赖

首先在项目的app模块的build.gradle中添加配置,即在dependencies中添加compile 'com.android.support.constraint:constraint-layout:1.0.2'


然后重新编译一下项目,这时候项目可能会报错,那么就需要清除一下缓存,重新打开项目,依次点击file->invalidate Caches / Restart->Invalidate and Restart。


android布局控件ConstraintLayout,看这篇就够了


清除缓存重启项目后Gradle会报failed to resolve错误,未能解决依赖包的导入,同时下面会给出解决该错误的方案,选择第一个安装依赖库同步到项目中。


android布局控件ConstraintLayout,看这篇就够了


这是as就会自动去帮我们下载需要的aar,下载完成后重新编译一下项目就不会有问题了,这时候就可以正常使用ConstraintLayout了。


android布局控件ConstraintLayout,看这篇就够了

ConstraintLayout的属性详解



第一类属性,布局约束

布局约束的属性最常用的就是以下13个了:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBaseline_toBaselineOf="parent"
  1. layout_constraintTop_toTopOf="id",表示该控件的头部对齐对应id控件的头部,比如layout_constraintTop_toTopOf="parent"就是约束该控件的top与父控件的top相等,也就是控件顶部的y坐标相等。

  2. layout_constraintTop_toBottomOf属性刚好与layout_constraintTop_toTopOf属性相反,它表示该控件的头部与对应id控件的底部对齐,比如layout_constraintTop_toBottomOf="parent"就是约束该控件的bottom等于父类的bottom。


这里的对齐是通过公式y(子)=y(父)+margin来约束的,很像iOS中的y(子)=n*y(父)+margin。比如子控件TextView设置了layout_constraintTop_toTopOf="parent",而同时该TextView还设置了layout_marginTop属性值为20dp,那么该TextView的top值就等于父类ConstraintLayout的top值再加上20dp。


android布局控件ConstraintLayout,看这篇就够了

android布局控件ConstraintLayout,看这篇就够了


其它的left,right,bottom的属性也是如此推算的,而xxxxEnd_toxxxOf跟xxxxLef_toxxxOf是一样的,xxxStart_toxxxOf跟xxxRight_toxxxOf是一样的。


layout_constraintBaseline_toBaselineOf约束的是该控件与指定控件在同一条直线上,也就是两个控件的中心坐标的y值相等,注意,只是y轴的值相等,如果两个控件有重叠的部分,布局写在后面的控件会显示在最上面,也就是两个控件重叠的部分底下的控件会被覆盖。来看个简单的实例:


android布局控件ConstraintLayout,看这篇就够了

布局文件中,分别给定两个控件的宽高,然后只对一个控件添加约束,固定其位置,另一个控件只添加一个layout_constraintBaseline_toBaselineOf约束,让它与前一个控件在同一条线上,也就是y轴坐标相等。


android布局控件ConstraintLayout,看这篇就够了


(效果如上图)可以看到,控件tv2与控件tv1在同一直线上,而不添加其它约束时,left默认从0开始。


为什么是控件的中心坐标y的值相等?我们把上面实例的控件tv2的高度改小一点,把控件tv1的高度改大一点,同时去掉这两个控件的padding属性,再来看看效果。


android布局控件ConstraintLayout,看这篇就够了


android布局控件ConstraintLayout,看这篇就够了


ok,一目了然,不用多说了吧。


第二类属性,margin

margin是约束控件与控件之间的距离,一共有七个属性(严格来说只有四个),即:

android:layout_margin="10dp"
android:layout_marginTop="@dimen/text_size_20"
android:layout_marginEnd="@dimen/text_size_20"
android:layout_marginLeft="@dimen/text_size_20"
android:layout_marginRight="@dimen/text_size_20"
android:layout_marginBottom="@dimen/layout_size_20"
android:layout_marginStart="@dimen/layout_size_20"

与LinearLayout等其它布局的margin属性的作用其实是一样的,设置layout_margin属性相当于同时设置了其它四个layout_marginXxx属性,而且遵循“先设置后覆盖”的原则,也就是说如果你已经设置了layout_margin属性为10dp,接着又设置layout_marginLeft属性为 20dp,那么最后的该控件的四个margin属性的值分别为layout_marginLeft=20dp,layout_marginTop=10,layout_marginRight=10dp,layout_marginBottom=10dp。layout_marginStart与layout_marginLeft等同,layout_marginEnd与layout_marginRight等同,所以严格来说边距约束的属性只有四个。


来看一个简单的实例:

android布局控件ConstraintLayout,看这篇就够了

在原来的布局上添加一个TextView控件,id为tv3,设置其头部对齐tv1的底部,设置其左则对齐tv2的左侧,最后设置顶部外边距为100dp,左则外边距为100dp。其效果如下图所示。


android布局控件ConstraintLayout,看这篇就够了


第三类属性,goneMargin


gone外边距约束属性共有四类,严格来说只有四类,因为Start与Left等同,End与Right等同。

app:layout_goneMarginBottom="@dimen/layout_size_20"
app:layout_goneMarginTop="@dimen/layout_size_20"
app:layout_goneMarginLeft="@dimen/layout_size_20"
app:layout_goneMarginRight="@dimen/layout_size_20"
app:layout_goneMarginStart="@dimen/layout_size_20"
app:layout_goneMarginEnd="@dimen/layout_size_20"


那么goneMargin属性与margin有什么区别呢?来看一个例子吧,我觉得用实例讲解比说一堆理论更有效。

android布局控件ConstraintLayout,看这篇就够了

在ConstraintLayout控件中添加两个button,分别是btnLeft和btnRight,先固定btnLeft,然后将btnRight约束在btnLeft的左边,同时与btnLeft在同一直线上,也就是水平中心y轴对齐。设置btnRight的左侧外边距为20dp,看下效果。

android布局控件ConstraintLayout,看这篇就够了


与预想的一样,很完美。这时候我们再改变一下布局,让btnLeft隐藏,也就是设置btnLeft的visibility属性为gone,同时修改一个btnRight的layout_constrainBaseLine_toBaseLineOf约束,将其去掉,因为btnLeft的隐藏会影响到baseline的约束,而这里我们只探讨goneMargin属性,说以将其改为

app:layout_constraintBottom_toBottomOf="parent" 

android:layout_marginBottom="@dimen/layout_size_20"。


android布局控件ConstraintLayout,看这篇就够了

这时再来看看布局的显示效果:

android布局控件ConstraintLayout,看这篇就够了


现在将layout_marginLeft改为layout_goneMarginLeft,并将layout_goneMarginLeft属性值设为180dp,再看页面效果。

android布局控件ConstraintLayout,看这篇就够了

android布局控件ConstraintLayout,看这篇就够了

很明显,当前设置的layout_goneMarginLeft属性并不起作用,那么我们再将btnLeft设为不可见,即将btnLeft的visibility属性设置为gone,然后看效果。


android布局控件ConstraintLayout,看这篇就够了

btnRight的位置丝毫不受btnLeft的隐藏所影响。为什么之后将layout_goneMarginLeft的值设置为180dp呢,因为btnLeft的宽度为180dp,而btnLeft的layout_marginLeft的值为20dp,加起来就是180dp.

layout_marginLeft和layout_goneMarginLeft属性可以同时设置,因为当btnLeft显示时只有layout_marginLeft起作用,当btnLeft隐藏时,只有layout_goneMarginLeft起作用。

由于篇幅问题,就说到这里吧。



       

长按二维码关注我吧

不要错过哦





版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《android布局控件ConstraintLayout,看这篇就够了》的版权归原作者「移动开发与网络安全技术栈」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注移动开发与网络安全技术栈微信公众号

移动开发与网络安全技术栈微信公众号:app_wujiuye

移动开发与网络安全技术栈

手机扫描上方二维码即可关注移动开发与网络安全技术栈微信公众号

移动开发与网络安全技术栈最新文章

精品公众号随机推荐