4.3 LinearLayout 流水式版面

就字面意義來說 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」:

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