ConstraintLayout使用详解

ConstraintLayout基本使用

Relative positioning

约束 ：view 在垂直方向 ，或在水平方向，相对于其他view 的关系(相互的)

在这里插入图片描述

相关属性

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_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

示例 ：

Centering and Margins

Margins(偏移)

在有约束的情况下才能有效果
效果：

在这里插入图片描述

示例 ：

margin with gone

当与之相关联的view状态为GONE时如果需要可以使用一下属性设置margin

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

效果 ：

在这里插入图片描述

居中

 
  
 
   
  
   
 
  
 
  

    在这里插入图片描述 
  
 
 

垂直居中类似

偏移占比 (Bias)

调整view 位置，不仅可以使用居中，margin 等，还可以使用百分比：

layout_constraintHorizontal_bias  
layout_constraintVertical_bias

上面两个属性取值范围 [0,1] 0 : 最左 或 最上 ， 1：最右 或 最下

偷个例子：

  
  
 
   
  
   
 
  
 
  

    在这里插入图片描述 
  
 
 

Chains

Creating a chain

类似效果：

在这里插入图片描述

Chain Style

在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式更改（默认为spread）
spread : 所有元素分布开
packed ：所有元素在一起
spread_inside : （同spread ）首尾元素除外

在这里插入图片描述

Chain heads

Chain heads 指chain中水平最左，垂直最上的view

Chain margin

上面可以看出，chain 中的左中右的间距都是相同的（平分剩下的空间），当chain 中的view 设置margin 的时候会把除去margin 后剩余空间平分分配 。
效果：

在这里插入图片描述

weightd chain

链的默认行为是在可用空间中平均分布元素。如果一个或多个元素使用MATCH_CONSTRAINT，它们将使用可用的空白空间（在它们之间平均分配）。layout_constraintHorizontal_weight和layout_constraintVertical_weight属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在使用MATCH_CONSTRAINT的包含两个元素的链上，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。

例如

Circular positioning (Added in 1.1)

您可以以角度和距离约束控件中心相对于另一个控件的中心。这使你可以将控件放在圆上。
可以使用以下属性：

layout_constraintCircle : 另一个控件的ID  
layout_constraintCircleRadius : 相对另一控件中心的距离
layout_constraintCircleAngle : 位于另一控件的角度位置 

示例

在这里插入图片描述

Note: 0度角为正上方，向右为增大方向，如果设置为负数 （-90 会按照绝对值来计算）

Dimensions constraints（尺寸限制）

ConstraintLayout 自身的尺寸约束

最大最小宽高设置

android:minWidth 
android:minHeight 
android:maxWidth 
android:maxHeight  

设置方式类似其他布局 只有在其尺寸设置为WRAP_CONTENT作用

控件的尺寸约束

固定尺寸 （123dp）

• WRAP_CONTENT
• 0dp(MATCH_CONSTRAINT) 相当于MATCH_PARENT

**Note **：不建议对ConstraintLayout中包含的小部件使用MATCH_PARENT。可以通过使用MATCH_CONSTRAINT来定义类似的行为，其中相应的左/右或上/下约束被设置为"parent"。 ** (即 ：约束边作为其大小) **

WRAP_CONTENT

enforcing constraints（强制约束）

一般情况下使用WRAP_CONTENT ，表示在可用剩余空间下任意大小
如果想要在使用WRAP_CONTENT的时候限制一个大小范围使用一下方式：

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

再配合最大最小的最大最小宽度去设置：

layout_constraintWidth_min 
layout_constraintHeight_min  
layout_constraintWidth_max
layout_constraintHeight_max

MATCH_CONSTRAINT

Percent dimension（百分比尺寸设置）

要使用百分比，您需要设置以下内容：

• 尺寸应设置为MATCH_CONSTRAINT（0dp）
• 默认值应设置为app app：layout_constraintWidth_default =“percent”或app：layout_constraintHeight_default =“percent”
• 然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值

比率 Ratio

可以将控件的一个维度定义为另一个维度的比率。
需要将至少一个约束维度设置为0dp（即MATCH_CONSTRAINT），并将属性layout_constraintDimensionRatio设置为给定比率。
例如 ：

另一种表示方式：

浮点值，表示宽度和高度之间的比率

如果两个尺寸都设置为MATCH_CONSTRAINT（0dp），也可以使用比率。
在这种情况下，系统设置最大尺寸以满足所有约束并保持指定的纵横比。要根据另一个的尺寸约束一个特定边，可以预先附加W，“或H，分别约束宽度或高度。

例如，如果一个维度受两个目标约束（例如，宽度为0dp并且以父对象为中心）你可以通过在比率前添加字母W（用于约束宽度）或H（用于约束高度）来指示哪一边应该被约束，用逗号分隔：

Virtual Helper objects

GuildeLine

作用：辅助布局

设置guildeLine 方向

**通过 orientation的属性设置水平或者垂直 **
水平guildeLine 高度为0 宽度为parent
垂直guildeLine 宽度为0 高度为 parent
eg:

确定guildeLine 位置

三种方式：

• layout_constraintGuide_begin
• layout_constraintGuide_end
• layout_constraintGuide_percent [0,1]

Barrier

屏障

使用场景

参考博客

Placeholder

顾名思义：就是占位图

使用示例

image.setOnClickListener { 
    imageHolder.setContentId(R.id.image)
}

Group

作用：主要用来控制一组控件的可见性。

示例

Group 的可见性对应着与其关联的几个控件，方便的显示隐藏多个控件。

注意：ConstraintLayout可用作支持库，可以在API级别9（Gingerbread）的Android系统上使用