使用者介面元件佈局.

Presentation on theme: "使用者介面元件佈局."— Presentation transcript:

1 使用者介面元件佈局

2 使用者介面佈局 建立使用者介面(User Interface, UI)有以下方式: 圖形化(視覺化)操作方式 XML佈局檔編輯
Java程式撰寫 Android系統中，建立應用程式使用者介面有以下幾種方式: 圖形化(視覺化)操作方式，利用拖拉元件與屬性設定方式建立UI XML佈局檔編輯，利用Android系統訂定的標籤來組合 Java程式撰寫，利用new 方式將元件產生 此教材只針對1和2這兩種方式進行講解

3 使用者介面佈局之圖形化操作方式 5 4 3 6 1 建立專案後，使用者介面的檔案放置於專案中 res/layout/目錄下，建立專案時預設會產生activity_main.xml 佈局文件檔，使用者也可自行增加檔案，增加方式在res/layout資料夾上按滑鼠右鍵新建選取Android XML File，若找不到此選項，請點選其他在跳出視窗中瀏覽Android目錄，即可看見Android XML File，輸入檔案名稱，檔案名稱務必要遵守Java程式變數命名規則，且英文字母必須小寫，此佈局檔會自動產生資源索引在R.java檔中，程式中要取得該資源可透過: R.layout.佈局檔名稱，對應到該佈局檔，因此檔案名稱即為資源索引變數名稱 建立使用者介面的圖形化操作方式 : 1. 在佈局檔上點擊滑鼠左鍵兩下，即可在畫面右邊開啟佈局編輯畫面，。 2.下方可以選擇用圖形介面編輯(Graphical Layout)，或是使用文字編輯介面(activity_main.xml) 直接編輯使用者介面程式碼。 3.用滑鼠點下要加入到佈局文件中的元件，並不要放開滑鼠。 4.拖曳至右方的概要(Outline)視窗，即可將元件加入到佈局文件中。(也可拖入中間的手機畫面中，但不建議拖入此，因為有時系統會設定一些屬性，造成非預期的畫面產生) 5.點擊概要視窗中想要設定屬性內容的元件，在編號6的地方即會顯示該元件的屬性內容編輯畫面，可設定選取元件的屬性 Note:若概要視窗如果不存在，可以點選在畫面上方的功能表： 視窗→顯示視圖→概要 來開啟 Note:在Java程式中，請勿匯入 import android.R; 此套件是Android系統內建的資源，若匯入會造成使用者自訂的資源無法讀取，請把匯入的該行程式移除，若在程式中要使用Android內建的資源請使用android.R...開頭 2

4 使用者介面佈局之XML標記語言撰寫方式 2 1.選擇下方的文字編輯畫面(activity_main.xml)頁籤切換，可以切換到程式碼編輯畫面。 2.佈局文件編輯畫面，可以在此畫面中輸入Android定義的元件標籤語法，進行使用者介面設計 1

5 視窗佈局--XML標記語言 res/layout/中的使用者介面佈局檔
定義Android系統的資源命名空間，之後才能使用android系統所提供的佈局標籤和屬性 屬性名稱 (需用android:開頭) <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" > <EditText android:layout_height="wrap_content" android:id /> </RelativeLayout> 屬性值(要用雙引號把值框起來) 視窗佈局檔存放在 res/layout/ 資料夾底下 佈局檔標籤程式碼中必須定義Android系統的資源命名空間 xmlns:android= “ 每個標籤是用<>框住，每個標籤都有其定義的屬性，屬性寫在標籤後，用空白隔開不同屬性，沒有順序性，格式為 屬性名稱="屬性值" 每個標籤要有結尾標籤 如:</標籤> 此屬性會自動在R.java中自動產生資源索引，在Java程式中可使用R.id.代號，來對應到該元件。

6 佈局方式 設定元件(按鈕、文字框、選單等)的排列方式 LinearLayout RelativeLayout TableLayout
線性佈局 RelativeLayout 相對佈局 TableLayout 表格佈局 FrameLayout 框架佈局 GridLayout 格子佈局 Android中常用的5種佈局方式：LinearLayout(線性佈局)、RelativeLayout(相對佈局)、TableLayout(表格佈局)、FrameLayout(框架佈局)、GridLayout(格子佈局)

