元件的屬性,高度、寬度、對齊與權重分配

LinearLayout

就字面意義來說LinearLayout可稱為線性Layout,但「流水式Layout」比較合適,在LinearLayout內的元件皆以水平(horizontal)或垂直(vertical)排列,在使用之前,可先定義其「orientation」屬性,可設定值為「horizontal」水平或「vertical」垂直。

接下來在專案中,新增一個版面配置(Layout)檔,當作是練習的標的。

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

Step 2 . File/New/Android Resource File

Step 3 . 版面檔案名稱

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

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

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

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

垂直流水版面

水平流水版面

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

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

元件的高度與寬度

Android的所有元件都具備兩個屬性,也就是元件的高與寬,屬性名稱為「layout:height」與「layout:width」,許多人直覺想要以螢幕的畫素為元件訂定個別的高度與寬度,其實,為元件訂定固定的高與寬是不適合的,因為Android手機產品非常多元,有的手機的解析度是480×720,有的是640×960、640×1136、1080×1920或甚至1440×2560,如此眾多的差異性。假設我們的APP訂的元件大小是固定的,那是無法滿足所有的螢幕需求的。因此,Android建議開發者在訂定元件大小時,若希望只占用元件內容資料時,使用「wrap_content」值,當想要元件占滿所在區域可用空間時,使用「match_parent」值,筆者使用上節的LinearLayout垂直配置的範例,說明如下。

符合元件內容物-wrap_content

意義是元件只占可顯示其內容物的大小,請選擇第一顆按鈕,如下圖:

觀察右下角屬性區,其layout:width寬度屬性與layout:height高度屬性都是「wrap_content」代表元件的高與度都只占必要的空間,屬性如下圖:

以元件所在的容器為主-match_parent

意義是所在容器有多大就占多大,繼續使用同一個範例,為第二個按鈕元件設定其寬度屬性為「match_parent」,如下:

結果如下圖:

第二顆按鈕雖然內容文字不需要那麼寬的空間,但其元件寬度仍占滿所在的LinearLayout區域。

元件的間距-margin

每一個元件都可指定其上下左右與其他元件的距離,稱之為「Margin」間距,「android:layout_margin」為其屬性名稱,可以統一設定四個方向的間距,亦可個別設定。

假設希望本例的第二顆按鈕與下方第三顆按鈕有30點的間距,請先選擇第二顆按鈕,在其屬性表中找到「layout:margin」屬性後展開,可設定bottom值為「30dp」,如下圖:

輸入完後按下Enter鍵,即完成設定,預覽圖如下:

提示:

Android Studio 2.3加入常用屬性與所有屬性的切換,若在預設屬性中找不到時,可切換為所有屬性,如下圖:

元件的對齊

為元件設定「layout:gravity」屬性,可決定元件在容器中向那個方位靠攏,請選擇第一顆按鈕,找到屬性表中的layout:gravity屬性後展開,在center子屬性中選擇「horizontal」,代表本按鈕對齊為水平置中,如下圖:

預覽圖如下,第一顆按鈕的layout:gravity屬性在設定為水平置中後:

另一個與layout:gravity屬性很像的屬性為「gravity」,假如在一個版面中有很多個元件,想要每個元件都以同一種方式對齊,要一個個去設定實在太繁複了,「gravity」屬性提供給版面配置或容器統一設定裏面元件的對齊方式,只要設定版面即可。

請選擇範例的LinearLayout,找到屬性表中的gravity屬性後展開,勾選「center_horizontal」如下圖:

預覽效果如下,所有在LinearLayout中的元件都水平置中了:

LinearLayout中的權重weight

當我們在LinearLayout中放入多個元件時,可利用屬性「weight」權重,為元件分配不同的權重值,其預設值為0。透過分別設定在LinearLayout內的元件的權值值,可依權重分配元件可以占用的空間,例如一個水平的LinearLayout人的三個Button,權值為分別為1,2,3時,其配置結果如下圖:

原始碼如下:

<?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:orientation="horizontal">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="BUTTON1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="BUTTON2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="BUTTON3" />
</LinearLayout>

那如果需要每個元件平均分配,占據整個Layout的區域呢? 可將每個元件的權重值設定為非零的同一個值,如1.0或3.0都可以,平均分配的結果預覽如下圖,三個Button元件的權重值都是1.0:

 

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *