约束布局ConstraintLayout

  这种布局方式出现已经有一段时间了,刚出现的时候一直以为这种布局只是针对拖拽使用的布局,最近在新项目里看到了这种布局,又重新学习了这种布局,才发现以前真的是图样图森破啊,这种新的布局方式真的太好用了!

1.引入

使用之前需要添加这种布局的依赖

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

2.使用

2.1基本布局方式:

  • 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_constraintLeft_toLeftOf="parent"  //大概意思就是这个控件的左边跟父控件的左边对齐

layout_constraintRight_toLeftOf="xxx"  //该控件的右边跟xxx的左边对齐

就像这里栗子说的一样,用这些约束方式就可以约束一个控件的具体位置

这里大家发现这种布局方式跟RelativeLayout是很相似的

2.2 圆形定位

layout_constraintCircle :引用另一个小部件ID
layout_constraintCircleRadius :到其他小部件中心的距离
layout_constraintCircleAngle :小部件应该在哪个角度(度数,从0到360)

2.3 width设置为0的用法:

当设置width为0 的时候可以使该控件填充剩余空间,

那么我们想使用LL的权重特性该怎么办呢?ConstraintLayout同样也是支持的

layout_constraintHorizontal_weight="1"

约束布局里也提供了权重的方法约束宽度,在使用上一定要注意使用权重的控件一定要约束完整,注意:相互约束的控件有Visible差异并不影响约束的完整,使用权重的控件width一定要设置为0

 <Button
android:id="@+id/btn_01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="01"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/btn_02"
app:layout_constraintTop_toBottomOf="@id/textView" /> <Button
android:id="@+id/btn_02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="02"
android:visibility="gone"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/btn_01"
app:layout_constraintRight_toLeftOf="@id/btn_03"
app:layout_constraintTop_toBottomOf="@id/textView" /> <Button
android:id="@+id/btn_03"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="03"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@id/btn_02"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/textView" />

这里发现这种布局方式跟LinearLayout是有相似的地方

这里就是这种布局方式的优势所在了

2.4 DimensionRatio比例属性

app:layout_constraintDimensionRatio="W,16:9"
app:layout_constraintDimensionRatio="H,16:9"

这个功能就很牛逼了,过去我们想要指定控件的宽高比例只能在代码中指定宽高,在约束布局中直接使用“尺寸比例”的参数可以直接设置比例

2.5 bias偏移属性

app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintVertical_bias="0.9"
    <TextView
android:id="@+id/textView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/theme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9" />

这个属性在合理约束的时候可以使控件实现偏移,中间为0.5,取值范围为[0,1]

2.6 比例布局

app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.8"

在宽高设置为0的时候可以使用这两个属性直接设置控件的百分比

2.7 总结:

//基本定位
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_constraintCircle :引用另一个小部件ID
layout_constraintCircleRadius :到其他小部件中心的距离
layout_constraintCircleAngle :小部件应该在哪个角度(度数,从0到360)

layout_constraintBaseline_toBaselineOf

# 与left,right类似
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

# margin不需要解释
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

#当2个view有相对位置的依赖关系,当其中一个view设置1位gone时,这个比较有意思,比方说假设A设置为gone,后,B需要距离父布局的左侧200dp,
怎么办?这时候,goneMargin属性就派上用场啦,只要设置B的layout_goneMarginLeft=200dp即可。这样,A不为gone的时候,
B距离A 为android:layout_marginLeft ,A为gone时,B距离父布局左侧layout_goneMarginLeft200dp。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

layout_constraintHorizontal_bias
layout_constraintVertical_bias

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

layout_constraintVertical_weight

app:layout_constraintHeight_percent
app:layout_constraintWidth_percent

android:minWidth 设置布局的最小宽度
android:minHeight 设置布局的最小高度
android:maxWidth 设置布局的最大宽度
android:maxHeight 设置布局的最大高度

 

可以看出ConstraintLayout 是很全面的一种布局,集合了相对布局,线性布局的特点,同时能使用偏移和百分比的特性,所以省去了嵌套的麻烦,是布局达到了扁平化,省下了很多资源

by Jungle轶