7 視覺化元件的繼承關係 視覺化元件的繼承/間接繼承關係如投影片所示(只畫出部分元件)，無論是佈局(LinearLayout線性佈局、TableLayout表格佈局)或是元件(如:Button按鈕、EditText輸入文字框)都是繼承View這個類別。 使用XML編輯使用者介面，其所使用的元件標籤名稱，都可對應到Java的一個類別，如<LinearLayout>標籤，可對應到android.widget.LinearLayout類別，標籤屬性可對應到類別中的相關方法 通常介面設計會使用XML標籤語言製作畫面，在Java程式中可能需要動態設定元件相關屬性時，必須透過Activity類別中的findViewById(int id)方法，依據元件資源索引值，將元件找到，因此若需要與Java程式互動的元件，需要在XML標籤語法中給予元件android:id屬性，並給定一個資源索引變數名稱，Android工具會自動將該id建立在R.java中 如: mylayout.xml XML佈局檔部分內容如下: <LinearLauout android:layout_width="match_parent" ……> …… </LinearLauout> 在Java的活動視窗Activity程式中，會呼叫setContentView(R.layout.mylayout);將使用者介面載入到活動視窗程式中，將XML定義的畫面，呈現在手機畫面上，接著就可以使用以下程式，將XML檔中定義線性佈局物件找出，並可用Java程式進行線性佈局的相關設定 LinearLayout mLayout=(LinearLayout) findViewById(R.id.layout); //findViewById()方法依據代號找出元件，是回傳View物件，View是元件的父類別，若要使用到該元件定義的方法，必須將其作轉型。

8 LinearLayout 線性佈局:將元件排列成一直線，可以水平或是垂直 標籤:< LinearLayout >，可多層LinearLayout 屬性 android:gravity (元件對齊方式，多個值用|隔開) top, bottom, left, right, center_vertical fill_vertical ,center_horizontal ,fill_horizontal center ,fill 線性佈局(LinearLayout)能夠將擺在<LinearLayout>內的各個元件依照順序以線性方式陳列出來，可設定為垂直(Vertical)或水平(Horizontal)線性方式排列。 在線性佈局中也可以再包入多層的線性佈局。 屬性： android:gravity 屬性可以設定在佈局中的元件的對齊方式，若要設定多個組合可用 | 符號分開， 可設定的值為: top(頂部), bottom(底部), left(左邊), right(右邊), center_vertical(垂直的中間), fill_vertical(垂直填滿) ,center_horizontal(水平的中間) ,fill_horizontal(水平填滿), center(正中間) ,fill(全填滿)

9 LinearLayout 屬性 android:orientation (線性方式) horizontal 水平 vertical 垂直 android:layout_width (寬度) fill_parent wrap_content 指定大小 android:layout_heigh (高度) match_parent (SDK 2.2)後 屬性： android:orientation屬性可以設定線性方式，可設定的值為: horizontal (水平 ), vertical (垂直) android:layout_width屬性可以設定線性佈局的寬度，可設定的值為: fill_parent/match_parent (SDK 2.2後) (寬度填滿上一層(父)佈局), wrap_content(根據內部元件寬度調整佈局寬度) ,指定大小(需加上尺寸單位) android:layout_heigh屬性可以設定線性佈局的高度，值設定與android:layout_width相同 Note:大部分佈局/元件都需要有android:layout_width和android:layout_heigh屬性，若無，會造成程式錯誤

10 邊界屬性 android:layout_marginBottom 佈局底部與邊界/別的元件的距離
android:layout_marginLeft 佈局左邊與邊界/別的元件的距離  android:layout_marginRight 佈局右邊與邊界/別的元件的距離  android:layout_marginTop 佈局頂部與邊界/別的元件的距離  LinearLayout margin 屬性： android:layout_marginBottom屬性可以設定此佈局底部與邊界/別的元件的距離 android:layout_marginLeft屬性可以設定此佈局左邊與邊界/別的元件的距離 android:layout_marginRight屬性可以設定此佈局右邊與邊界/別的元件的距離 android:layout_marginTop屬性可以設定此佈局頂部與邊界/別的元件的距離  以上屬性值需有單位

