Layout 版面配置管理

1. Layout版面配置管理 鄧姚文 http://www.ywdeng.idv.tw

2. 大綱 為什麼需要 Layout ？ Layout 的種類 如何設定 Layout ? 常用控制項與事件簡介

3. 為什麼需要 Layout ？ 每一支手機的螢幕大小幾乎都不一樣！ 程式執行時，最好能夠自動配合螢幕大小作調整 讓控制項出現在螢幕上正確的位置

4. Layout 的種類 • 五種主要的 Layout • 線性 LinearLayout • 表格 TableLayout • 相對 RelativeLayout • 框架 FrameLayout • 座標 AbsoluteLayout • 使用光碟範例前，先以 Android SDK Tools 裡的 SDK Manager 建立一個 Android 2.1 版的 AVD

5. Linear Layout 線性佈局 • 線性版面配置 • 擺放控制項的方式： • Horizontal 水平：由左向右依序擺放 • Vertical 垂直：由上而下依序擺放 • See Sample_2_1

6. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" <!--定義了一個線性版面配置，方式是垂直的--> android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="上" /> <!-- 在線性版面配置中新增一個普通按鈕控制項--> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" > <!--在線性版面配置中新增一個水平的線性版面配置--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="左下"/> <!-- 向水平的線性版面配置中新增一個普通按鈕控制項--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="右下"/> <!-- 向水平的線性版面配置中新增一個普通按鈕控制項--> </LinearLayout> </LinearLayout>

7. Linear Layout 線性佈局

8. Table Layout 表格佈局 • 表格式版面配置 • 擺放控制項的方式： • 橫向 Row（列）：TableRow控制項 • 縱向 Column（欄）：在 TableRow裡面加入的每一個控制項形成一欄 • 以 android:gravity標示 TableRow裡的欄如何對齊 • See Sample_2_2

9. <TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextViewandroid:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="示範 TableLayout" /> <TableRowandroid:gravity="center"> <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第0欄" android:layout_gravity="center"> </TextView> <TextViewandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第1欄" android:layout_gravity="center"> </TextView> </TableRow> <TableRowandroid:gravity="center"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕2" /> </TableRow> <TableRowandroid:gravity="center"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕4" /> </TableRow> </TableLayout>

10. Table Layout 表格佈局 TableRow Columns

11. Relative Layout 相對佈局 • 以相對位置的方式控制版面配置 • 擺放控制項的方式： • 參照其他控制項，設定該控制項的位置 • 參照對象可以是父控制項（Parent）也可以是其他的子控制項（Child） • See Sample_2_3

13. Frame Layout 框架版面配置 • 把畫面當作一個框 • 所有的控制項的左上角座標都和外框的左上角座標相同 • 所有的控制項都疊在一起 • See Sample_2_4

15. Absolute Layout 座標版面配置 • 絕對版面配置 • 以 X Y 座標的絕對值設定控制項的位置 • See Sample_2_5 • 自 1.5 版之後， AbsoluteLayout已經廢止不再支援 • 建議改用FrameLayout或RelativeLayout

17. 常用控制項 TextView顯示文字（輸出） ImageView顯示圖片（輸出） CheckBox複選（輸入） RadioButton單選（輸入） Button 按鈕（輸入） ImageButton以圖片作為按鈕（輸入） EditText可編輯的文字（輸入） ToggleButton有狀態的按鈕

18. 常用控制項 AnalogClock有時針的時鐘 DigitalClock數位時鐘

19. 事件處理 • onClick() • 來自 View.OnClickListener • 觸發時機 • 使用者碰觸控制項（觸控模式） • 以瀏覽鍵或軌跡球將焦點移動到控制項上，按下Enter

20. 事件處理 • onLongClick() • 來自 View.OnLongClickListener • 觸發時機 • 使用者碰觸控制項（觸控模式）並且壓著不放 • 以瀏覽鍵或軌跡球將焦點移動到控制項上，按下Enter不放（超過一秒）

21. 事件處理 • onFocusChange() • 來自 View.OnFocusChangeListener • 觸發時機 • 控制項獲得輸入焦點時 • 控制項失去輸入焦點時

22. 事件處理 • onTouch() • 來自 View.OnTouchListener • 觸發時機 • 使用者在物件上壓一下（press）、放開（release）、在螢幕上做出移動的手勢（movement gesture）

23. 事件處理 • onCreateContextMenu() • 來自 View.OnCreateContextMenuListener • 觸發時機 • 選單彈出前 • Long Click 使選單彈出

24. Sample_2_6

25. 練習：登入畫面 設計一個登入畫面，要求使用者輸入帳號密碼 如果帳號與密碼的內容相同則顯示『～歡迎光臨～』，否則要求使用者再試一次 總共只能夠試3次，密碼錯誤超過3次，把文字方塊和按鈕全部鎖住，顯示『錯誤超過3次，請稍後再來！』 輸入密碼的欄位必須標示為 android:password以免密碼在輸入時顯示在畫面上