ConstraintLayout知识记录
一、准备工作
1. 确保SDK Tools已经下载了ContraintLayout的支持库。
2. gradle中增加对ConstraintLayout的依赖。
compile ‘com.android.support.constraint:constraint-layout:1.0.2’
3. 在使用到ConstraintLayout的xml文件头部添加标签
xmlns:app=”http://schemas.android.com/apk/res-auto”
二、RelativeLayout(RL)与ConstraintLayout(CL)属性对应部分
CL属性 |
RL属性 |
layout_constraintLeft_toLeftOf |
layout_alignLeft |
layout_constraintLeft_toRightOf |
layout_toRightOf |
layout_constraintRight_toLeftOf |
layout_toLeftOf |
layout_constraintRight_toRightOf |
layout_alignRight |
layout_constraintTop_toTopOf |
layout_alignTop |
layout_constraintTop_toBottomOf |
layout_below |
layout_constraintBottom_toTopOf |
layout_above |
layout_constraintBottom_toBottomOf |
layout_alignBottom |
layout_constraintBaseline_toBaselineOf |
layout_alignBaseline |
layout_constraintStart_toEndOf |
layout_toEndOf(API 17) |
layout_constraintStart_toStartOf |
layout_alignStart(API 17) |
layout_constraintEnd_toStartOf |
layout_toStartOf(API 17) |
layout_constraintEnd_toEndOf |
layout_alignEnd(API 17) |
相对于父布局的相对布局属性,CL的规则是:将父布局当做一个id=”parent”的对象来对待。
CL属性 |
RL属性 |
layout_constraintTop_toTopOf=”parent” |
layout_alignParentTop=”true” |
layout_constraintBottom_toBottomOf=”parent” |
layout_alignParentBottom=”true” |
layout_constraintLeft_toLeftOf=”parent” |
layout_alignParentLeft=”true” |
layout_constraintRight_toRightOf=”parent” |
layout_alignParentRight=”true” |
layout_constraintStart_toStartOf=”parent” |
layout_alignParentStart=”true” |
layout_constraintEnd_toEndOf=”parent” |
layout_alignParentEnd=”true” |
layout_constraintLeft_toLeftOf=”parent” layout_constraintRight_toRightOf=”parent” |
layout_centerHorizontal=”true” |
layout_constraintTop_toTopOf=”parent” layout_constraintBottom_toBottomOf=”parent” |
layout_centerVertical=”true” |
layout_constraintLeft_toLeftOf=”parent” layout_constraintRight_toRightOf=”parent” layout_constraintTop_toTopOf=”parent” layout_constraintBottom_toBottom=”parent” |
layout_centerInParent=”true” |
三、固定比例间距
在设置了各类属性居中属性的基础上,通过layout_constraintHorizontal_bias和layout_constraintVertical_bias两个属性,可以简单直观的完成间距比例的设置。
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"> <TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" /> </android.support.constraint.ConstraintLayout>
四、固定比例宽高
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"> <View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:background="@color/colorPrimary"
app:layout_constraintDimensionRatio="H,4:3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
Layout_width和layout_height都设置为0dp,0dp在CL布局中等同于MATCH_CONSTRANT,
MATCH_CONSTRANT是CL的一个新属性常量。在CL中,子View/ViewGroup无法使用match_parent属性。
MATCH_CONSTRAINT搭配不同的属性有不同的意义:
(1)设置layout_constraintDimensionRatio属性的情况下,代表该边长度由layout_constraintDimensionRatio动态调整;
(2)weighted chain中,代表该边长度由layout_constraintHorizontal_weight或layout_constraintVertical_weight动态调整;
(3)其他情况下,等同于match_parent,代表该边长度由各margin动态调整。
五、GoneMargin
layout_goneMarginStart, layout_goneMarginEnd, layout_goneMarginLeft, layout_goneMarginRight, layout_goneMarginTop, layout_goneMarginBottom。
layout_goneMargin系列是CL中新加入的属性。相对布局的两个空间,其中一方Visibility==Gone时,另外一方将会根据layout_goneMargin系列属性的值重新规划自己的间距。比较常用于在相对布局中保持各个控件的位置。
六、Chain
Chain是CL中新加入的控件与控件间的关系。组成chain的多个控件,可以在同一方向上更加方便的完成复杂的布局要求。
1.组成chain
多个控件组成chain需要满足以下条件:
(1)控件间的布局存在相互依赖的关系(你依赖我布局,我也依赖你布局);
(2)两个以上的空间,相互依赖关系需要保持在同一个方向上(都是水平方向上的依赖:Left_toRightOf/Right_toLeftOf;或者都是垂直方向上的依赖:Top_toBottomOf/Bottom_toTopOf);
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"> <TextView
android:id="@+id/text_a"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="50dp"
android:background="@color/colorPrimary"
app:layout_constraintRight_toLeftOf="@id/text_b" /> <TextView
android:id="@+id/text_b"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
app:layout_constraintLeft_toRightOf="@id/text_a" /> <TextView
android:id="@+id/text_c"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="50dp"
android:background="@color/colorPrimaryDark"
app:layout_constraintLeft_toRightOf="@id/text_b" />
</android.support.constraint.ConstraintLayout>
2.设置chain style
水平方向chain最左边的空间和垂直方向chain最顶端的空间被称为head chain。通过对head chain添加chainStyle属性,可以设置该条chain在水平或垂直方向上的chainStyle:
(1)layout_constraintHorizontal_chainStyle
(2)layout_constraintVertical_chainStyle
chainStyle属性一共有三种:spread、spread_inside、packed。在配合其他属性,最终可以组成5中chain style:
chain style |
设置方式 |
Spread Chain |
chainstyle=”spread” |
Spread Inside Chain |
chainStyle=”spread_inside” |
Packed Chain |
chainStyle=”packed” |
Packed Chain with Bias |
chainStyle=”packed” layout_constraintHorizontal_bias layout_constraintVertical_bias |
Weighted Chain |
chainStyle=”spread” layout_constraintHorizontal_weight layout_constraintVertical_weight layout_width=”0dp” layout_height=”0dp” |
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"> <TextView
android:id="@+id/chain_a"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="0.33"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/chain_b" /> <TextView
android:id="@+id/chain_b"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/colorAccent"
app:layout_constraintHorizontal_weight="0.33"
app:layout_constraintLeft_toRightOf="@id/chain_a"
app:layout_constraintRight_toLeftOf="@id/chain_c" /> <TextView
android:id="@+id/chain_c"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/colorPrimaryDark"
app:layout_constraintHorizontal_weight="0.33"
app:layout_constraintLeft_toRightOf="@id/chain_b"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
(1)chain head设置chainStyle为spread;
(2)chain中空间设置了layout_constraintHorizontal_weight参数;
(3)chain中空间都需要将layout_weight设置为0dp;
除此之外,Weighted Chain还有以下特征:
(1)Weighted Chain中的控件也允许在chain方向上使用wrap_content自适应控件宽/高,且布局时优先满足设置为wrap_content的控件;
(2)Weighted Chain中的控件既不设置constraint_weight,也不在chain方向上将边设置为wrap_content,那么该控件将被隐藏;
(3)如果Weighted Chain中的空间在chain方向上设置了margin,margin的距离将计算入该控件实际占有的布局范围;
代码地址:https://github.com/ZhangMiao147/UseBaseViewDemo/tree/master/constraintlayoutdemo
参考文章:https://mp.weixin.qq.com/s/X01KpEbegR47Qnl9TmUd5w
ConstraintLayout知识记录的更多相关文章
- C#基础知识记录一
C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...
- DataBase MongoDB基础知识记录
MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...
- MongoDB基础知识记录
MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
- 关于Excel做表小知识记录
关于Excel做表小知识记录 最近使用Excel做了一系列的报表,觉得这是个很神奇的东西哈哈哈,以前我可是一想到Excel就开始头疼的人... 能用代码或者SQL语句解决的问题绝不会愿意留在Exce ...
- Maven知识记录(一)初识Maven私服
Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...
- Linux文件系统知识记录——ext2描述
最近完成了一个编程作业,大致功能是给定一个文件名,给出该文件所在目录和其本身所占用的簇号等信息.笔者选用了Linux的ext系列文件系统作为实验对象,通过实验对ext2文件系统的存储和索引有了一个较为 ...
- 零散知识记录-一个MQ问题
[背景]我有一项零散工作:维护大部门的一台测试公用MQ服务器.当大部分MQ被建立起来,编写了维护手册,大家都按照规程来后,就基本上没有再动过它了.周五有同学跟我反映登录不进去了,周日花了1个小时来解决 ...
- Java实用知识记录 —— 截止到Java8
记录Java实用知识点,截止(包括)到Java8,只作概要的描述,不涉及到具体细节.变量:int.long的包装类支持无符号位操作,即其在内存中的位可以用来全部表示正数."_"可以 ...
随机推荐
- JQuery插件开发标准写法
;//step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevT ...
- linux 磁盘管理三部曲——(2)管理分区,文件系统类型格式化
上篇小编给大家讲解了磁盘结构和分区的介绍,这篇小编就给大家演示如何管理分区和文件系统类型格式化. 小编上篇已经提到如何使用磁盘,今天这两步,就是其中很重要的两步.(前几天写的有点急,有点乱,今天又整理 ...
- es6+require混合开发,兼容es6 module,import,export之 加载css及公用date-main
大家好!上篇文章已经介绍了搭建文件夹,以及加载js文件.现在讲一下加载css ,以及对baseUrl的理解 1.对项目结构的认知 一个项目的结构是根据项目的架构来决定的,当然也可以做到更智能,但是意义 ...
- 关于scrapy的piplines
1.进入setting中把ITEM_piplines文件注销去掉 2.在piplines中写好代码 # -*- coding: utf- -*- # Define your item pipeline ...
- [UWP]了解模板化控件(6):使用附加属性
1. 基本需求 之前的ContentView2添加了PointerOver等效果,和TextBox等本来就有Header的控件放在一起反而变得鹤立鸡群. 为了解决这个问题,这次把ContentView ...
- SPCircleView的使用(圆心向四周扩散动画)
今天封装了一个动画,想着以后可能会用,就封装了一下.欢迎下载 https://github.com/USimpleLife/SPCircleView 参数说明 @param centerPoint 中 ...
- springboot学习(三)————使用HttpMessageConverter进行http序列化和反序列化
以下内容,如有问题,烦请指出,谢谢! 对象的序列化/反序列化大家应该都比较熟悉:序列化就是将object转化为可以传输的二进制,反序列化就是将二进制转化为程序内部的对象.序列化/反序列化主要体现在程序 ...
- bzoj 4569: [Scoi2016]萌萌哒
Description 一个长度为n的大数,用S1S2S3...Sn表示,其中Si表示数的第i位,S1是数的最高位,告诉你一些限制条件,每个条 件表示为四个数,l1,r1,l2,r2,即两个长度相同的 ...
- MVC 框架
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...
- CAS在Java类中的应用
CAS 这个指令全称 compare and swap 即比较替换指令,在现代处理器新加入的指令.指导思想:基于乐观锁机制.比较一个变量在内存值中的值和变量的当前值(旧值).如果相等,则认为该变量没有 ...