android studio - Layout版面配置

Android Layout : 負責各種元件在畫面上的顯示位置

定義在android.widget package(套件)

常見Layout : LinearLayout、RelativeLayout、TableLayout等

名稱	Layout配置方式
LinearLayout	線性版面配置
RelativeLayout	相對位置版面配置
TableLayout	表格版面配置

注意 : android:layout_width、android:layout_height通常是用來控制UI元件與Layout元件(Parent元件)之間的寬度與高度關係

LinearLayout(線性版面配置) : 將UI元件排列成一直線

android.widget.LinearLayout :

android:layout_width = “控制UI元件顯示畫面的寬度”

android:layout_height = “控制UI元件顯示畫面的高度”

1.Android 2.2之後，fill_parent之外新增match_parent，兩者意義相同

2.match_parent : 填滿所在上層元件

3.wrap_parent : 僅填滿資料內容本身

4.自訂方式 例如 : 10sp或10dp

android:layout_weight=”相對比例數字” 設定畫面顯示相對比例

android:background=”#xxxxxx” : 設定UI元件背景顏色其中xxxxxx為16進位數字

android:orientation=”顯示元件方向”

1.horizontal : 由左至右放置

2.vertical : 由上至下放置

EX :

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”vertical”>

<TextView

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”XXX”  />

<EditText

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”XXX”  />

</LinearLayout>

RelativeLayout (相對位置版面配置) : 以元件相對位置放置，以id作為相對位置的判斷依據

android.widget.RelativeLayout :

android:layout_width = “控制UI元件顯示畫面的寬度”

android:layout_height = “控制UI元件顯示畫面的高度”

1.Android 2.2之後，fill_parent之外新增match_parent，兩者意義相同

2.match_parent : 填滿所在上層元件

3.wrap_parent : 僅填滿資料內容本身

4.自訂方式 例如 : 10sp或10dp

android:background=”#xxxxxx” : 設定UI元件背景顏色其中xxxxxx為16進位數字

android:layout_centerInParent=”true” : 顯示元件在畫面正中央

android:layout_centerHorizontal=”true” : 顯示元件在畫面水平方向中央位置

android:layout_centerVertical=”true” : 顯示元件在畫面垂直方向中央位置

EX:

<RelativeLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”>

<TextView

android:id=”@+id/top”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_centerInParent=”true”

android:background=”#ff0000”

android:text=”XXX”  />

<EditText

android:id=”@+id/middle”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_centerHorizontal=”true”

android:background=”#00ff00”

android:layout_below=”@id/top”

android:text=”XXX”  />

</RelativeLayout>

TableLayout (表格版面配置) : 以表格方式放置元件

android.widget.TableLayout :

android:layout_width = “控制UI元件顯示畫面的寬度”

android:layout_height = “控制UI元件顯示畫面的高度”

1.Android 2.2之後，fill_parent之外新增match_parent，兩者意義相同

2.match_parent : 填滿所在上層元件

3.wrap_parent : 僅填滿資料內容本身

4.自訂方式 例如 : 10sp或10dp

android:background=”#xxxxxx” : 設定UI元件背景顏色其中xxxxxx為16進位數字

android:stretchColumns=”0,1,2” : 設置元件畫面延展顯示

TableRow : 標示一列，寬度為填滿TableLayout

EX:

<TableLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:stretchColumns=”0.1”>

<TableRow>

<TextView

android:background=”#ff0000”

android:text=”XXX”  />

<TextView

android:background=”#ff0000”

android:text=”XXX”  />

</TableRow>

<TableRow>

<TextView

android:background=”#ff0000”

android:text=”XXX”  />

<TextView

android:background=”#ff0000”

android:text=”XXX”  />

</TableRow>

</TableLayout>