什么是ConstraintLayout
你可以使用ConstraintLayout構(gòu)建一個(gè)非常大且復(fù)雜的視圖，而這些視圖都是ConstraintLayout的直接子視圖（不需要通過內(nèi)嵌ViewGroup來實(shí)現(xiàn)）蜗顽。它有點(diǎn)像RelativeLayout您朽，通過互相之間或者和RelativeLayout的依賴關(guān)系來展示吉懊。但是ConstraintLayout比之更靈活刽脖，且更容易在Android Studio 視圖編輯器使用腕窥，你可以在視圖編輯器中直接拖拽控件來完成整個(gè)布局。
使用須知
使用ConstraintLayout需要滿足兩個(gè)條件
- Android 2.3 或者以上
- Android Studio 2.3 或者以上
添加依賴炫狱，在需要使用ConstraintLayout的module下面添加兩段
repositories {
maven {
url 'https://maven.google.com'
}
}
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.2' //這里的可能不是最新版本
}
如何開始ConstraintLayout
在舊布局中使用
](http://upload-images.jianshu.io/upload_images/5873376-5f53060ee56745b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
把LinearLayout轉(zhuǎn)換成constraintlayout后藻懒，基本上還是會(huì)保持之前的布局展示，但是不排除出現(xiàn)意外情況视译。
上面是轉(zhuǎn)換之前的Linearlayout
上面是轉(zhuǎn)換之后的ConstraintLayout,我們可以發(fā)現(xiàn)嬉荆，布局的展示保持了一致
直接從ConstraintLayout開始布局
Project窗口，New > XML > Layout XML,然后選中android.support.constraint.ConstraintLayout作為Root Tag.下面是代碼
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>
開發(fā)導(dǎo)讀
相對位置
你可以布局一個(gè)新widget相對于另外一個(gè)存在的widget.這種相對關(guān)系包括x軸和y軸
- x軸：Left, Right, start, end
- y軸: top, bottom, text baseline
下面各種圖形象描述上面的文字
可用的相對關(guān)系列表：
- layout_constraintLeft_toLeftOf： 當(dāng)前widget的left對齊另外一個(gè)widget的left
- layout_constraintLeft_toRightOf ：當(dāng)前widget的left對齊另外一個(gè)widget的right
- layout_constraintRight_toLeftOf：** 當(dāng)前widget的right對齊另外一個(gè)widget的left**
- layout_constraintRight_toRightOf：** 當(dāng)前widget的right對齊另外一個(gè)widget的right**
- layout_constraintTop_toTopOf ：當(dāng)前widget的top對齊另外一個(gè)widget的top
- layout_constraintTop_toBottomOf：** 當(dāng)前widget的top對齊另外一個(gè)widget的bottom**
- layout_constraintBottom_toTopOf：** 當(dāng)前widget的bottom對齊另外一個(gè)widget的top**
- layout_constraintBottom_toBottomOf ：當(dāng)前widget的bottom對齊另外一個(gè)widget的bottom
- layout_constraintBaseline_toBaselineOf ：**當(dāng)前widget的baseline對齊另外一個(gè)widget的baseline, 使用與帶文字的widget
- layout_constraintStart_toEndOf ：當(dāng)前widget的start對齊另外一個(gè)widget的end
- layout_constraintStart_toStartOf ：當(dāng)前widget的start對齊另外一個(gè)widget的start
- layout_constraintEnd_toStartOf ：當(dāng)前widget的end對齊另外一個(gè)widget的start
- layout_constraintEnd_toEndOf ：當(dāng)前widget的end對齊另外一個(gè)widget的end
上面B的Left對齊A的right,使用的 layout_constraintLeft_toRightOf
Margins
ConstraintLayout里可以使用marign(邊距),查看源碼憎亚，我們會(huì)發(fā)現(xiàn)ConstraintLayout的LayoutParams繼承于MarginLayoutParams
public static class LayoutParams extends MarginLayoutParams {
.
}
和其他的layout一樣员寇，constraintlayout也可以使用如下幾種margin
- android:layout_marginStart
- android:layout_marginEnd
- android:layout_marginLeft
- android:layout_marginTop
- android:layout_marginRight
- android:layout_marginBottom
比較特殊的是ConstraintLayout可以處理相對于gone widget的margin,和上面的對應(yīng)關(guān)系一樣
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
我們用視圖來對比一下
A顯示的時(shí)候
A設(shè)置為GONE的時(shí)候
我們可以明顯的發(fā)現(xiàn)，A設(shè)置GONE的時(shí)候第美，B的左邊距明顯和之前的相對于A的左邊距不一樣蝶锋，這是因?yàn)槲以贐設(shè)置了如下屬性
android:layout_marginStart="8dp"
app:layout_goneMarginStart="28dp"
A設(shè)置GONE的時(shí)候，app:layout_goneMarginStart="28dp"起作用什往，所以我們上面看到的左邊距顯示的是28dp
居中位置和偏向位置
如何實(shí)現(xiàn)居中布局,如下圖
代碼是如何實(shí)現(xiàn)的：
<Button
android:id="@+id/button39"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"/>
偏向位置
包括兩種
- layout_constraintHorizontal_bias 水平方向的偏向
- layout_constraintVertical_bias 垂直方向的偏向
layout_constraintHorizontal_bias會(huì)作用于widget的left和right的位置
layout_constraintVertical_bias會(huì)作用于widget的top和bottom的位置
使用效果圖來說明下
對應(yīng)的xml布局
.
app:layout_constraintVertical_bias="0.3"
.
尺寸限定
- android:minWidth 設(shè)置widget的最小寬度
- android:maxWidth 設(shè)置widget的最大寬度
- android:minHeight 設(shè)置widget的最小高度
- android:maxHeight 設(shè)置widget的最大高度
- 特定的尺寸扳缕，如:123dp
- WRAP_CONTENT
- 0dp ，等于
MATCH_CONSTRAINT
通過下圖來分析WRAP_CONTENT和MATCH_CONSTRAINT
- a:
WRAP_CONTENT - b:
MATCH_CONSTRAINT - c:
MATCH_CONSTRAINT,margin="8dp"
Ratio比例
可以app:layout_constraintDimensionRatio通過設(shè)置widget的寬和高的比例,必須滿足layout_width和layout_height至少一個(gè)設(shè)置為0dp(MATCH_CONSTRAINT)
<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"/>
視圖模式對應(yīng)：
分析:
- W 限定寬度
- H 限定高度
- 16:9 對應(yīng) -> 寬度：高度
相對鏈
如上：我們創(chuàng)建了一個(gè)相對鏈,A和B會(huì)互相依賴于對方的相對位置
A 是"head of Chain", 它會(huì)控制整個(gè)相對鏈别威，也就是說B,C的位置都是通過A來調(diào)整的躯舔。
相對鏈中的邊距
在下面中會(huì)提到的spread chains,邊距會(huì)分配的space中自動(dòng)扣除
相對鏈的style(樣式)
如上圖所示：我們可以通過修改相對鏈的style來實(shí)現(xiàn)不同的布局方式，還是很強(qiáng)大的省古。
相對鏈中的權(quán)重(weight)
在ConstraintLayout粥庄，我們也可以像LinearLayout一樣使用權(quán)重來布局,
layout_constraintHorizontal_weight和layout_constraintVertical_weight會(huì)對使用了MATCH_CONSTRAINT的widget起作用
-
layout_constraintHorizontal_weight水平方向的相對鏈中的權(quán)重 -
layout_constraintVertical_weight垂直方向中的相對鏈中的權(quán)重
Guideline
Guideline是幫助來調(diào)整布局的，它本身不會(huì)在視圖中顯示出來豺妓。
上面視圖對應(yīng)的xml布局
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
....
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85"
/>
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline4"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline5"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50097847" />
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline6"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
</android.support.constraint.ConstraintLayout>
Guideline可以使用的屬性
-
android:orientation設(shè)置guideline的方向,horizontal代表水平方向（從左到右）惜互，vertical代表垂直方向（從上到下） -
app:layout_constraintGuide_percent，guideline所在的百分比位置 -
app:layout_constraintGuide_begin,guideline所在位置和起始邊界的距離 -
app:layout_constraintGuide_end,guideline所在位置和截止邊界的距離
NOTE：當(dāng)app:layout_constraintGuide_percent和app:layout_constraintGuide_begin（app:layout_constraintGuide_end）都設(shè)置的時(shí)候琳拭，app:layout_constraintGuide_percent優(yōu)先
總結(jié)
使用ConstraintLayout可以有效的減小layout的層級深度, android-ConstraintLayoutExamples是google官方提供的關(guān)于demo
感謝