11 padding屬性 android:padding android:paddingBottom android:paddingLeft
設定此佈局四個邊框與內部元件的距離 android:paddingBottom 設定此佈局底部邊框與內部元件的距離 android:paddingLeft 設定此佈局左邊框與內部元件的距離 android:paddingRight 設定此佈局右邊框與內部元件的距離 android:paddingTop 設定此佈局頂部邊框與內部元件的距離 LinearLayout margin 屬性： android:padding屬性可以設定此佈局四個邊框與內部元件的距離 android:paddingBottom屬性可以此佈局底部邊框與內部元件的距離 android:paddingLeft屬性可以此佈局左邊框與內部元件的距離 android:paddingRight屬性可以此佈局右邊框與內部元件的距離 android:paddingTop屬性可以此佈局頂部邊框與內部元件的距離 以上屬性值需有單位 Button padding

12 其它屬性 android:background android:id android:minHeight android:minWidth
佈局背景圖或色彩 android:id 此佈局的代號 android:minHeight 佈局最小高度 android:minWidth 佈局最小寬度 android:visibility 設定佈局visible(顯示), invisible(隱藏但佔空間), gone(隱藏，不佔空間) android:layout_weight 佈局內元件的屬性，設定此元件在佈局中剩餘空間分配的比例 屬性： android:background屬性可以設定此佈局背景圖(Ex: ,設定佈局背景圖為res/drawable資料夾中的photo檔名的圖)或色彩(Ex:android:background="#FF0000"，設定佈局背景色彩為紅色 ) android:id屬性可以設定此佈局的id，Ex: ,為此佈局新增一個代號為add，程式中可以使用R.id.add資源索引值找到該元件；Ex: 與剛剛不同是未加+號，差異在於，前者代號是未定義過，因此系統會新建一個add資源索引值，後者是當R.id.add資源索引已存在時，可以直接將此代號設定給該元件/佈局使用 android:minHeight屬性可以設定此佈局的最小高度 android:minWidth屬性可以設定此佈局的最小寬度 android:visibility屬性可以設定此佈局的元件顯示或隱藏，可設定的值:visible(顯示), invisible(隱藏但佔空間), gone(隱藏，不佔空間) android:layout_weight屬性為佈局內元件的屬性，可以設定此元件在佈局中剩餘空間分配的比例。預設為0，佈局有剩餘空間不分配給此元件屬性設定為0的元件，剩餘空間會分配給非0的元件，數值越大分配越多。 如:垂直線性佈局內有3個元件，此屬性值依序設定為:0,1,2，表示此佈局若有垂直方向剩餘空間，會將剩餘空間分成3(0+1+2)等份，第一個元件分配到0/3=0無空間，第二個元件分配到剩餘空間的1/3，最後一個元件分配到剩餘空間的2/3

13 android:orientation="horizontal"
範例 <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background= > <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" /> <Button android:text="Button01" </LinearLayout> android:orientation="horizontal" EditText Button 範例程式碼中，在垂直線性佈局中加入一個EditText與一個Button元件，呈現如投影片上圖 若要呈現投影片下圖，只需將android:orientation設定為horizontal EditText Button

14 使用LinearLayout如何做?? <LinearLayout
android:orientation="vertical"> </LinearLayout> EditText Button <LinearLayout android:orientation="horizontal"> </LinearLayout> EditText Button EditText Button <LinearLayout android:orientation="horizontal"> </LinearLayout> 1.左邊手機畫面中需排列2*2個元件，若只用一個線性水平排版只能將四個按鈕由左到右排成一列，若要垂直線性排版也只能將四個按鈕由上到下排列，因此需要利用多個線性排版進行組合 2.首先先在最外層放置垂直線性排版 3.再在垂直線性排版中放置兩個水平線性排版 4.最後在內部水平線性排版中分別放入兩個元件 Eclipse操作方式於下一張投影片介紹 EditText Button

15 將文字元件刪除 2 刪除 1.在專案中瀏覽至res/layout 資料夾， 在此範例使用專案預設的activity_main.xml，在activity_main.xml 檔案上雙擊，接著eclipse 畫面的右邊就會開啟文件佈局的設定視窗，而文件佈局視窗下方的分頁選項可以在文字編輯介面(activity_main.xml頁籤) 與圖形化的介面(Graphical Layout 頁籤) 間切換，在eclipse 最右邊上方有概要視窗，會呈現佈局的階層架構，在概要視窗下方有屬性視窗，此屬性視窗會隨使用者點選不同元件而不同。 2. 在中間手機畫面視窗中或是概要視窗中選取Hello World 的TextView元件，按滑鼠右鍵→刪除，或是直接按鍵盤上的Delete 按鍵，將此元件刪除。 1

16 將根節點的佈局方式改為垂直線性佈局 3 4 3. 將最外層的相對佈局改為線性佈局，由於此元件為根元件( 每個XML檔案皆需有一個根元件)，請勿將其刪除，在概要視窗中選取RelativeLayout，按滑鼠右鍵，在選單中選取Change Layout 4. 跳出視窗，在New Layout Type 選單中選取LinearLayout(Vertical)，點選確定。

17 5 6 5. 選取概要視窗中的LinearLayout
6. 在屬性視窗中，找到Orientation，點選右邊，可改變線性佈局作垂直Vertical或水平Horizontal排列 Note:使用者也可使用XML文字編輯介面進行畫面編排，撰寫XML標標語法時，可使用Alt+/輔助按鍵。 此輔助按鍵可使用在XML檔案編輯，也可使用在Java程式中，會將開頭一致的元件、佈局(程式類別、方法)等列出，使用者可透過點選方式進行輸入，在XML編輯檔中使用Alt+/輔助按鍵，有時大小寫需一致才會列出。 XML檔與Java程式都會區分大小寫，因此開發者最好借助Alt+/輔助，進行程式輸入

18 8 7 7.滑鼠點下水平線性排版(不要將滑鼠放開) 8.將其拖到概要視窗中的垂直線性排版中 重複步驟7~8再將一個水平線性排版拖入
Note:拖入元件時，會出現+號表示可放置於此，若出現禁止符號則無法將元件置放於此處

19 9 9.點選Text Fields 標籤資料夾 10.滑鼠點下想要使用的EditText類型(不要將滑鼠放開)
11 9 10 9.點選Text Fields 標籤資料夾 10.滑鼠點下想要使用的EditText類型(不要將滑鼠放開) 11.將其拖到概要視窗中的水平線性排版中

20 重複 9.10.11.12.13.14步驟，將兩個元件加入到第二個水平線性佈局中
12.點選Forms Widgets標籤資料夾 13.滑鼠點下Button(不要將滑鼠放開) 14.將其拖到概要視窗中的水平線性排版中 重複 步驟，將兩個元件加入到第二個水平線性佈局中 Note:若拖放位置或排列順序錯誤時，可以在概要視窗中，選取元件，按滑鼠右鍵，選單中有Move Up, Move Down可調整順序位置，刪除:可將元件刪除，也可進行元件複製和貼上、屬性設定。

21 完成後的XML檔案內容 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" android:layout_width=“fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <EditText android1:layout_width="wrap_content" android:layout_height="wrap_content" > <requestFocus /> </EditText> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> <EditText android:layout_height=“wrap_content” > <requestFocus /> </EditText> <Button android:layout_width="wrap_content" 完成的XML佈局檔原始程式碼，可以看到是由一個垂直的線性佈局<LinearLayout >中，包含了兩個分別包含有<EditText>與<Button>的水平線性佈局<LinearLayout >。

22 RelativeLayout 相對佈局:可指定元件/佈局相對於任一個元件/佈局的位置 屬性
android:layout_marginBottom android:layout_marginLeft android:layout_marginRight android:layout_marginTop android:layout_width android:layout_heigh … 相對佈局內的元件的呈現方式是依據元件/佈局設定相對的目標元件的相對位置做排列。 屬性： android:layout_marginBottom android:layout_marginLeft android:layout_marginRight android:layout_marginTop android:layout_width android:layout_heigh … 與線性佈局(LinearLayout)相同，請參考線性佈局中的說明

23 RelativeLayout佈局內的元件屬性
這邊都是RelativeLayout佈局內的元件屬性，跟整個佈局的關係，值為:true / false android:layout_alignParentRight 設定此元件右邊線與佈局右邊線是否對齊   android:layout_alignParentTop 設定此元件頂部邊線與佈局頂部邊線是否對齊 android:layout_alignParentBottom 設定此元件底部邊線與佈局底部邊線是否對齊 android:layout_alignParentLeft 設定此元件左邊線與佈局左邊線是否對齊  android:layout_centerHorizontal 設定此元件是否放置於佈局的水平置中 android:layout_centerInParent 設定此元件是否放置於佈局的正中間 android:layout_centerVertical 設定此元件是否放置於佈局的垂直置中 此投影片屬性是需寫在相對佈局內的元件上 相對佈局內的元件屬性：(以下屬性可設定的值: true, false) android:layout_alignParentRight屬性是設定此元件右邊線與佈局右邊線是否對齊   android:layout_alignParentTop屬性是設定此元件頂部邊線與佈局頂部邊線是否對齊 android:layout_alignParentBottom屬性是設定此元件底部邊線與佈局底部邊線是否對齊 android:layout_alignParentLeft屬性是設定此元件左邊線與佈局左邊線是否對齊 android:layout_centerHorizontal屬性是設定此元件是否放置於佈局的水平置中 android:layout_centerInParent屬性是設定此元件是否放置於佈局的正中間 android:layout_centerVertical屬性是設定此元件是否放置於佈局的垂直置中

