最近幾個月終於有大把時間總結這兩年來所學，榮幸之至
2019.5.22
前言
本章節對應內容的練手項目
目錄
本文包含2.1-2.6的內容
- 1 基本操作
- 1.1 相對位置佈局
- 1.2 整體位置佈局
- 1.3 約束比例
- 1.4 文字基準線對齊
- 1.5 圓心佈局（原文叫 Circular positioning)
- 2 進階操作
- 2.1 View的內容約束 constrainedWidth
- 2.2 約束偏移量 Bias
- 2.3 約束鏈 Chain Style
- 2.4 寬高比
- 2.5 百分比佈局
- 2.6 參考線
- 3.Helper類
- 3.1 Group
- 3.2 Layer
2 進階操作
2.2 constrainedWidth
TextView 或者其他View內容有時候可能會超過約束範圍。需要使用layout_constrainedWidth和layout_constrainedHeight，兩個屬性的默認值均爲false。
文字過多的時候，就像下面這個樣子
我們對右側的TextView的設置是在ImageView的右側，但是我們可以看到文字已經超出了約束範圍，把ImageView蓋住了。我用橙色把兩邊超出來的部分圈出來了，可以看到，兩邊是對稱的，所以，有一部分文字還顯示在了屏幕外面。
注意：這裏說的是約束範圍，不是規定範圍，如果你把TextView的width和height寫成固定值，無論文字有多少都是不會超出範圍的。
layout_constrainedWidth表示不讓寬度超出約束範圍，文本如果超出了以後，就會自動換行
layout_constrainedHeight 表示不讓高度超出約束範圍，文本如果超出了以後，會直接截斷
兩個的默認值均爲false。
在上面的TextView屬性中加上app:layout_constrainedWidth="true"以後，就可以得到想要的效果了。
2.2 約束偏移量 Bias
bias英文是偏心，偏向的意思
也是有水平和垂直兩個方向
layout_constraintHorizontal_bias
layout_constraintVertical_bias
取值範圍是 0.0 -- 1.0 默認值是0.5[就是不設置的時候，控件會放置與兩方約束的正中間]。
這個很好理解，舉個例子
給一個水平垂直方向均居中的View，加入app:layout_constraintVertical_bias="0.2"後，就會在垂直方向重新開始分配權重。上面說了，layout_constraintVertical_bias默認值是0.5，所以我們不寫的話，垂直方向就是Top和Bottom各一半兒。改成0.2以後，就會變成這樣子。
2.3 2.3 約束鏈 Chain Style
app:layout_constraintVertical_chainStyle
約束鏈的使用場景是需要將兩個以上的View打包的時候[類似於一層佈局嵌套]
layout_constraintVertical_chainStyle有三個取值，分別是 packet、spread、spread_inside，默認值是 spread，我們如果用這個屬性的話，基本上都是用packet
packet:表示內部全部打包
使用packet時，如果需要間距，就加上 layout_marginTop 之類的屬性
spread 表示分散，這個值是默認值，和沒寫一樣
spread_inside 表示內部分散，他會均勻分佈在約束的內部，頂部和底部分別挨着top和bottom
2.4 寬高比
寬高比是指，View的寬和高保持固定的比例。需要修改下面兩個參數：
- width或者height爲
0dp[match_constraint] -
app:layout_constraintDimensionRatio="比值"
如果width和height都是0dp，那麼就有一個是鋪滿的，另一個按照比例縮放
高：寬 = 2：1
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintDimensionRatio="1:2"
寬：高 = 2：1
android:layout_width="0dp"
android:layout_height="wrap_content"
...
app:layout_constraintDimensionRatio="2:1"
寬：高 = 2：1[width height均爲0dp]
android:layout_width="0dp"
android:layout_height="0dp"
...
app:layout_constraintDimensionRatio="2:1"
三種情況結果如下圖：
2.5 百分比佈局
百分比佈局，指height 或height佔parent的百分比
- 對應width或者height的值爲0dp[match_constraint]
- 設置
app:layout_constraintWidth_percent="percent"或app:layout_constraintHeight_percent="percent"。percent取值範圍爲0-1
比如我們對一個View設置了：
...
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.77"
...
效果就是：
2.6 參考線
接着上面的百分比佈局，上面說道的百分比佈局，除了直接使用layout_constraintWidth_percent的方式以外，常用的方式還有使用GuideLine。
GuideLine[輔助線]分垂直方向「vertical」和水平方向「Horizontal」
我們設置好了輔助線以後，就可以以輔助線爲約束條件，完成百分比佈局.
使用方式
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.35"
/>
-
android:orientation=表示方向，取值vertical或horizontal -
app:layout_constraintGuide_percent="0.35"表示百分比的方向 - 另外，輔助線的位置也可以通過
layout_constraintGuide_end
layout_constraintGuide_begin
分別表示從parent的End和Start處移動的長度 - 百分比也可以支持負數，這個時候，會跑到屏幕外面去，有的時候會用到。
藉助百分比佈局，可以很容易實現下面這個論文簡版首頁的佈局。
- 加上本小節，一共用了11小節將ConstraintLayout的使用，這個界面就不做分析去寫了，可以下來實現一下。
另外，爲了避免看文章枯燥，我準備了一個練手項目，看完以後可以下載下來練習練習。
再另外，以上都是自己平時所學整理，如果有錯誤，歡迎留言或者添加微信批評指出，一起學習，共同進步，愛生活，愛技術。
