4.2 ConstraintLayout 版面配置
Last updated
Last updated
Layout 是目前手持裝置設計畫面時的主要元件，元件必須放置在一個版面 上，在這個版面上設計想要展示的使用者介面，這個版面就是 Layout。不同的 Layout 有不同的配置效果，也有它特有的規定與方法，瞭解 Layout 是設計手持裝置時的第一個課題。
Android 提供了許多種類的 Layout， 如 LinearLayout 提供循序流水式的配置方式，RelativeLayout 的特色是元件與元件間的相對位置， FrameLayout 則是類似圖層般的配置，另外，最新的 ConstraintLayout 是為了解決效能與元件配置複雜度所誕生的新一代 Layout。
ConstraintLayout 是目前 Android Studio 在產生 Activity 時使用的預設 Layout，Constraint 的中文翻譯是限制、條件、約束，由劍橋英語字典對它的解釋為「something that controls what you do by keeping you within particular limits」，意思是一些讓你能夠控制的東西。假如我們想要一個元件依照我們的意思配置在版面中的特定位置，就應該為它加上一些控制條件， 而這些限制條件就稱為 Constraints。
一個無任何 Constraint 的元件，它預設會配置在 layout 的最左上角 (0,0) 處，如果一個畫面中有多個元件都未設定任何Constraint時，它們全都會擠在畫面的左上角。
在 Android Studio 自動為 Bmi 專案產生的 activity_main.xml 就是一個完整的 ConstraintLayout 版面配置，在正中間有一個文字方塊 TextView 元件，用來顯示字串資料 "Hello World"。請點擊選取該 TextView，並觀察它目前的狀態，如下圖：
圖中 TextView 元件擁有分別是上、 下、 左與右四個 Contraints，它會水平置中是因為左與右兩個 Contraints 都連接到它所在容器， 會垂直置中是因為上、 下 兩個Constraints 的原因。請讀者將游標移至元件上方的 Constraint 圓點上，如下圖：
該 Constraint 點會變成紅色並閃動，只要按一下它，這個 Constraint 就立即會被刪除，當我們刪除上方的 Constraint 後，因為垂直方向只剩一個下方的 Constraint 了，所以它就跑到 ConstraintLayout 的最下方，如下圖：
當我們再把右邊的 Constraint 也刪除後，TextView 元件只擁有左與下這兩個 Constraints，因此它的位置就跑到整個版面的左下角，如下圖：
在 ConstraintLayout 中的每一個元件必須至少擁有一個水平與垂直方向的約束 Constraint，如果違反此規定時，在 Layout 的原始 XML 碼中會出現錯誤訊 息，如下：
上圖的錯誤就是因為 TextView 只有一個向左的 Constraint，缺了一個垂直方向 ( 上或下 ) 的 Constraint。
假設想讓這個 TextView 放在版面的左上方，應該為它設定左與上兩個 Constraint，請按下元件上方的 Constraint 並往上拖拉到版面的最上緣，如下圖：
結果如下：
在右方的屬性區的最上面也有元件的 Constraint 示意圖，可以調整每個 Constraint 的外間距 (Margin) 如下圖:
Constraint 的對象不只是 Layout 本身，也可以是畫面中的某個元件，這部份會在本章後續的練習中介紹。
