1 / 25

Layout 版面配置管理

Layout 版面配置管理. 鄧姚文 http://www.ywdeng.idv.tw. 大綱. 為什麼需要 Layout ？ Layout 的種類 如何設定 Layout ? 常用控制項與事件簡介. 為什麼需要 Layout ？. 每一支手機的螢幕大小幾乎都不一樣！ 程式執行時，最好能夠自動配合螢幕大小作調整 讓控制項出現在螢幕上正確的位置. Layout 的種類. 五種主要的 Layout 線性 LinearLayout 表格 TableLayout 相對 RelativeLayout 框架 FrameLayout

kevork
Télécharger la présentation

Layout 版面配置管理

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

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

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

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

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

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

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

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

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

  21. Sample_2_6

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

More Related