前言：
? ? ? ? ?目前我的android studio的版本是2.3.3,所以每次新建項(xiàng)目時(shí)震束，都會(huì)主動(dòng)導(dǎo)入" compile'com.android.support.constraint:constraint-layout:1.0.2' "，使得項(xiàng)目中布局直接改成“android.support.constraint.ConstraintLayout”当犯，這就使得本身還停留在使用LinearLayout和RelativeLayout布局的我懵了垢村，于是耐下性子來(lái)學(xué)習(xí)ConstraintLayout，記錄下學(xué)習(xí)過(guò)程嚎卫。
? ? ? 以下把ConstraintLayout簡(jiǎn)化為CL嘉栓，RelativeLayout簡(jiǎn)化為RL，LinearLayout簡(jiǎn)化為L(zhǎng)L拓诸。
? ? 本文參考的文章：
? ? ? ? ? Google官方文檔的：解析ConstraintLayout的性能優(yōu)勢(shì)? ? 詳細(xì)介紹了CL如何優(yōu)化了性能
? ? ? ? ? 郭霖郭神的：Android新特性介紹侵佃，ConstraintLayout完全解析? ?
? ? ? ? ? ?鴻洋大神的：ConstraintLayout 完全解析 快來(lái)優(yōu)化你的布局吧? ?
? ? CL是android studio2.2的新特性，相比較于RL和LL在性能方面有很大的提升奠支。
? ? CL顧名思義馋辈，約束布局。相比較于RL和LL倍谜，它的使用不需要向RL和LL這樣一層嵌套一層迈螟，而是通過(guò)控件與控件間的約束來(lái)完成布局的擺放。
?本文主要記錄 ConstraintLayout的主要屬性：（如當(dāng)前的控件為控件A）
? ? (一) 相對(duì)約束屬性
app:layout_constraintLeft_toLeftOf="@+id/B"? 實(shí)際作用和字面意思一樣尔崔，控件A的左側(cè)是在控件B的左側(cè)答毫，即A和B左側(cè)對(duì)齊??
app:layout_constraintTop_toBottomOf="@+id/B" 控件A的頂部在控件B的底部，即A在B的下邊
app:layout_constraintRight_toLeftOf="@+id/B"? 控件A在控件B的左邊
app:layout_constraintBottom_toBottomOf="parent"? ?控件A與位于屏幕最底端
注意：當(dāng)B這個(gè)id在A之前定義的話可以直接寫成"@id/B",如果不是則需寫成"@+id/B"季春，否則會(huì)因?yàn)檎也坏絠d為B的控件兒編譯報(bào)錯(cuò)洗搂。
還有其他的：
? app:layout_constraintTop_toBottomOf="? "
?app:layout_constraintLeft_toRightOf="? "
?app:layout_constraintLeft_toRightOf="? "
?布局和字面意思一致。
(二) 沒有l(wèi)ayout_weight這個(gè)屬性
? ?使用 android:layout_width="0dp" ，? 效果圖為：
實(shí)際代碼為：
?相比較RL蚕脏，把button2的android:layout_width設(shè)為了0侦副，所以效果直接出來(lái)，不需要layout_weight這個(gè)屬性
（三） GuideLine
?GuideLine是分隔線驼鞭，在實(shí)際的界面上不會(huì)顯示秦驯。
?定義時(shí)必須要的兩個(gè)屬性：
? ? ?android:orientation="vertical"
? ? ?app:layout_constraintGuide_percent="0.8"
? ?表示定義了一個(gè)豎直方向上的分隔線，它的位置在占據(jù)屏幕豎直方向80%的地方
? 一般會(huì)定義兩個(gè)GuideLine挣棕，在它們交匯的地方放置一個(gè)控件译隘，如：
紅色Button的左側(cè)有一條豎直的GuideLine，頂部有一條水平的GuideLine洛心，代碼為：
? ? 加了個(gè)自定義的drawable命名為"my_drawable"
順便復(fù)習(xí)下ShapeDrawable
(四)還有兩個(gè)屬性
app:layout_constraintVertical_bias=" " 和app:layout_constraintHorizontal_bias=" "
先看個(gè)效果：
? 代碼為：
? ? ? 圖3和圖2很像固耘，但最大的區(qū)別是它的位置比圖2要偏左上，實(shí)際是因?yàn)檎{(diào)用的屬性代表的都是80%的位置词身，只是圖2的中心點(diǎn)在兩個(gè)80%的交匯處厅目，而上圖2件的左上角的那個(gè)點(diǎn)在80%交匯處。
(五)??app:layout_constraintHorizontal_chainStyle
上圖代碼如下：
? ? ? 注意：這種效果的實(shí)現(xiàn)法严，首先需要把每一個(gè)控件的左右約束全部完成损敷，不能缺少，其次所有控件的寬度設(shè)置為0dp,再設(shè)置layout_constraintHorizontal_weight這個(gè)屬性深啤，如果layout_constraintHorizontal_weight這個(gè)屬性設(shè)置的不全為1拗馒，則哪個(gè)值大，相應(yīng)的控件就比較長(zhǎng)溯街。
把layout_constraintHorizontal_weight這個(gè)屬性換成：layout_constraintHorizontal_chainStyle="spread"也可以實(shí)現(xiàn)上圖效果诱桂。
當(dāng)3個(gè)控件的layout_width="wrap_content"時(shí)，效果為：
? ? ?layout_constraintHorizontal_chainStyle還有其他屬性值可以選：當(dāng)值為"spread_inside"呈昔，且每一個(gè)控件的layout_width="wrap_content"時(shí)挥等，效果為：
當(dāng)layout_constraintHorizontal_chainStyle的值為"packed"，且每一個(gè)控件的layout_width="wrap_content"時(shí)堤尾，效果為：
? ? ? packed的英文意思是打包触菜，所以3個(gè)控件都聚集在一起，spread是蔓延的意思哀峻，所以當(dāng)控件的寬度為0dp時(shí)涡相，每個(gè)控件都會(huì)努力占據(jù)整個(gè)屏幕，最終三個(gè)控件把整個(gè)界面占滿剩蟀，當(dāng)控件的寬度為wrap_content時(shí)催蝗，此時(shí)就像控件的gravity，把整個(gè)界面均分3份育特，每個(gè)控件都位于占據(jù)的空間的中間丙号，spread_inside則是在spread的基礎(chǔ)上先朦，左側(cè)的往左移，右側(cè)的往右移犬缨，中間的不變喳魏。
(六)? ?有時(shí)候界面上展示的控件是按比例來(lái)的，在以前的RL中怀薛，通常需要通過(guò)在代碼中設(shè)置控件的比例刺彩，現(xiàn)在可以通過(guò)app:layout_constraintDimensionRatio這個(gè)屬性，直接在布局文件設(shè)置控件的寬高比枝恋，如下圖：
代碼如下：
? ? ?app:layout_constraintDimensionRatio這個(gè)屬性的值設(shè)置為："W创倔，24：1" 是指 " 寬：高=24:1 "所以看到橫向的那條textview，相應(yīng)的有H的就是" 高：寬 "焚碌，默認(rèn)情況下是"寬：高"畦攘。
