4.2 ConstraintLayout 版面配置

Layout 是目前手持裝置設計畫面時的主要元件,元件必須放置在一個版面 上,在這個版面上設計想要展示的使用者介面,這個版面就是 Layout。不同的 Layout 有不同的配置效果,也有它特有的規定與方法,瞭解 Layout 是設計手持裝置時的第一個課題。

Android 提供了許多種類的 Layout, 如 LinearLayout 提供循序流水式的配置方式,RelativeLayout 的特色是元件與元件間的相對位置, FrameLayout 則是類似圖層般的配置,另外,最新的 ConstraintLayout 是為了解決效能與元件配置複雜度所誕生的新一代 Layout。

ConstraintLayout

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 本身,也可以是畫面中的某個元件,這部份會在本章後續的練習中介紹。