24 RelativeLayout佈局內的元件屬性
此類屬性的值需設定為某個元件的ID android:layout_above:設定此元件擺放於此屬性值設定的元件上方 android:layout_below :設定此元件擺放於此屬性值設定的元件下方 android:layout_toLeftOf :設定此元件擺放於此屬性值設定的元件左方  android:layout_toRightOf :設定此元件擺放於此屬性值設定的元件右方 此投影片屬性是需寫在相對佈局內的元件上 相對佈局內的元件屬性：(以下屬性的值需設定為某個元件的ID) android:layout_above屬性是設定此元件擺放於此屬性值設定的元件上方 android:layout_below屬性是設定此元件擺放於此屬性值設定的元件下方 android:layout_toLeftOf屬性是設定此元件擺放於此屬性值設定的元件左方 android:layout_toRightOf屬性是設定此元件擺放於此屬性值設定的元件右方 相對元件ID:edit

25 RelativeLayout佈局內的元件屬性
此類屬性的值需設定為某個元件的ID android:layout_alignBaseline:設定此元件基準線與此屬性值設定的元件基準線對齊 android:layout_alignLeft:設定此元件的左邊線與此屬性值設定的元件左邊線對齊 android:layout_alignRight:設定此元件的右邊線與此屬性值設定的元件右邊線對齊 相對元件ID:edit 此投影片屬性是需寫在相對佈局內的元件上 相對佈局內的元件屬性：(以下屬性的值需設定為某個元件的ID) android:layout_alignBaseline屬性是設定此元件基準線與此屬性值設定的元件基準線對齊 android:layout_alignLeft屬性是設定此元件的左邊線與此屬性值設定的元件左邊線對齊 android:layout_alignRight屬性是設定此元件的右邊線與此屬性值設定的元件右邊線對齊

26 RelativeLayout佈局內的元件屬性
此類屬性的值需設定為某個元件的ID android:layout_alignBottom:設定此元件底部邊線與此屬性值設定的元件底部邊線對齊 android:layout_alignTop:設定此元件頂部邊線與此屬性值設定的元件頂部邊線對齊 相對元件ID:edit 此投影片屬性是需寫在相對佈局內的元件上 相對佈局內的元件屬性：(以下屬性的值需設定為某個元件的ID) android:layout_alignBottom屬性是設定此元件底部邊線與此屬性值設定的元件底部邊線對齊 android:layout_alignTop屬性是設定此元件頂部邊線與此屬性值設定的元件頂部邊線對齊

27 使用RelativeLayout如何做?? <RelativeLayout> </RelativeLayout>
EditText <EditText android:layout_alignParentTop="true" /> Button Button <Button android:layout_alignParentRight="true" /> 2.將一個Button放入相對佈局中，代號設定為Bt1 Eclipse操作方式於下一張投影片介紹 <Button

28 刪除 2 1 建立專案，打開res/layout資料夾中的佈局檔，預設佈局方式就是相對佈局。
在中間手機畫面視窗中或是概要視窗中選取Hello World 的TextView元件，按滑鼠右鍵→刪除，或是直接按鍵盤上的Delete 按鍵，將此元件刪除。 1

29 5 3 4 3. 點選Text Fields資料夾 4.滑鼠點下任一種Text Fields中的元件 (不要將滑鼠放開)
5. 將其拖到概要視窗中的相對佈局上，放開 (Note:也可以拖曳到中間的手機畫面中，但會加上一些屬性設定，可能造成非使用者預期結果)

30 6 8 7 6.點擊概要視窗中的EditText元件，下方會開啟屬性/內容視窗
7.將Align Parent Top 設定為true (勾選)，Width設定為match_parent 或fill_parent 8.用同樣方式將Form Widgets中的兩個Button拖入到概要視窗中的相對佈局上

31 9 10 9. 點擊button1開啟屬性/內容視窗 10. 將Align Parent Right勾選(true)，點選Below右邊的選擇按鈕，會跳出一個視窗，展開ID，選擇editText1

