一、准备工作

  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. ASP.NET Core 使用 Hangfire 定时任务

    定时任务组件,除了 Hangfire 外,还有一个 Quarz.NET,不过 Hangfire .NET Core 支持的会更好些. ASP.NET Core 使用 Hangfire 很简单,首先,N ...

  2. RUP 方法简介

    1.什么是RUP: Rational Unified Process(以下简称RUP) 是一套软件工程方法,主要由 Ivar Jacobson的 The Objectory Approch 和 The ...

  3. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  4. docker学习笔记(一)

    docker是一种容器技术,现在火的一塌糊涂,最近公司打算用docker统一开发.测试.预上线.上线环境,所以花了时间研究一下. docker是一种容器技术,之前是基于LXC容器,现在已经改成基于li ...

  5. while,until

    while ] 注释:中括号写的条件判断式中不能用<.=.>这类符号,要用-lt.-eq.-gt这类符号,且变量前要用$来取值 do sum=$(($sum+$i)) i=$(($i+)) ...

  6. iOS 通知的变化ios9-10,新功能展示

    二.新功能展示 1  使用 /iOS通知新功能玩法 2.  全面   iOS10里的通知与推送详情 一.变化 四.Notification(通知) 自从Notification被引入之后,苹果就不断的 ...

  7. LeetCode中的最大子串和问题(Maximum Subarray)

    问题描述: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  8. Spring之AOP二

    在Spring之AOP一中使用动态代理将日志打印功能注入到目标对象中,其实这就是AOP实现的原理,不过上面只是Java的实现方式.AOP不管什么语言它的几个主要概念还是有必要了解一下的. 一.AOP概 ...

  9. java推送数据到app--极光推送

    之前项目有用到需要把数据推送到app端 采用的是极光推送 特此把工具类和pom.xml需要的jar整理如下 pom.xml需要jar如下 <!-- 极光推送 --> <depende ...

  10. ubuntu 安装 pythonenv

    This will get you going with the latest version of pyenv and make it easy to fork and contribute any ...