ConstraintLayout 约束布局的更多相关文章

  1. 使用ConstraintLayout(约束布局)构建响应式UI

    使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html     核心提示:ConstraintLa ...

  2. Android Material Design控件使用(一)——ConstraintLayout 约束布局

    参考文章: 约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇 介绍 Android ConstraintLayout是谷歌推出替代PrecentLa ...

  3. Android 开发 CoordinatorLayout 协调者布局 与 ConstraintLayout约束布局 两者的关系

    在摸索新技术是发现CoordinatorLayout 与 ConstraintLayout 会有冲突关系,所以就研究了一下他们之间的不兼容,被影响的方面.其实某种程度上来说是CoordinatorLa ...

  4. Android ConstraintLayout 约束布局属性

    常用方法总结 layout_constraintTop_toTopOf // 将所需视图的顶部与另一个视图的顶部对齐. layout_constraintTop_toBottomOf // 将所需视图 ...

  5. 约束布局ConstraintLayout详解

    约束布局ConstraintLayout详解 转 https://www.jianshu.com/p/17ec9bd6ca8a 目录 1.介绍 2.为什么要用ConstraintLayout 3.如何 ...

  6. 约束布局constraint-layout导入失败的解决方案 - 转

    今天有同事用到了约束布局,但是导入我的工程出现错误 **提示错误: Could not find com.Android.support.constraint:constraint-layout:1. ...

  7. 约束布局ConstraintLayout

    Android新特性介绍,ConstraintLayout完全解析 约束布局ConstraintLayout用法全解析 约束布局ConstraintLayout看这一篇就够了

  8. 约束布局ConstraintLayout加快布局速度

    Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...

  9. Android开发之ConstraintLayout相对布局

    介绍 一个 ConstraintLayout 是一个 ViewGroup 允许您以灵活的方式定位和调整小部件的方法. 注意: ConstraintLayout 作为支持库提供,您可以在API级别9(G ...

随机推荐

  1. 算法图解之大O表示法

    什么是大O表示法 大O表示法可以告诉我们算法的快慢. 大O比较的是操作数,它指出了算法运行时间的增速. O(n) 括号里的是操作数. 举例 画一个16个格子的网格,下面分别列举几种不同的画法,并用大O ...

  2. unity安装记录

    官网直接下载(http://unity3d.com/cn/) 下载完后,会要求输入账号密码.我是先在官网进行一个账号注册,然后登陆即可. 首先会要你输入一个已有的邮箱,进行认证.进入自己邮箱,点击链接 ...

  3. GIt-恢复进度

    继续暂存区未完成的实践 经过了前面的实践,现在DEMO版本库应该处于master分支上,看看是不是这样. $ cd /path/to/my/workspace/demo $ git status -s ...

  4. greenplum-时间处理

    工作中遇到,需要改变两周以前的数据状态,于是查了下资料,原来数据库直接就可以处理,所以分享给大家! 在PostgreSQL中可以直接对时间进行加减运算:. SELECT now()::timestam ...

  5. FreeMarker的<#if></#if>标签

    <#if target??> xxxx </#if> 上面这段代码判断target??是否为null,如果不为null时才可以执行if里面的内容,为null时则不进到 if里面 ...

  6. Tomcat之web.xml中的<url-pattern>标签

    关于web.xml配置中的<url-pattern> 标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标 ...

  7. 4、CSS基础part-2

    1.background-1 ①设置background-image ②设置background-attachment为fixed 可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影 ...

  8. Marketing learning-3

    Part five brand mantra: the elevator speed 1.mental map:Portrays brand associations and responses fo ...

  9. IOS开发学习笔记014-ARC机制

    ARC 1.ARC机制 2.ARC 判断准则 3.注意事项 4.ARC和非ARC混合使用 ARC机制 ARC 是编译器特性,而不是 iOS 运行时特性,它也不是类似于其它语言中的垃圾收集器.因此 AR ...

  10. SQL SERVER存储引擎——04.数据

    4. SQL SERVER存储引擎之数据篇 (4.1)文件 (0)主数据文件.mdf初始文件大小至少为3MB,次要数据文件.ndf初始大小,同日志文件一样至少为512KB: (1)SQL SERVER ...