一、准备工作

  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知识记录的更多相关文章

  1. C#基础知识记录一

    C#基础知识记录一 static void Main(string[] args) { #region 合并运算符的使用(合并运算符??) 更多运算符请参考:https://msdn.microsof ...

  2. DataBase MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  3. MongoDB基础知识记录

    MongoDB基础知识记录 一.概念: 讲mongdb就必须提一下nosql,因为mongdb是nosql的代表作: NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型 ...

  4. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  5. 关于Excel做表小知识记录

    关于Excel做表小知识记录 最近使用Excel做了一系列的报表,觉得这是个很神奇的东西哈哈哈,以前我可是一想到Excel就开始头疼的人...  能用代码或者SQL语句解决的问题绝不会愿意留在Exce ...

  6. Maven知识记录(一)初识Maven私服

    Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...

  7. Linux文件系统知识记录——ext2描述

    最近完成了一个编程作业,大致功能是给定一个文件名,给出该文件所在目录和其本身所占用的簇号等信息.笔者选用了Linux的ext系列文件系统作为实验对象,通过实验对ext2文件系统的存储和索引有了一个较为 ...

  8. 零散知识记录-一个MQ问题

    [背景]我有一项零散工作:维护大部门的一台测试公用MQ服务器.当大部分MQ被建立起来,编写了维护手册,大家都按照规程来后,就基本上没有再动过它了.周五有同学跟我反映登录不进去了,周日花了1个小时来解决 ...

  9. Java实用知识记录 —— 截止到Java8

    记录Java实用知识点,截止(包括)到Java8,只作概要的描述,不涉及到具体细节.变量:int.long的包装类支持无符号位操作,即其在内存中的位可以用来全部表示正数."_"可以 ...

随机推荐

  1. JQuery插件开发标准写法

    ;//step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevT ...

  2. linux 磁盘管理三部曲——(2)管理分区,文件系统类型格式化

    上篇小编给大家讲解了磁盘结构和分区的介绍,这篇小编就给大家演示如何管理分区和文件系统类型格式化. 小编上篇已经提到如何使用磁盘,今天这两步,就是其中很重要的两步.(前几天写的有点急,有点乱,今天又整理 ...

  3. es6+require混合开发,兼容es6 module,import,export之 加载css及公用date-main

    大家好!上篇文章已经介绍了搭建文件夹,以及加载js文件.现在讲一下加载css ,以及对baseUrl的理解 1.对项目结构的认知 一个项目的结构是根据项目的架构来决定的,当然也可以做到更智能,但是意义 ...

  4. 关于scrapy的piplines

    1.进入setting中把ITEM_piplines文件注销去掉 2.在piplines中写好代码 # -*- coding: utf- -*- # Define your item pipeline ...

  5. [UWP]了解模板化控件(6):使用附加属性

    1. 基本需求 之前的ContentView2添加了PointerOver等效果,和TextBox等本来就有Header的控件放在一起反而变得鹤立鸡群. 为了解决这个问题,这次把ContentView ...

  6. SPCircleView的使用(圆心向四周扩散动画)

    今天封装了一个动画,想着以后可能会用,就封装了一下.欢迎下载 https://github.com/USimpleLife/SPCircleView 参数说明 @param centerPoint 中 ...

  7. springboot学习(三)————使用HttpMessageConverter进行http序列化和反序列化

    以下内容,如有问题,烦请指出,谢谢! 对象的序列化/反序列化大家应该都比较熟悉:序列化就是将object转化为可以传输的二进制,反序列化就是将二进制转化为程序内部的对象.序列化/反序列化主要体现在程序 ...

  8. bzoj 4569: [Scoi2016]萌萌哒

    Description 一个长度为n的大数,用S1S2S3...Sn表示,其中Si表示数的第i位,S1是数的最高位,告诉你一些限制条件,每个条 件表示为四个数,l1,r1,l2,r2,即两个长度相同的 ...

  9. MVC 框架

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  10. CAS在Java类中的应用

    CAS 这个指令全称 compare and swap 即比较替换指令,在现代处理器新加入的指令.指导思想:基于乐观锁机制.比较一个变量在内存值中的值和变量的当前值(旧值).如果相等,则认为该变量没有 ...