Android筆記(5)：使用者界面UI與Layout設計(上)

Photo by Stephen Frank on Unsplash

上一篇談到 XML 檔案的編輯與設計包含兩個部分：Layout 及元件，元件的種類有文字框、圖片框、列表等之後再學習其用法。本篇先來看佈局 Layout 的種類與應用。

[View、ViewGroup與Layout的關係]

Android 開發者在設計 APP 顯示界面並與使用者互動時，常會用到 View 元件，View 是繪製物件在螢幕上與使用者進行互動，ViewGroup 則是一個存放其他 View（和ViewGroup）物件的佈局容器，也就是說系統中的所有 UI 類都是建立在 View 和 ViewGroup 這兩個類別的基礎上。兩者的關係及其他元，如下圖：

View、ViewGroup、Layout及其他元件之間的關係如下圖：

來源：proandroiddev

一個基本的 APP 至少會具備一個畫面來與使用者互動，在 Android 中會透過 XML 語法描述一個畫面的版面佈局，這類檔案稱之為佈局(Layout)。ViewGroup 繼承 View，而所有 Layout 佈局也都繼承 ViewGroup，類似一個容器，可放置容器或其他可置於容器內的子元件，如 textView、button 等。

在Android 中，每個元件都有具體的位置和大小，在各種不同尺寸的裝置畫面上擺放各種元件時，很難判斷及管理其擺放位置。透過 Android 佈局管理器可以很方便地控制各元件的位置和大小。Android 定義了多種的 Layout 供開發者使用，Layout 決定 APP 的外觀，種類包括：

線性佈局(LinearLayout)：是指在垂直或水平方向上依次擺放元件。
相對佈局(RelativeLayout)：通過相對定位的方式來控制元件的擺放位置。
框架佈局(FrameLayout)：沒有定位的方式，預設情況下，所有的元件都會擺放在容器的左上角，逐個覆蓋。
表格佈局(TableLayout)：使用表格的方式按行、列來擺放元件。
網格佈局(GridLayout)：可以跨行或跨列擺放元件

網格佈局(GridLayout)是在 Android 4.0 版本以後才推出的，而各種 Layout 佈局均直接或間接繼承自 ViewGroup 類別。因此，所有的 Layout 佈局都可以作為容器使用，我們可以在 Layout 佈局中添加多個 UI 元件，也可以將一個或多個 Layout 佈局放在其他的 Lauout 佈局中。

[線性佈局 LinearLayout]

線性佈局是將放入其中的元件按照垂直(Vertical)或水平(Horizontal)的方向來排列，垂直排列的稱為垂直線性佈局，水平排列的稱為水平線性佈局。當元件被排列在線性佈局中，元件排列遇到邊界時，並不會換行，當元件一個接著一個排列到佈局的邊緣時，超過的元件將不會被顯示出來。LinearLayout 在 XML 檔內設定格式的語法使用<LinearLayout>為起始標記，</LinearLayout> 為結束標記，範例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  屬性設定 ... >
  <元件一> ... </元件一> 
  <元件二> ... </元件二>   
</LinearLayout>

LinearLayout 的屬性有很多，以下列出一些較常用的。

屬性	說明
id	指定一個識別名稱給元件，並自動在 R.java 中建立索引，透過此 id 可用來調用此元件。
orientation	設定佈局中元件的排列方式，有 Horizontal(橫向排列) 和 Vertical(直式排列)兩個選項。如果沒有指定，預設是 Vertical(直式排列)。
layout_weidth	佈局的寬度。
layout_height	佈局的高度。
gravity	控制元件所包含的子元件對齊方式，可使用「\|」組合多個對齊參數，對齊參數請參考下方列表說明。
layout_gravity	控制該元件在父容器的對齊方式。
background	為該元件設置一個背景圖片，或者是直接用顏色填滿。
divider	設定分割線，使用顏色或圖片。需要執行 showDividers，才會顯示分隔線。
showDividers	設置顯示分割線所在的位置。 none：無, beginning:開始, end 結束, middle 兩個組件間
dividerPadding	設置分割線的 padding
layout_weight	設定剩餘的空間，依 weight 設定的比例，進行分配給這個佈局內的元件。

layout_weidth 和 layout_height 除了直接指定像素或畫素設為寬和高外，還有 match_parent 和 wrap_content 這兩個常用的參數：

match_parent:元件的寬度或高度擴展到最大，但最大只能等同負層級的大小。
wrap_content:元件中的寬度與高度依據內容自動調整，而內容定義包含文字、圖片或子層級。

gravity 屬性可設定的參數有以下幾種：

gravity 設定參數	說明
TOP	將佈局內的元件置於其容器的頂部，而不更改其大小。
BOTTOM	將佈局內的元件置於其容器的底部，而不更改其大小。
CENTER	將佈局內的元件置於其容器的中央(上下左右的中間)，而不更改其大小。
CENTER_HORIZONTAL	將佈局內的元件置於其容器的水平的中央，而不更改其大小。
CENTER_VERTICAL	將佈局內的元件置於其容器的垂直的中央，而不更改其大小。
LEFT	將佈局內的元件置於其容器的左部，而不更改其大小。
RIGHT	將佈局內的元件置於其容器的右部，而不更改其大小。

