資料鏈接:
ConstraintLayout 終極秘籍（上）
ConstraintLayout 終極秘籍（下）
一贰谣、說明
ConstraintLayout 可以看做 RelativeLayout 的升級版矫钓。
但 ConstraintLayout 更加強(qiáng)調(diào)約束(控件之間的關(guān)系)紧武。
二软啼、準(zhǔn)備
1.導(dǎo)包
compile 'com.android.support.constraint:constraint-layout:1.0.2'
2. Android Studio 2.2 版本以上
三、屬性
1.) ConstraintLayout 本身的屬性
- android_maxHeight
- android_maxWidth
- android_minHeight
- android_minWidth
Android 常見控制 View 最大尺寸和最小尺寸的屬性孵延。
2.) Guideline 屬性
Guideline
用來輔助定位的一個不可見的元素旗们。
- android_orientation
控制 Guideline 是橫向的還是縱向的 - layout_constraintGuide_begin
控制 Guideline 距離父容器開始的距離 - layout_constraintGuide_end
控制 Guideline 距離父容器末尾的距離 - layout_constraintGuide_percent
控制 Guideline 在父容器中的位置為百分比
3.)相對定位屬性
用來控制子 View 相對位置的廷痘。
可以是子控件&子控件，也可以是子控件&父控件件已。
- layout_constraintBaseline_toBaselineOf
- layout_constraintTop_toBottomOf
- layout_constraintTop_toTopOf
- layout_constraintBottom_toBottomOf
- layout_constraintBottom_toTopOf
- layout_constraintStart_toEndOf
- layout_constraintStart_toStartOf
- layout_constraintEnd_toEndOf
- layout_constraintEnd_toStartOf
- layout_constraintLeft_toLeftOf
- layout_constraintLeft_toRightOf
- layout_constraintRight_toLeftOf
- layout_constraintRight_toRightOf
layout: 說明這是一個布局屬性笋额。
_constraintXXX: 為對當(dāng)前 View 上的某個屬性做的約束。
_toXXOf: 為當(dāng)前 View 約束的對象以及約束的方位篷扩。
View 的上下左右以及 baseline 示意圖
4.)Margin （View 的邊距）
Margin 說明
a. View margin 的屬性
- layout_marginStart
- layout_marginEnd
- layout_marginLeft
- layout_marginTop
- layout_marginRight
- layout_marginBottom
b.控制當(dāng)前 View 所參考的 View 狀態(tài)為 GONE 的時候的 margin 值
- layout_goneMarginBottom
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginRight
- layout_goneMarginStart
- layout_goneMarginTop
用途：
比如 ButtonB 左邊相對于 ButtonA 右邊對齊兄猩，ButtonA 左邊相對于父容器左邊對齊。如果 ButtonA 的狀態(tài)為 GONE（不可見的）鉴未，則 ButtonB 就相對于父容器左邊對齊了厦滤。如果有個需求是，當(dāng) ButtonA 不可見的時候歼狼， ButtonB 和父容器左邊需要一個邊距 16dp掏导。 這個時候就需要使用上面的 layout_goneMarginLeft 或者 layout_goneMarginStart 屬性了，如果設(shè)置了這個屬性羽峰，當(dāng) ButtonB 所參考的 ButtonA 可見的時候趟咆，這個邊距屬性不起作用；當(dāng) ButtonA 不可見（GONE）的時候梅屉，則這個邊距就在 ButtonB 上面起作用了值纱。
另外還有一個用途就是方便做 View 動畫，可以先設(shè)置 ButtonA 為 GONE坯汤，同時可以保持 ButtonB 的布局位置不變虐唠。
例：
<Button
android:id="@+id/btnA"
android:visibility="gone"
.../>
<Button
android:id="@+id/btnB"
app:layout_goneMarginLeft="50dp"
app:layout_constraintLeft_toRightOf="@+id/btnA"
.../>
5.)居中和偏移(bias)
- layout_constraintHorizontal_bias
- layout_constraintVertical_bias
Bias 示意圖：
6.)子 View 的尺寸控制
- android:layout_width
- android:layout_height
三種取值:
- 確定尺寸。比如 48dp
- WRAP_CONTENT
- 0dp惰聂。和約束規(guī)則指定的寬(高)度一樣
(a) 設(shè)置為wrap_content
(b) 設(shè)置為 0dp疆偿，則 View 的寬度為整個父容器的寬度
(c) 是設(shè)置了 margin的情況下的寬度。
a.控制子View的寬高比
- layout_constraintDimensionRatio
如果要使用寬高比則需要至少設(shè)置一個尺寸約束為 0dp
比率的取值形式：
- float 值搓幌，代表寬度/高度 的比率
- “寬度:高度”這種比率值
如果寬度和高度都是 0dp 也可以使用寬高比杆故。這種情況，系統(tǒng)會使用滿足所有約束條件和比率的最大尺寸溉愁。要根據(jù)其中一種尺寸來約束另外一種尺寸处铛，則可以在比率值的前面添加 W 或者 H來分別約束寬度或者高度。
<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"/>
H,16:9：前面的 H 表明約束高度拐揭，所以結(jié)果就是 Button 的寬度和父容器寬度一樣撤蟆，而高度值符合 16:9 的比率。
b.精細(xì)控制 View 尺寸的屬性
注意：下面這些屬性只有寬度或者高度設(shè)置為 0dp 的情況下才有效
- layout_constraintWidth_default
取值為spread/wrap,默認(rèn)值為 spread - layout_constraintHeight_default
取值為spread/wrap,默認(rèn)值為 spread - layout_constraintHeight_max
取值為具體的尺寸 - layout_constraintHeight_min
取值為具體的尺寸 - layout_constraintWidth_max
取值為具體的尺寸 - layout_constraintWidth_min
取值為具體的尺寸
spread：占用所有的符合約束的空間堂污；
Wrap：view 的尺寸設(shè)置為 wrap_content 且受所設(shè)置的約束限制其尺寸家肯，則這個 view 最終尺寸不會超出約束的范圍。
7.)鏈條布局（Chains）
Chains:同一個方向（水平或者垂直）上的多個子 View 提供一個類似群組的概念敷鸦。
a. 創(chuàng)建 Chains
多個 View 相互在同一個方向上雙向引用就創(chuàng)建了一個 Chain息楔。
比如在水平方向上兩個 Button A 和 B，如果 A 的右邊位于 B 的左邊扒披，而 B 的左邊位于 A 的右邊值依，則就是一個雙向引用。
注意： 在 Android Studio 編輯器中碟案，先把多個 View 單向引用愿险，然后用鼠標(biāo)擴(kuò)選多個 View，然后在上面點(diǎn)擊右鍵菜單价说，選擇 “Center Horizontally” 或者 “Center Vertically” 也可以快速的創(chuàng)建 Chain辆亏。
b. Chain heads
Chain 的屬性由該群組的第一個 View 上的屬性所控制（第一個 View 被稱之為 Chain head）。
水平群組鳖目，最左邊的 View 為 head扮叨， 垂直群組最上面的 View 為 head。
c. Margins in chains
可以為 Chain 中的每個子 View 單獨(dú)設(shè)置 Margin领迈。對于 spread chains彻磁， 可用的布局空白空間是扣除 margin 后的空間。下面會詳細(xì)解釋狸捅。
d. Chain Style
控制 Chain Style 的屬性：
- layout_constraintHorizontal_chainStyle
- layout_constraintHorizontal_weight
- layout_constraintVertical_chainStyle
- layout_constraintVertical_weight
chainStyle 是設(shè)置到 Chain Head 上的衷蜓，指定不同的 style 會改變里面所有 View 的布局方式。
有如下四種 Style：
- CHAIN_SPREAD：
這個是默認(rèn)的 Style尘喝，里面的所有 View 會分散開布局磁浇。 - CHAIN_SPREAD_INSIDE：
和 CHAIN_SPREAD 類似，只不過兩端的兩個 View 和 父容器直接不占用多余空間朽褪，多余空間在 子 View 之間分散置吓。 - Weighted chain：
在 CHAIN_SPREAD 模式下，如果有些 View 的尺寸設(shè)置為 0dp缔赠，則這些 View 尺寸會占據(jù)所有剩余可用的空間交洗，和 LinearLayout weight 類似。 - CHAIN_PACKED：
所有的子 View 都 居中聚集在一起橡淑，但是可以設(shè)置 bias 屬性來控制聚集的位置构拳。
如果多個子View尺寸設(shè)置為 0dp，則這些 View 會平均的占用多余的空間梁棠。
通過 layout_constraintXXX_weight 屬性置森，可以控制每個 View 所占用的多余空間的比例。
例如符糊，對于只有兩個 View 的一個水平 Chain凫海，如果每個View 的寬度都設(shè)置為 0dp，第一個 View 的 weight 為 2男娄；第二個 View 的 weight 為 1行贪，則第一個 View 所占用的空間是 第二個 View 的兩倍漾稀。
8.) UI 編輯器所使用的屬性
用作：輔助拖拽布局，實際使用過程中建瘫，可以不用關(guān)心崭捍。
- layout_optimizationLevel
- layout_editor_absoluteX
- layout_editor_absoluteY
- layout_constraintBaseline_creator
- layout_constraintTop_creator
- layout_constraintRight_creator
- layout_constraintLeft_creator
- layout_constraintBottom_creator
9.) Guideline
用作：一個不可見的 View，ConstraintLayout 水平或者垂直的參考線啰脚。
其他的 View 可以相對于這個參考線來布局殷蛇。
- 垂直 Guideline 的寬度為 0， 高度為 父容器（ConstraintLayout）的高度
- 水平 Guideline 的高度為 0橄浓， 寬度為 父容器（ConstraintLayout）的寬度
參考線的位置是可以移動的粒梦。 - layout_constraintGuide_begin 可以指定距離左（或者上）邊開始的固定位置
- layout_constraintGuide_end 可以指定距離右（或者下）邊開始的固定位置
- layout_constraintGuide_percent 可以指定位于布局中所在的百分比，比如距離左邊 2% 的位置
10.) 代碼設(shè)置 ConstraintLayout 屬性
a. ConstraintSet
用來通過代碼管理布局屬性的集合對象荸实，可以用來約束各種布局匀们，然后把創(chuàng)建好的布局約束應(yīng)用到 ConstraintLayout。
b. 創(chuàng)建方式
手工創(chuàng)建：
c = new ConstraintSet();
c.connect(….);R.layout.* 獲取
c.clone(context, R.layout.layout1);-
ConstraintLayout 中獲取
c.clone(clayout);
然后通過 applyTo 函數(shù)來應(yīng)用到ConstraintLayout 上// set new constraints mConstraintSet.applyTo(mConstraintLayout);
四准给、可視化UI的使用
2017/5/19 15:33:50
