ConstraintLayout基本使用
Relative positioning
約束 ：view 在垂直方向 吝镣，或在水平方向趴腋，相對(duì)于其他view 的關(guān)系(相互的)
相關(guān)屬性
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
示例 ：
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
Centering and Margins
Margins(偏移)
在有約束的情況下才能有效果
效果：
示例 ：
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="@+id/test1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toRightOf="@+id/test"
android:layout_marginStart="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
margin with gone
當(dāng)與之相關(guān)聯(lián)的view狀態(tài)為GONE時(shí)如果需要可以使用一下屬性設(shè)置margin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
效果 ：
居中
<Button android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
垂直居中類似
偏移占比 (Bias)
調(diào)整view 位置蔓彩，不僅可以使用居中省核，margin 等，還可以使用百分比：
layout_constraintHorizontal_bias
layout_constraintVertical_bias
上面兩個(gè)屬性取值范圍 [0,1] 0 : 最左 或 最上 包晰， 1：最右 或 最下
偷個(gè)例子：
<Button android:id="@+id/button" ...
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
Chains
Creating a chain
<View
android:id="@+id/test"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/test1"
app:layout_constraintBottom_toBottomOf="parent"/>
<View
android:id="@+id/test1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@android:color/holo_blue_light"
app:layout_constraintLeft_toRightOf="@+id/test"
android:layout_marginStart="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
類似效果：
Chain Style
在鏈的第一個(gè)元素上設(shè)置屬性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle時(shí)尝艘，鏈的行為將根據(jù)指定的樣式更改（默認(rèn)為spread）
spread : 所有元素分布開
packed ：所有元素在一起
spread_inside : （同spread ）首尾元素除外
Chain heads
Chain heads 指chain中水平最左演侯，垂直最上的view
Chain margin
上面可以看出，chain 中的左中右的間距都是相同的（平分剩下的空間）背亥，當(dāng)chain 中的view 設(shè)置margin 的時(shí)候會(huì)把除去margin 后剩余空間平分分配 秒际。
效果：
weightd chain
鏈的默認(rèn)行為是在可用空間中平均分布元素。如果一個(gè)或多個(gè)元素使用MATCH_CONSTRAINT狡汉，它們將使用可用的空白空間（在它們之間平均分配）娄徊。layout_constraintHorizontal_weight和layout_constraintVertical_weight屬性將控制如何使用MATCH_CONSTRAINT在元素之間分配空間。例如盾戴，在使用MATCH_CONSTRAINT的包含兩個(gè)元素的鏈上寄锐，第一個(gè)元素使用權(quán)重2，第二個(gè)元素使用權(quán)重1尖啡，第一個(gè)元素占用的空間將是第二個(gè)元素占用的空間的兩倍橄仆。
例如
<View
android:id="@+id/button1"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button2"
app:layout_constraintLeft_toLeftOf="parent"
android:background="@color/colorPrimary"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintRight_toRightOf="parent"
android:layout_height="100dp"/>
<View
android:id="@+id/button2"
android:layout_width="0dp"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintTop_toTopOf="parent"
android:background="@color/colorAccent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_height="100dp"/>
Circular positioning (Added in 1.1)
您可以以角度和距離約束控件中心相對(duì)于另一個(gè)控件的中心。這使你可以將控件放在圓上衅斩。
可以使用以下屬性：
layout_constraintCircle : 另一個(gè)控件的ID
layout_constraintCircleRadius : 相對(duì)另一控件中心的距離
layout_constraintCircleAngle : 位于另一控件的角度位置
示例
<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
app:layout_constraintCircle="@+id/buttonA"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
Note: 0度角為正上方盆顾，向右為增大方向，如果設(shè)置為負(fù)數(shù) （-90 會(huì)按照絕對(duì)值來計(jì)算）
Dimensions constraints（尺寸限制）
ConstraintLayout 自身的尺寸約束
最大最小寬高設(shè)置
android:minWidth
android:minHeight
android:maxWidth
android:maxHeight
設(shè)置方式類似其他布局 只有在其尺寸設(shè)置為WRAP_CONTENT作用
控件的尺寸約束
固定尺寸 （123dp）
- WRAP_CONTENT
- 0dp(MATCH_CONSTRAINT) 相當(dāng)于MATCH_PARENT
**Note **：不建議對(duì)ConstraintLayout中包含的小部件使用MATCH_PARENT畏梆∧埽可以通過使用MATCH_CONSTRAINT來定義類似的行為奈懒，其中相應(yīng)的左/右或上/下約束被設(shè)置為"parent"。 ** (即 ：約束邊作為其大小) **
WRAP_CONTENT
enforcing constraints（強(qiáng)制約束）
一般情況下使用WRAP_CONTENT 宪巨，表示在可用剩余空間下任意大小
如果想要在使用WRAP_CONTENT的時(shí)候限制一個(gè)大小范圍使用一下方式：
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
再配合最大最小的最大最小寬度去設(shè)置：
layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
MATCH_CONSTRAINT
Percent dimension（百分比尺寸設(shè)置）
要使用百分比磷杏，您需要設(shè)置以下內(nèi)容：
- 尺寸應(yīng)設(shè)置為MATCH_CONSTRAINT（0dp）
- 默認(rèn)值應(yīng)設(shè)置為app app：layout_constraintWidth_default =“percent”或app：layout_constraintHeight_default =“percent”
- 然后將layout_constraintWidth_percent或layout_constraintHeight_percent屬性設(shè)置為0到1之間的值
比率 Ratio
可以將控件的一個(gè)維度定義為另一個(gè)維度的比率。
需要將至少一個(gè)約束維度設(shè)置為0dp（即MATCH_CONSTRAINT）揖铜，并將屬性layout_constraintDimensionRatio設(shè)置為給定比率茴丰。
例如 ：
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
另一種表示方式：
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="0.5f" />
浮點(diǎn)值达皿，表示寬度和高度之間的比率
如果兩個(gè)尺寸都設(shè)置為MATCH_CONSTRAINT（0dp）天吓，也可以使用比率。
在這種情況下峦椰，系統(tǒng)設(shè)置最大尺寸以滿足所有約束并保持指定的縱橫比龄寞。要根據(jù)另一個(gè)的尺寸約束一個(gè)特定邊，可以預(yù)先附加W汤功，“或H物邑，分別約束寬度或高度。
例如滔金，如果一個(gè)維度受兩個(gè)目標(biāo)約束（例如色解，寬度為0dp并且以父對(duì)象為中心）你可以通過在比率前添加字母W（用于約束寬度）或H（用于約束高度）來指示哪一邊應(yīng)該被約束，用逗號(hào)分隔：
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Virtual Helper objects
GuildeLine
作用：輔助布局
設(shè)置guildeLine 方向
**通過 orientation的屬性設(shè)置水平或者垂直 **
水平guildeLine 高度為0 寬度為parent
垂直guildeLine 寬度為0 高度為 parent
eg:
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="horizontal"/>
確定guildeLine 位置
三種方式：
- layout_constraintGuide_begin
- layout_constraintGuide_end
- layout_constraintGuide_percent [0,1]
Barrier
屏障
使用場(chǎng)景
Placeholder
顧名思義：就是占位圖
使用示例
<android.support.constraint.Placeholder
android:id="@+id/imageHolder"
android:layout_width="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="100dp"/>
<ImageView
android:id="@+id/image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="100dp"
android:src="@mipmap/ic_launcher"
android:layout_height="100dp"/>
image.setOnClickListener {
imageHolder.setContentId(R.id.image)
}
Group
作用：主要用來控制一組控件的可見性餐茵。
示例
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="@+id/buttonA"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:text="buttonA"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/buttonB"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="wrap_content"
android:text="buttonB"
android:layout_height="wrap_content"/>
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="buttonA,buttonB"/>
</android.support.constraint.ConstraintLayout>
Group 的可見性對(duì)應(yīng)著與其關(guān)聯(lián)的幾個(gè)控件科阎，方便的顯示隱藏多個(gè)控件。
注意：ConstraintLayout可用作支持庫忿族，可以在API級(jí)別9（Gingerbread）的Android系統(tǒng)上使用
