Kotlin Android 高效入門
線上課程
  • Kotlin Android 高效入門
  • Android 開發準備
    • 0 Git 版本控制系統
      • 0.1 Gitlab 網站
      • 0.2 Gitlab 範例專案
      • 0.3 Gitlab 取得本書範例
      • 0.4 版本切換
    • 1 Android 系統與應用程式
      • 1.1 Android 版本演進
      • 1.2 Android 系統架構
      • 1.3 應用程式基礎
      • 1.4 應用程式元件
      • 1.5 應用程式宣告檔
      • 1.6 Android Studio 開發環境
    • 2 開發環境安裝
      • 2.1 基礎環境-JDK
      • 2.2 整合開發工具-Android Studio
      • 2.3 必要的設定
  • Android 專案開發
    • 3 Android 專案架構與 Activity
      • 3.1 建立Bmi專案
      • 3.2 AndroidManifest.xml載運清單
      • 3.3 畫面配置-Layout
      • 3.4 Java/Kotlin 類別
      • 3.5 資源 Resources
      • 3.6 Android Support Library-支援函式庫
    • 4 版面配置環境
      • 4.1 版面配置設計畫面
      • 4.2 ConstraintLayout 版面配置
      • 4.3 LinearLayout 流水式版面
      • 4.4 元件的高度與寬度
      • 4.5 元件位置與距離
    • 5 Kotlin 語言基礎
      • 5.1 Kotlin 基礎知識
      • 5.2 類別與物件
    • 6 Activity 設計
      • 6.1 Bmi 專案功能設計
      • 6.2 MainActivity 中取得畫面元件
      • 6.3 按鈕的事件處理
      • 6.4 使用浮動顯示-Toast類別
      • 6.5 使用對話框-AlertDialog 類別
      • 6.6 多國語言
      • 6.7 按鈕事件處理-匿名類別與 lambda
  • 線上課程
    • 20 線上課程 courses
Powered by GitBook
On this page

Was this helpful?

  1. Android 專案開發
  2. 4 版面配置環境

4.2 ConstraintLayout 版面配置

Previous4.1 版面配置設計畫面Next4.3 LinearLayout 流水式版面

Last updated 5 years ago

Was this helpful?

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