如何阅读 xml 属性

与 Relativelayout 不同,ConstrainLayout 的属性需要同时说明需要怎么操作自己与目标控件,例如:layout_constraintLeft_toLeftOf 指自身左边缘与目标控件左边缘对齐

从此 match_parent 是故人

ConstraintLayout 里不再使用 match_parent,想要铺满屏幕,只能设置宽度为 0,并添加左右边缘与父容器的约束。(** 想要实现 match_parent的效果,切记要设置该方向大小为 0dp **)

android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

穿了马甲的 LinearLayout

线性布局的 weight 属性可以轻松实现等分操作。在 ConstraintLayout 里你也可以实现类似的功能:

app:layout_constraintHorizontal_bias=".3" //数值范围:0~1

如果控件已约束了左右边缘且定义了 bias 为 0.3,则意味着控件与左边缘的距离占控件左右边缘间距的 30%,如图:

甚至想要实现 LinearLayout 的 weight=1 等分操作(例如水平方向上等分)也很简单,每个相邻控件互为约束并设置 width=0dp 即可。这样其实就组成了链(chaining)。

想上面说到的,设置 width=0,且控件之间两两互相约束,即可实现水平方向等分。此时还可以给控件设置 layout_constraintHorizontal_weight 属性,该属性与 LinearLayout 中的 weight 类似。

链条头部的属性

水平链的最左边,垂直链的最上边称之为头部,链的头部可以设置链的属性:

app:layout_constraintHorizontal_chainStyle="spread" 

app:layout_constraintVertical_chainStyle="packed"

  • spread 默认属性,平均分布
  • spread_inside 首尾无间距
  • packed 控件间无间距,可以同时搭配 layout_constraintHorizontal_bias 属性控制与父容器的间距

各属性值的样式如下:

厉害了,还能设宽高比

app:layout_constraintDimensionRatio="1:1" //宽:高

该属性起作用的前提是宽或高至少有一个设为 0dp,设为 0dp 的边即为随比例缩放的边。

举个栗子:

 <TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"/>

该文本框在随着内容文字的增加,宽度会越来越大,一旦设定了宽高比为1,则在宽度增大时高度也会等比增大,一直保持在宽高比1:1。

宽高比还有另外的妙用,比如一个控件左右边缘已存在与父容器约束,且同时将宽高都设为 0dp,便得到水平方向上铺满屏幕的效果,如图:

指示线 Guideline

指示线不会被绘制到 UI 中,所以放心大胆地用。Guideline 的一些属性:

  <android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
app:layout_constraintGuide_percent="0.5" //设置位置比例
android:orientation="vertical"/> //不注明该属性,则默认是水平方向 app:layout_constraintGuide_begin="30dp" //设置与头部边距
app:layout_constraintGuide_end="30dp" // 设置与尾部边距

其他

  • layout_goneMarginLeft 属性,当有约束关系的控件被置为 gone 状态时,可以通过设置该属性来控制间距

动画

[译]Constraint Layout 动画 |动态 Constraint |用 Java 实现的 UI(这到底是什么)[第三部分]

ConstraintLayout 学习笔记的更多相关文章

  1. Flutter学习笔记(30)--Android原生与Flutter混编

    如需转载,请注明出处:Flutter学习笔记(30)--Android原生与Flutter混编 这篇文章旨在学习如何在现有的Android原生项目上集成Flutter,实现Android与Flutte ...

  2. Android学习笔记(一)

    目录 Android学习笔记(一) 一.JDK.Android SDK 二.部分项目结构 三.字符串引用 四.外层build.gradle详解 五.app->build.gradle详解 六.日 ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. 分布式系统唯一ID

    一 什么是分布式系统唯一ID 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识. 如在金融.电商.支付.等产品的系统中,数据日渐增长,对数据分库分表后需要有一个唯一ID来标识一条数据或消息, ...

  2. docker镜像无法删除 Error:No such image:xxxxxx

    前言 docker镜像无法删除,通过 docker images 查看镜像明明存在就是删除不了. 删除提示:Error:No such image:xxxxxxx 具体截图内容如下: 解决方法 进入目 ...

  3. 【NOIP2017提高A组模拟9.7】JZOJ 计数题

    [NOIP2017提高A组模拟9.7]JZOJ 计数题 题目 Description Input Output Sample Input 5 2 2 3 4 5 Sample Output 8 6 D ...

  4. sql中count(1)、count(*)与count(列名)的区别

    1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了!从执行计划来看,count(1)和count(*)的效果是 ...

  5. 20200506_centos7.2配置IP地址

    1. 通过ip addr命令查看网卡 2. cd到/etc/sysconfig/network-scripts/查看网卡, 一般都是第一个文件 3. 使用vi(vim)编辑它, 如果提示这个文件是只读 ...

  6. PyQt(Python+Qt)学习随笔:QTableWidget的属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.概述 除了从父类继承的属性外,在Designer中QTableWidget只有两个属性,就是行数 ...

  7. 第七章、PyQt图形界面应用程序的事件捕获方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一. 概述 PyQt的图形界面应用中,事件处理类似于Windows系统的消息处理.一个带图形界面的应 ...

  8. pytorch实战(二)hw2——预测收入是否高于50000,分类问题

    代码和ppt: https://github.com/Iallen520/lhy_DL_Hw 遇到的一些细节问题: 1. X_train文件不带后缀名csv,所以不是规范的csv文件,不能直接用pd. ...

  9. Day7 Scrum 冲刺博客

    一.站立式会议1. 会议照片 2. 工作进度+燃尽图 团队成员 昨日完成工作 今日工作计划 遇到的困难  周梓波  添加键盘监听事件 由于游戏中计分规则不合理,进行重新设计  无  纪昂学  添加方块 ...

  10. NameSilo的DDNS动态域名解析

    用Java写的,一个实时检测IP变化并更新DNS状态的工具,适用于在NameSilo购买的域名,如果你的域名是在其他商家购买的,修改为你自己的api就行.代码我放github了,地址: https:/ ...