Android UI 佈局Part5 — 元件的屬性

到目前為止，我們介紹了幾個常用的Layout。這篇我們將再介紹幾個跟排版較有相關的屬性。

• 高度與寬度
• 對齊
• 權重分配
• padding
• margin

寬度與高度

寬度及高度使用layout_width與layout_height來設定

• 使用dp設定寬度
• wrap_content 依元件內的內容有多少就給多少
• match_parent 依父元件的大小

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <!-- wrap_content 寬度與文字同寬 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
    <!-- 200dp 寬度固定為200dp -->
    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="Button2"
        />
    <!-- match_parent 寬度與父元件同寬 -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        />
</LinearLayout>

padding

padding指的是view中的content與view邊緣的距離。

例：

1. 紅色區塊是一個padding:10dp的FrameLayout，Button距FrameLayout有20dp
2. 將Button設定為padding:20dp，Button內的文字距Button的邊就會有20dp。

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#FF0000"
    >
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="Button1"
        />
</FrameLayout>

除了padding設定4個方向，還有以下幾種方式設定

android:padding 設定4個方向的padding
android:paddingBottom 設定下方的padding
android:paddingEnd 設定結束方向的padding
android:paddingHorizontal 設定左邊的padding
android:paddingLeft 設定左邊的padding
android:paddingRight 設定右邊的padding
android:paddingStart 設定開始方向的padding
android:paddingTop 設定上方的padding
android:paddingVertical 設定上下方向的padding

🔹Android 線上課程：進階UI佈局、動畫入門到進階

margin

margin用來描述view間的位置關係

下例：Button2與Button1的間距20dp，Button3與Button2的間距20dp。這種View與View的間距就使用margin來設定。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
    <!-- marginTop=20dp 與上方元件間距20dp -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_marginTop="20dp"
        />
    <!-- marginTop=20dp 與上方元件間距20dp -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button3"
        android:layout_marginTop="20dp"
        />
</LinearLayout>

android:layout_margin 指定與上下左右的間距.
android:layout_marginBottom 指定與下方的間距.
android:layout_marginEnd 指定與結束的方向的間距.
android:layout_marginHorizontal 指定與左右的間距
android:layout_marginLeft 指定與左邊的間距
android:layout_marginRight 指定與右邊的間距
android:layout_marginStart 指定與開始方向的間距
android:layout_marginTop 指定與上方的間距
android:layout_marginVertical 指定與上下的間距

這邊要注意的是如果要使用與左右的間距，可以考慮使用layout_marginStart，因為有些國家的字是右邊開始，使用layout_marginStart也可以支援。但layout_marginStart是在android 4.2之後才有的，所以一般layout_marginStart 、layout_marginLeft會同時加，layout_marginEnd 、layout_marginRight會同時加。

對齊

Gravity是用來設定View中內容的位置。例Button裡的Text對齊。或下例LinearLayout裡的Button要置中。

layout_gravity 是用來設置該view相對與父view 的位置, 例Button要置於Linearlayout的中間可透過設定Button的layout_gravity

單位

上述的例子都是用dp為單位，以下介紹其他的單位。

px (pixel)

基於螢幕的實體像素，也就是我們常用的解析度

in (inches)

英吋，物理長度。

dpi (dots per inch)

螢幕像素密度，就是1英吋上像素點的個數，dpi越高，螢幕的精緻度越好
dp (device independent pixel) px = dp * ( dpi / 160 )，如果dpi=160，這時1dp就會等於1px

sp (Scale-independent Pixel)

類似dp。主要處理字體大小，它會跟據使用者字型的大小而縮放。

px (像素) 與 dp 的關係：

dp = (dpi/160) / px

使用原則：一般UI的寬與高使用dp為單位，文字大小使用sp為單位

權重分配

元件的寬度、高度設定，還有另一種使用方式，就是依比例設定。 將layout_width設定為0dp，layout_weight設定元件寬的比重。

下例：將Button1寬度訂為1/3，Button2寬度訂為2/3。

下圖的例子是我們經常看見的UI樣式，左邊顯示標題、右邊顯示內容。

左邊的標題寬度為wrap_content，右邊的內容則設定為weight=1，由於右邊的權重=1最大，剩餘的寬度將留給右邊的。

這裡需注意，如果將右邊設定為match_parent，則右邊會佔滿整個寬度，連左邊的標題都看不到了。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp">
    <!-- 公司名稱 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!-- 寬=wrap_content TextView的字有多寬就多寬 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="公司名稱" />
        <!-- 寬=0dp，比重=1，LinearLayout裡剩餘的寬度都給這個TextView -->
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_weight="1"
            android:text="XXX 公司" />
    </LinearLayout>
    <!-- 公司電話 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">
        <!-- 寬=wrap_content TextView的字有多寬就多寬 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="公司電話" />
        <!-- 寬=0dp，比重=1，LinearLayout裡剩餘的寬度都給這個TextView -->
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_weight="1"
            android:text="02-23456789" />
    </LinearLayout>
    <!-- 公司地址 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="公司地址" />
 
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_weight="1"
            android:text="110台北市信義區信義路五段7號 台北101大樓98樓" />
    </LinearLayout>
</LinearLayout>

👊 給Android 初學者 的快速成長 線上課程

️初學者入門課 — Kotlin x Android｜APP 開發到上架完整實戰攻略

UI 進階實戰 — Material Design Component 讓你簡單做出效果超好的UI

動畫入門到進階 — 用動畫提升使用者體驗

架構設計 — MVP、MVVM 讓你程式碼好維護

下一篇介紹：ScrollView

Android UI 佈局 Part6 — ScrollView

線上課程

👊出版書

Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐

APP 程式總是改壞？ — — — ☑ 用單元測試驗證正確性，再也不怕改錯！
APP 需求經常變更？ — — — ☑ TDD：紅燈、綠燈、重構，三步驟法則！ APP 人工作業耗時？ — — — ☑ 測試、部署自動化一次搞定！

天瓏網路書店 | Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐（iT邦幫忙鐵人賽系列書）