Android Layout 佈局 (一)

關於 Android Layout 佈局

在 Android 開發中, 任何可視化的控制元件都是從android.view.View繼承而來,系統提供了 xml 文件來配置 View 的相關屬性。

幾種常見的 Layout 佈局方式

  • LinearLayout
  • RelativeLayout
  • FrameLayout
  • AbsoluteLayout
  • GridLayout
  • TableLayout

LinearLayout - 線性佈局

特點 : 又可以分為垂直和水平佈局

1
android:orientation

參數可以為 verticalhorizontal

預設為水平佈局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>

下圖所示的佈局,三個 TextView被水平擺放在一起。
example

如果 android:orientation 屬性變為 vertical
example

Layout Weight

LinearLayout 有一個特別的屬性 layout_weight ,可以根據此屬性來配置空間,它會將Layout的剩餘空間來進行weight的配置。

舉例來說 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:background="#BB0000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView3" />
</LinearLayout>

當將第一個TextView的 layout_weight 屬性設置為 1 ,他將會將剩餘的空間全部佔滿。

example

當我將 TextView2 也加入 android:layout_weight="1" 時。

example

會發現整個Layout的寬度會在扣掉剩餘的元件寬度後,那麼剩餘的空間分配給有 layout_weight 屬性的元件,由於這邊的範例兩個有設定的 weight 皆為 1

所以這邊簡單整理一下計算的方式

剩餘寬度(高度) = Layout寬度(高度) - 沒設定的元件寬度(高度)

接著 剩餘寬度(高度) 去讓有設定weight的元件均分

假設 :

TextView1 設定 android:weight="1"

TextView2 設定 android:weight="2"

TextView1佈局寬度(高度) 就會是 1/1(1+2) = 1/3 * 剩餘寬度(高度)

TextView2佈局寬度(高度) 就會是 1/1(1+2) = 2/3 * 剩餘寬度(高度)

其他屬性

  • android:layout_width : 設置元件的基本寬度,可選屬性有 match_parentwrap_content 。其中 match_parent 代表元件寬度與父元件一樣(減去padding)。
  • android:layout_heigth : 設置元件的基本高度。可選屬性與layout_width相同。