32 11.同樣方式點擊button2開啟屬性/內容視窗
12 11.同樣方式點擊button2開啟屬性/內容視窗 12. 點選Below右邊的選擇按鈕，會跳出一個視窗，展開ID，選擇editText1，再點選To Left Of右邊的選擇按鈕，會跳出一個視窗，展開ID，選擇button1 完成!

33 TableLayout 表格佈局:將元件/佈局擺放成表格樣式 標籤:<TableLayout> 屬性
android:collapseColumns 隱藏指定行號的元件 android:collapseColumns= "0,2"  android:shrinkColumns 縮小指定行號的元件，以符合佈局大小 android:shrinkColumns= "0,2" 1 2 3 4 5 6 7 8 2 4 6 8 表格佈局可以讓內部元件如表格方式排列 TableLayout屬性：(以下屬性的值需設定哪幾行，從0開始，多個用,號隔開，全部用*號表示) android:collapseColumns屬性是設定哪幾行要隱藏不顯示 android:shrinkColumns屬性是設定縮小哪幾行，以符合佈局大小。 2 4 5 6 2 4 5 6

34 TableLayout 屬性 android:stretchColumns 延伸指定行號以填滿剩餘的佈局空間
111111 2 333333 4 5 6 TableLayout屬性：(以下屬性的值需設定哪幾行，從0開始，多個用,號隔開，全部用*號表示) android:stretchColumns屬性是設定要延伸哪幾行，以填滿剩餘的佈局空間。 111111 2 333333 4 5 6

35 TableLayout -- <TableRow>
若<TableRow>外面無TableLayout標籤，TableRow就如同水平的LinearLayout方式 <TableRow>用來標記表格佈局中的一列元件 <TableLayout> </TableLayout> <TableRow>標籤中設定 layout_width和layout_height都沒作用，強迫設定為wrap_content <TableRow> </TableRow> EditText EditText EditText <TableRow>是用來標記一列的元件，若<TableRow>外面無TableLayout標籤，TableRow就如同水平的LinearLayout方式 <TableRow>標籤中的 layout_width和layout_height屬性設定無效，會被強迫設定為wrap_content TableRow裡面的元件不需指定layout_width和layout_height會強迫他們為match_parent(與同行中的最寬元件一樣寬)和wrap_content <TableRow> </TableRow> EditText EditText EditText TableRow裡面的元件不需指定layout_width和layout_height會強迫他們為match_parent和wrap_content

36 TableLayout -- <TableRow>
android:layout_column 標記此欄位在表格中的第幾格(從0開始) 這是TableRow內的元件屬性 <TableLayout> </TableLayout> <TableRow> </TableRow> 若TableLayout中的元件不包含在TableRow中，則此元件自成一列 TableRow內的元件屬性： android:layout_column屬性是用來標記此欄位在此列中的第幾格 (從0開始) <EditText android:layout_column=“0”/> <EditText android:layout_column=“1”/> <EditText android:layout_column=“2”/>

37 TableLayout -- <TableRow>
android:layout_span :設定此元件要橫跨的格數 (包含本身格子計數) 這是TableRow內的元件屬性 <TableLayout> </TableLayout> <TableRow> </TableRow> <EditText android:layout_column=“0”/> <EditText android:layout_column=“1”/> <EditText android:layout_column=“2”/> TableRow內的元件屬性： android:layout_span屬性是用來設定此元件要橫跨幾個格子數(包含自身的格子一併計數)，讓元件可以一次佔據多個格子 <TableRow> </TableRow> <EditText android:layout_span =“2”/> <EditText />

38 使用TableLayout如何做?? EditText Button Button Button
<TableLayout android:stretchColumns="*"> </TableLayout> EditText Button <TableRow > /TableRow> <EditText 　　android:layout_span="2" /> Button Button <Button /> <TableRow > </TableRow> 在表格佈局中先放入<TableRow>一列標籤，並在此TableRow中放入1個EditText元件並設定此元件橫跨兩個格子(android:layout_span="2")和1個Button元件 再在表格佈局中先放入<TableRow>一列標籤，並在此TableRow中放入2個Button元件並分別標記第一個按鈕是第二行元件(android:layout_column="1")，第二個按鈕是第三行(android:layout_column="2")第二個按鈕可以不設定，會自動排在第三行 最後設定TableLayout 將剩餘空間分配給每行(android:stretchColumns="*") Eclipse操作方式於下一張投影片介紹 <Button android:layout_column="1" /> <Button android:layout_column="2" />