以 Linear Layout 為例，在 Layout 內加上一個 textView 及一個 button，XML定義語法如下：

<?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:layout_marginTop="30sp" 
            android:orientation="vertical" >
    <TextView android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
              
            android:text="我是文字框" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10sp"
            android:text="我是按鍵" />
</LinearLayout>

執行結果如下左方圖，右方圖是 RelativeLayout 的執行範例。

[相對佈局 RelativeLayout]

相對佈局是通過相對定位的方式讓元件出現在佈局的任何位置。需要有一個元件當作參考點，元件可以是兄弟元件或是父容器，藉由參考元件的相對點來設定自身元件的位置。RelativeLayout 在 XML 檔內設定格式的語法使用<RelativeLayout>為起始標記，</RelativeLayout> 為結束標記，範例如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  屬性設定 ... >
  <元件一> ... </元件一> 
  <元件二> ... </元件二>   
</RelativeLayout>

常用的RelativeLayout 屬性，除了上述可用於佈局的屬性外，還有以下幾個屬性：

屬性	說明
id	指定一個識別名稱給元件，並自動在 R.java 中建立索引，透過此 id 可用來調用此元件。
layout_weidth	佈局的寬度。
layout_height	佈局的高度。
layout_[xxxxx]	將此元件置於"指定元件"(使用元件id指定)上下左右四個方位。 xxxx可替換為：above、below、toLeftOf及toRightOf。
layout_alignParent[xxxx]	將此元件對齊於佈局畫面上下左右邊線，屬性值為true、false。 xxxx可替換為：top、Bottom、Left及Right。
layout_margin[xxxx]	將該元件離布局畫面上邊、底邊及左右兩邊多少距離，屬性質為具體的像數值，如10dp、10px。 xxxx可替換為：top、Bottom、Left及Right。
layout_centerHorizontal	將該元件水平居中於整個佈局畫面，屬性值為true、false。
layout_centerVertical	將該元件垂直居中於整個佈局畫面，屬性值為true、false。
layout_centerInParent	將該元件水平及垂直均居中於整個佈局畫面，屬性值為true、false。

以下範例的元件要設定id，第二個元件需指定與第一個元件的相對位置，下列指定 android:layout_below="@id/iv" 設定在第一個元件 iv 的下方，執行的結果請參考上方右邊的圖。

<?xml version="1.0" encoding="utf-8"?>
>RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 正中央方框 -->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#9999ff"
        android:layout_centerInParent="true" />

    <!-- 中央方框左邊 -->
    <TextView
        android:id="@+id/tv2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toLeftOf="@id/tv1"
        android:background="#ff9900"
        android:layout_centerVertical="true"/>

    <!-- 中央方框右邊 -->
    <TextView
        android:id="@+id/tv3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toRightOf="@id/tv1"
        android:background="#00ff99"
        android:layout_centerVertical="true"/>

    <!-- 中央方框上方 -->
    <TextView
        android:id="@+id/tv4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@id/tv1"
        android:background="#ff99ff"
        android:layout_centerHorizontal="true" />

    <!-- 中央方框下方 -->
    <TextView
        android:id="@+id/tv5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/tv1"
        android:background="#ff9999"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

[框架佈局 FrameLayout]

在框架佈局中，每加入一個元件都將建立一個空白的區域，預設的情況下，這些元件會被放置在螢幕的左上角，也就是框架佈局是從螢幕的左上角（0，0）座標點開始佈局，重疊排列，後面的元件會覆蓋前面的元件。例如手錶，背景是時鐘刻度，時針、分針、秒針都重疊。FrameLayout 在 XML 檔內設定格式的語法使用<FrameLayout>為起始標記，</FrameLayout> 為結束標記，範例如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  屬性設定 ... >
  <元件一> ... </元件一> 
  <元件二> ... </元件二>   
</FrameLayout>

常用的 FrameLayout 屬性，除了上述可用於佈局的屬性外，還有以下幾個屬性：

屬性	說明
foreground	設置前景。
foregroundGravity	設置前景位置。

以下範例使用三個文字框，預設情況下，後面的元件會對齊左上角重疊顯示。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 黃色 -->
    <TextView
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:background="#ffff00" />      
    <!-- 淡藍色 -->    
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#00ffff" />
    <!-- 粉紅色 -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff00ff" />
</FrameLayout>

執行的結果畫面如下：

Android筆記(5)：使用者界面UI與Layout設計(上)

[View、ViewGroup與Layout的關係]

[線性佈局 LinearLayout]

[相對佈局 RelativeLayout]

[框架佈局 FrameLayout]

[參考資料]

Post a Comment

張貼留言

聯絡表單