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.3 LinearLayout 流水式版面

Previous4.2 ConstraintLayout 版面配置Next4.4 元件的高度與寬度

Last updated 5 years ago

Was this helpful?

就字面意義來說 LinearLayout 可稱為線性 Layout, 但「 流水式 Layout」比較合適,在 LinearLayout 內的元件皆以水平 (horizontal) 或垂直 (vertical) 排列,在使用之前,可先定義其「orientation」屬性,可設定值為 「horizontal」水平或「vertical」垂直。 接下來在專案中,新增一個版面配置 (Layout) 檔,當作是練習的標的。

1. 先點擊專案的「app」,或確認 app 是被選取的狀態,如下圖:

2. 在功能表中選擇 File/New/Android Resource File

3. 版面檔案名稱

輸入檔名 (File name)「activity_main2.xml」,在第二個下拉選項改選「Layout」 代表將產生新的版面配置檔案, 在 Root element 選擇使用 LinearLayout,完成後按下「OK」,即可產生新的版面檔案,如下圖。

如果在預覽畫面下方出現以下的警示,可以按下左上方的關閉圖示忽略它。

有時會因為快取問題造成無法預覽, 可點擊功能表「File/Invalidate Caches/Restart 」將快取 (Cache) 清取後重啟 Android Studio。

產生後的新 Layout 檔 (activity_main2.xml) 如下圖:

垂直流水版面

新的版面配置檔案 activity_main2.xml 使用 LinearLayout,且設定為垂直排列,請在版面中加入三個 Button 按鈕元件,可觀察其配置結果,如下圖:

水平流水版面

接著將 LinearLayout 的排列方式改為水平, 先選擇畫面中的 LinearLayout (可在預覽區中點擊,或在右上方的元件樹中選擇),再到右下方的屬性區中找到「orientation」屬性,由「vertical」更改為「horizontal」 水平,如下圖:

讀者應該也發現到畫面預覽並不如預期以水平方式排列三個按鈕,這是 因為三個按鈕的 layout_width 寬度屬性的原因,請選取三個按鈕 (可按住 Ctrl 選擇多個),如下圖 :

將三個元件的寬 (layout_width) 調整為「wrap_content」:

預覽圖將更改為水平流水版面,如下圖:

選取三個按鈕