39 3 4 5 6 2 1. 建立專案，打開res/layout資料夾中的佈局檔，首先在中間手機畫面視窗中或是概要視窗中選取Hello World 的TextView元件，按滑鼠右鍵→刪除，或是直接按鍵盤上的Delete 按鍵，將此元件刪除。 接著將最外層的相對佈局改為表格佈局，由於此元件為根元件( 每個XML檔案皆需有一個根元件)，請勿將其刪除，在概要視窗中選取RelativeLayout，按滑鼠右鍵，在選單中選取Change Layout，跳出視窗，在New Layout Type 選單中選取TableLayout，點選確定。 2. 滑鼠點下Layouts資料夾中的TableRow元件 (不要將滑鼠放開) 3. 將其拖到概要視窗中的TableLayout上，放開 重複2,3步驟，再拖入一個TableRow元件 4.在tableRow1拖入一個EditText和一個Button(操作方式在前面線性佈局/相對佈局的投影片中有) 5.在tableRow2拖入兩個Button 6.點選概要視窗中的TableLayout，在底下屬性/內容視窗中，將Stretch Columns的值設定為* 1

40 android:stretchColumns="*" > <TableRow>
<TableLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="*" > <TableRow> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:inputType=“numberSigned” android:layout_span="2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </TableRow> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:layout_column="1" /> <Button android:layout_width="wrap_content" </TableLayout> 7 切換到XML編輯頁面 7. 將EditText標籤中加入android:layout_span="2" 屬性，讓此元件橫跨兩個格子 8.將第二個TableRow中的第一個Button，加入android:layout_column="1"屬性，讓此元件排列到第二行 完成! Note:在此使用XML編輯的原因在於圖形化操作介面中的屬性/內容視窗，並無此屬性可供設定，由於Android的圖形化操作介面仍在開發階段，仍有許多問題，若無法用圖形化操作(或將元件拖入，發生頁面無法顯現)，建議使用者使用XML編輯頁面，直接撰寫 8

41 FrameLayout 框架佈局，單一元件的佈局方式，可容納多個元件，元件會一個個疊在佈局上 標籤:<FrameLayout>
通常用於處理畫面元件層疊時 如:照相機軟體開啟時，畫面上有多個按鈕層疊在影 像上 或是搭配TabWidget來製作分頁視窗 會將所有在<FrameLayout>中的元件一個個疊在佈局上 通常用於處理畫面元件層疊時，如:照相機軟體開啟時，畫面上有多個按鈕層疊在影像上 或是搭配TabWidget來製作分頁視窗

42 2 1 建立專案，打開res/layout資料夾中的佈局檔，將佈局內的元件都刪除，將根結點改為框架佈局(FrameLayout)
拖入EditText和Button元件到概要視窗中的FrameLayout上 中間畫面可預覽效果，可見到兩個元件是層疊上去 可以在FrameLayout內的元件上加入android:layout_gravity屬性，設定元件在佈局中的位置，如:上、下、左、右… 1

43 GridLayout 類似TableLayout + LinearLayout 屬性 android:columnCount
設定行數 android:rowCount 設定列數 android:orientation 自動排列方式(vertical, horizontal) 預設佈局內之元件自動排列方式為水平，達到android:columnCount設定個數時，再往下一列排列 行 列 GridLayout(格子佈局)擁有TableLayout 與LinearLayout的混和特性。 GridLayout屬性： android:columnCount屬性是設定行數 android:rowCount屬性是設定最大列數 android:orientation屬性是設定自動排列方式(vertical, horizontal)預設此佈局內之元件自動排列方式為水平，達到android:columnCount設定個數時，再往下一列排列 若設定為vertical，佈局內元件會由上到下排列，達到android:rowCount設定個數時，再往下一行繼續排列佈局內元件

