建立線性版面配置

試用 Compose 方法
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中處理版面配置。

LinearLayout 是一個檢視區塊群組,可將所有子項依同一個方向 (垂直或水平) 對齊。您可以使用 android:orientation 屬性指定版面配置方向。

圖片顯示版面配置以三個垂直區塊分割
圖 1.含有三個水平導向的子項的 LinearLayout

LinearLayout 的所有子項會依序堆疊,因此無論其寬度為何,垂直清單的每一列都只有一個子項。水平清單只有一列高,同時也是最高子項的高度加上邊框間距。LinearLayout 會遵循子項之間的「邊界」,以及每個子項的「重心」(靠右、置中或靠左對齊)。

版面配置粗細

LinearLayout 也支援使用 android:layout_weight 屬性將「權重」指派給個別子項。此屬性會依據檢視畫面在螢幕上佔用的空間,為檢視畫面指派「重要性」值。權重值越大,即可展開至填滿父項檢視畫面的剩餘空間。子項檢視畫面可以指定權重值,而檢視區塊群組中的剩餘空間則會根據宣告的權重,按比例指派給子項。預設權重為零。

均等分布

如要建立線性版面配置,並讓每個子項在畫面中使用相同數量的空間,請將每個檢視畫面的 android:layout_height 設為 "0dp" (垂直版面配置),或將每個檢視畫面的 android:layout_width 設為 "0dp" 為水平版面配置。接著,將每個檢視畫面的 android:layout_weight 設為 "1"

不等分布

您也可以建立線性版面配置,讓子元素在畫面上使用不同大小的空間。請見以下範例:

  • 假設您有兩個文字欄位,三個欄位的權重值為 1,第三個欄位的預設權重值為 0。在第三個文字欄位中,權重值為 0 只會佔用內容所需的區域。另外兩個文字欄位的權重值 1 會平均展開,以填滿三個欄位內容之後的剩餘空間。
  • 假設您有三個文字欄位,其中兩個的權重值為 1,第三個欄位的權重為 2,則系統會按照以下方式測量所有三個欄位內容後方的剩餘空間:權重值為 2 的欄位的一半,另一欄位則平均除以權重值為 1 的欄位。

下圖和程式碼片段說明版面配置權重在「傳送訊息」活動中的運作方式。「To」(收件者) 欄位、「Subject」(主旨) 行和「Send」(傳送) 按鈕只佔用所需的高度。訊息區域佔用活動的其餘高度。

圖片顯示三個 EditText 和一個位於垂直方向的 LinearLayout 中的按鈕
圖 2 三個文字欄位和一個按鈕,位於垂直方向的 LinearLayout 中。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

如要進一步瞭解 LinearLayout 每個子檢視畫面可用的屬性,請參閱 LinearLayout.LayoutParams