一文看懂ConstraintLayout的用法
ConstraintLayout
相对于 RelativeLayout
来说性能更好,布局上也更加灵活。在最新的Google Android开发文档中是推荐使用 ConstraintLayout
的,下面来看看具体用法。
0x00 相对位置(Relative positioning)
这个比较简单,看图解释,假设控件B要放在控件A的右侧,可以使用 layout_constraintLeft_toRightOf
属性。
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
看图2可以了解控件约束属性代表的含义。
类似相对位置的约束属性有:
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
0x01 外边距(Margins)
这个属性也好理解,看图3
可以通过以下属性设置一个控件相对另一个控件的外边距:
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
属性值必须是大于或者等于0。
接一下看一个 RelativeLayout
没有的属性:
0x02 Margins when connected to a GONE widget
当一个相对的控件隐藏时, ConstraintLayout
也可以设置一个不同的边距:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
具体的栗子下面会讲到。
0x03 Centering positioning and bias
居中以及设置偏差
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
还可以设置bias属性,表示子控件相对父控件的位置倾向,可以使用属性:
layout_constraintHorizontal_bias
layout_constraintVertical_bias
假设设置控件A相对父控件横向偏差是30%:
<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
0x04 弧形定位(Circular positioning)
这个属性是在1.1版本添加的。
可以使用属性有:
layout_constraintCircle
: 相对控件的idlayout_constraintCircleRadius
: 相对控件中心的距离,也就是圆的半径layout_constraintCircleAngle
: 相对夹角 (从 0 ~ 360度)
例如,图6代码示例
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
0x05 Visibility behavior
一般情况下,设置 GONE
属性后,控件就不会出现在布局中了,B控件对A控件的margin属性也就没有作用了。
但是 ConstraintLayout
能对已经设置 GONE
属性的控件进行特殊处理。当A控件设置 GONE
之后,A控件相当于变成了一个点,B控件相对于对A的约束仍然是起作用的。图7的代码示例,A控件设置成了 GONE
,当B控件的 margin
属性还是有作用的。
<android.support.constraint.ConstraintLayout ...>
<Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button A"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent" />
<!--当A控件设置Gone之后,B控件的margin属性是起作用的,即左边距还是30dp-->
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="button B"
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
</android.support.constraint.ConstraintLayout>
然而有时候,B控件是不希望相对于隐藏控件的属性还起作用。这时候可以用到上面0x02提到的 goneMargin
属性。
<android.support.constraint.ConstraintLayout ...> <Button
android:id="@+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button A"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent" />
<!--当A控件设置Gone之后,希望B控件的左边距为0dp,那么可以设置layout_goneMarginLeft属性-->
<Button
android:id="@+id/buttonB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="button B"
app:layout_goneMarginLeft="0dp"
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
</android.support.constraint.ConstraintLayout>
0x06 尺寸约束(Dimensions constraints)
设置最小或最大尺寸
可以使用以下属性:
android:minWidth
android:minHeight
android:maxWidth
android:maxHeight
当 ConstraintLayout
宽高设置为 wrap_content
时,以上属性可以起作用。
设置百分比布局
当 ConstraintLayout
子布局的宽或高设置为0dp时,可以对宽或高设置百分比,例如设置一个按钮的宽是屏幕宽度的30%,那么可以这样处理:
<android.support.constraint.ConstraintLayout ...>
<!--按钮width属性设置为0dp,然后需要指定layout_constraintWidth_default,以及layout_constraintWidth_percent两个属性-->
<Button
android:id="@+id/buttonB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button B"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>
设置宽度百分比布局:
layout_width
或者layout_height
设置为0dp- 设置
layout_constraintWidth_default="percent"
或者layout_constraintHeight_default="percent"
- 通过
layout_constraintWidth_percent
或者layout_constraintHeight_percent
指定百分比
设置宽高比例
当 layout_width
或者 layout_height
设置为0dp时,还可以通过 layout_constraintDimensionRatio
设置宽高比例。该比例表示 width:height
的值。
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
当 layout_width
与 layout_height
都设置为0dp时,通过 app:layout_constraintDimensionRatio
指定宽高的比例。这时控件的宽高将按照该比例相对于父布局的大小设置宽高。
<android.support.constraint.ConstraintLayout ...>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
h,16:9
的含义是 h:w=16:9
也可设置 w,9:16
效果是一样的。
0x07 Chains
在横轴或或者数轴上的控件相互约束时,可以组成一个链式约束。
图9中,A控件与B控件相互约束,这就是一个简单的链式约束。
链头
Chain Style
可以通过 layout_constraintHorizontal_chainStyle
或 layout_constraintVertical_chainStyle
设置链式控件的样式。这个属性有点像 LinearLayout
中的 weight
属性平分布局。
CHAIN_SPREAD
- Weighted chain
CHAIN_SPREAD_INSIDE
CHAIN_PACKED
设置权重
layout_constraintHorizontal_weight
layout_constraintVertical_weight
0x08 引用
https://developer.android.com/reference/android/support/constraint/ConstraintLayout
一文看懂ConstraintLayout的用法的更多相关文章
- 一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系
我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web服务器/Web容器/Web应用程序服务器/反向代理有点像四胞胎,在网络上经常一起出现.本文将带读者对这四个相似概念如何区分. 1 ...
- 一文看懂https如何保证数据传输的安全性的【转载、收藏】
一文看懂https如何保证数据传输的安全性的 一文看懂https如何保证数据传输的安全性的 大家都知道,在客户端与服务器数据传输的过程中,http协议的传输是不安全的,也就是一般情况下http是明 ...
- [转帖]一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系
一文看懂web服务器.应用服务器.web容器.反向代理服务器区别与联系 https://www.cnblogs.com/vipyoumay/p/7455431.html 我们知道,不同肤色的人外貌差别 ...
- [转帖] 一文看懂:"边缘计算"究竟是什么?为何潜力无限?
一文看懂:"边缘计算"究竟是什么?为何潜力无限? 转载cnbeta 云计算 雾计算 边缘计算... 知名创投调研机构CB Insights撰文详述了边缘计算的发展和应用前景 ...
- 一文看懂Stacking!(含Python代码)
一文看懂Stacking!(含Python代码) https://mp.weixin.qq.com/s/faQNTGgBZdZyyZscdhjwUQ
- Nature 为引,一文看懂个体化肿瘤疫苗前世今生
进入2017年,当红辣子鸡PD-1疗法,一路横扫多个适应症.而CAR-T治疗的“小车”在获得FDA专委会推荐后也已经走上高速路,成为免疫治疗又一里程碑事件.PD-1.CAR-T之后,下一个免疫治疗产品 ...
- 一文看懂大数据的技术生态圈,Hadoop,hive,spark都有了
一文看懂大数据的技术生态圈,Hadoop,hive,spark都有了 转载: 大数据本身是个很宽泛的概念,Hadoop生态圈(或者泛生态圈)基本上都是为了处理超过单机尺度的数据处理而诞生的.你可以把它 ...
- 转载来自朱小厮博客的 一文看懂Kafka消息格式的演变
转载来自朱小厮博客的 一文看懂Kafka消息格式的演变 ✎摘要 对于一个成熟的消息中间件而言,消息格式不仅关系到功能维度的扩展,还牵涉到性能维度的优化.随着Kafka的迅猛发展,其消息格式也在 ...
- 【转帖】一文看懂docker容器技术架构及其中的各个模块
一文看懂docker容器技术架构及其中的各个模块 原创 波波说运维 2019-09-29 00:01:00 https://www.toutiao.com/a6740234030798602763/ ...
随机推荐
- Java编程思想:一个小小的控制框架
这个实验我很喜欢,学到了非常多的东西: import java.util.ArrayList; import java.util.List; public class Test { public st ...
- restTemplate重定向问题 &cookie问题
最近在做一个转发功能,zuul + ribbon + resttemplate 进行路由.负载.转发的功能 基本准备就绪,在微信自动登陆那遇到了一个坑,ribbon 系统用resttemplate 转 ...
- 你真的了解 Cookie 和 Session 吗
我在做面试官的时候,曾经问过很多朋友这个问题: Cookie 和 Session 有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是 Cookie?什么是 Session?两者的区别等. ...
- PHP与ECMAScript_5_常用数组相关函数
PHP ECMAScript 长度 $length = count($array) length = array.length 增 array_unshift($array, new1,n ...
- TCP传输协议如何进行拥塞控制?
拥塞控制 拥塞现象是指到达通信子网中某一部分的分组数量过多,使得该部分网络来不及处理,以致引起这部分乃至整个网络性能下降的现象,严重时甚至会导致网络通信业务陷入停顿,即出现死锁现象.这种现象跟公路网中 ...
- Django安装 测试、导入项目以及运行开发服务器
安装Django 下载Django包,解压缩. CMD 进入解压路径下. 执行:python setup.py install 增加环境变量: C:\Python27\Scripts 测试djang ...
- 【iOS】UIAlertController 弹出框
UIAlertView 虽然还能用,但已经废弃了.因此以后尽量用 UIAlertController.示例代码如下: UIAlertController *alert = [UIAlertContro ...
- 编写自定义 .NET Core 主机以从本机代码控制 .NET 运行时
自定义 .Net Core 主机运行.Net Core代码,以及控制运行时运行状态,是在.Net Core 高级运行环境以及定制.Net Host ,CLR 等必不可少的. 这些设置包括为 1 ...
- 【Vue前端】Vue前端注册业务实现!!!【代码】
用户注册前端逻辑 1. Vue绑定注册界面准备 1.导入Vue.js库和ajax请求的库 <script type="text/javascript" src="{ ...
- 关于HostnameVerifier接口的解读
在项目中我们需要调用https接口请求.我们使用httpClient,构建HttpClient对象时涉及到使用HostnameVerifier接口实例. HostnameVerifier接口定义如下: ...