44 android:orientation="horizontal"
範例 <GridLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:columnCount="4" android:rowCount="4" > <Button android:text="1,1" /> <Button android:text="1,2" /> <Button android:text="1,3" /> <Button android:text="1,4" /> <Button android:text="2,1" /> <Button android:text="2,2" /> <Button android:text="2,3"/> <Button android:text="2,4" /> <Button android:text="3,1" /> <Button android:text="3,2" /> <Button android:text="3,3 longer" /> <Button android:text="3,4" /> <Button android:text="aaa" /> </GridLayout> 1 2 建立專案，打開res/layout資料夾中的佈局檔，將佈局內的元件都刪除，將根結點改為格子佈局(GridLayout) 將GridLayout的android:orientation="vertical"屬性，設定依序將佈局內元件以垂直方向排列，設定android:columnCount="4" android:rowCount="4" 將13個Button拖入到概要視窗中的GridLayout上，並將13個Button的屬性/內容視窗中的Text設定如投影片的標號。 畫面呈現結果如投影片的上圖 3. 將GridLayout的android:orientation="vertical"改為android:orientation="horizontal" 畫面呈現結果如投影片的下圖 android:orientation="horizontal" 2

45 GridLayout內的元件屬性 android:layout_column android:layout_row
設定元件在第幾行(從0開始) android:layout_row 設定元件在第幾列(從0開始) android:layout_gravity 設定元件在格子內的對齊方式 top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal, start, end 指定layout_column的值勿超過columnCount-1、 layout_row的值勿超過rowCount-1 GridLayout內的元件屬性： android:layout_column屬性是設定元件在第幾行(從0開始) android:layout_row屬性是設定元件在第幾列(從0開始) android:layout_gravity屬性是設定元件在格子內對齊方式，可設定的值: top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal, start, end

46 範例 <GridLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:columnCount="4" android:rowCount="4" > <Button android:text="1,1" /> <Button android:text="1,2" /> <Button android:text="1,3" android:layout_gravity="center"/> <Button android:text="1,4" /> <Button android:text="2,1" /> <Button android:text="2,2" android:layout_row="2"/> <Button android:text="2,3" android:layout_gravity="fill_horizontal"/> <Button android:text="2,4" /> <Button android:text="3,1" /> <Button android:text="3,2" /> <Button android:text="3,3 longer" /> <Button android:text="3,4" android:layout_column="1"/> <Button android:text="aaa" /> </GridLayout> 此範例與上一個相同，只針對部分Button進行屬性設定，請依照投影片將屬性加入，可使用圖形化操作介面設定按鈕屬性。 由顯示結果可發現 1. 按鈕(1,3)由於屬性設定android:layout_gravity="center"，會放置於格子的中間 2. 按鈕(2,2)由於屬性設定android:layout_row="2"，表示要放在第三列，行號則由於放置(2,1)時為第1行，放置下一個應該在第二行，因此會將(2,2)按鈕放置於第三列第二行的位置，後面按鈕則繼續依據行列號遞增安排元件 3. 按鈕(2,3)由於屬性設定android:layout_gravity="fill_horizontal"，會將元件擴展填滿格子水平方向空間 4. 按鈕(3,4)由於屬性設定android:layout_column="1"，表示要放在第2行，但第四列的第2行格子已排列一個元件，因此會排到下一列的第2行的格子

47 GridLayout內的元件屬性 android:layout_rowSpan android:layout_columnSpan
設定垂直擴展格子數 android:layout_columnSpan 設定水平擴展格子數 這邊都是GridLayout內的元件屬性 GridLayout內的元件屬性： android:layout_rowSpan屬性是設定垂直擴展格子數 android:layout_columnSpan屬性是設定水平擴展格子數

48 範例 <GridLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="horizontal" android:columnCount="4" android:rowCount="4" > <Button android:text="1,1" /> <Button android:text="1,2" android:layout_rowSpan="3" android:layout_gravity="fill_vertical" /> <Button android:text="1,3" /> <Button android:text="1,4" /> <Button android:text="2,1" /> <Button android:text="2,3"/> <Button android:text="2,4" /> <Button android:text="3,1" /> <Button android:text="3,3 longer" android:layout_columnSpan="2" /> <Button android:text="3,4" /> <Button android:text="aaa" /> </GridLayout> 請依照投影片將屬性加入，可使用圖形化操作介面設定按鈕屬性。 由顯示結果可發現 1. 按鈕(1,2)由於屬性設定android:layout_rowSpan="3"，會往下延伸2個格子，設定android:layout_gravity="fill_vertical"，將元件往垂直方向擴展以佔滿整個格子高度，後面按鈕則繼續依據行列安排元件，遇到被佔住的格子則跳過，如按鈕(2,3) 2. 按鈕(3,3)由於屬性設定android:layout_columnSpan="2"，會往右延伸1個格子