Presentation is loading. Please wait.

Presentation is loading. Please wait.

Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2

Similar presentations


Presentation on theme: "Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2"— Presentation transcript:

1 Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2

2 Android介面設計 全部都透過XML檔案來決定 res/layout內 Activity內透過setContentView來設定

3 Model-View-Controller Model:儲存內容
MVC Model Model-View-Controller Model:儲存內容 View:顯示介面 Controller:控制程式操作 使用者 View 要求動作 顯示內容 Controller 查詢資料 Model 提供資料

4 Android視窗介面 Views 按鈕元件 影像按鈕元件 單選選單元件 複選選單元件 對話視窗 …

5 Android視窗介面 透過main.xml佈局資源檔設計介面 透過strings.xml文字資源檔設計介面文字
裡面的android:id屬性設定UI名稱 是程式與介面的連結點 透過strings.xml文字資源檔設計介面文字 透過drawable圖檔資源檔設計介面圖形 透過anim.xml設計介面動畫

6 XML

7 XML eXtensible-Markup-Language data of data 由tag構成,一定要有開始與結束tag
需有root tag Well-defined 開頭:   <?xml version="1.0" encoding="UTF-8" ?> 與HTML不同,並非HTML的進化

8 XML 原始main.xml XML表頭定義 root tag 一定要有 一定有名稱空間xmlns

9 XML 擴充後main.xml 擴充後tag 有幾個擴充後tag?

10 多國語言

11 多國語言 main.xml不動 使用規定語法的strings.xml目錄 只要Android上使用的語言更改,就會自動顯示對應的文字
繁體中文:values-zh-rTW 簡體中文: values-zh-rCN 日文:values-ja 英式英文:values-en-rUK 美式英文:values-en-rUS 只要Android上使用的語言更改,就會自動顯示對應的文字

12 多國語言 依據規定建立各語言的目錄與strings.xml檔案 修改顯示文字

13 多國語言 手機上切換語言 執行時顯示文字就會自動替換

14 介面佈局 Layout

15 View Hierarchy

16 Layout LinearLayout RelativeLayout TableLayout 將View以水平或垂直方式做線性排列
像建立表格般安排View/ViewGroup 的位置

17 LinearLayout

18 LinearLayout

19 RelativeLayout

20 RelativeLayout

21 TableLayout

22 介面檢視工具 Hierarchy View

23 Hierarchy View 要先啟動AVD SDK:hierarchyviewer

24 Hierarchy View 點兩下可預覽

25 介面設計工具 DroidDraw

26 DroidDraw 協助進行Android程式介面設計,拖拉放方式 協助產生XML碼,再貼回main.xml等檔案就可以 網路版 單機版
單機版

27 DroidDraw網路版 產生xml碼 物件 版面 xml碼

28 DroidDraw單機版 下載單機版

29 DroidDraw單機版 不需要安裝,直接執行droiddraw.exe

30 DroidDraw單機版 物件 版面 產生xml碼

31 其它Views

32 按鈕

33 按鈕View 使用Eclipse建立新專案 Project Name=Jao Application Name=MyButton
Package Name=com.android.jao Create Activity= Jao

34 Jao專案畫面

35 設計main.xml 介面佈局資源檔 設計介面的組成元件,例如按鈕… res\layout\main.xml

36 設計main.xml 原始main.xml

37 設計main.xml 1 加入scrollview讓介面可以上下捲動 大小寫有差!

38 設計main.xml 代表有錯誤! 加入button讓介面出現按鈕元件 還有 Relative layout Table layout
程式與介面的連結 android:id 屬性 代表有錯誤! 2 加入button讓介面出現按鈕元件

39 android:id 介面佈局資源檔main.xml與程式的連結 格式:android:id=“@+id/名稱”
@:解讀成識別符號而不是一般內容 +:新增一個id id/:識別符號被歸類在id類別下 自動在R.java中產生索引 取用方式:R.id.名稱

40 設計strings.xml 在strings.xml加入button_large文字對應

41 預覽main.xml 預覽main.xml

42 R.java R.Java自動加入資源

43 加入圖檔 加入arrow.png 確定圖檔路徑是在專案內

44 AndroidManifest.xml 2 更改Application的icon 1

45 執行程式 1

46 執行程式 目前只有畫面,沒有動作

47 加入按鈕處理程式 1 main.xml中的android:id屬性 2 3

48 按鈕跳頁 建立對應的畫面sample_page.xml 建立對應的程式sample_page.java
res/layout/sample_page.xml 建立對應的程式sample_page.java src/com.example.android.button/ sample_page.java 在AndroidManiFest.xml中加入Activity

49 按鈕跳頁 建立對應的畫面sample_page.xml 2 1

50 按鈕View跳頁 建立對應的畫面sample_page.xml 複製main.xml的結構

51 按鈕跳頁 建立對應的畫面sample_page.xml

52 按鈕跳頁 建立對應的程式sample_page.java 1

53 按鈕跳頁 建立對應的程式sample_page.java 2

54 按鈕跳頁 建立對應的程式sample_page.java 複製Button.java的結構

55 按鈕跳頁 建立對應的程式sample_page.java 1 2 3 4

56 按鈕跳頁 建立對應的程式sample_page.java

57 按鈕跳頁 加入從Jao.java呼叫sample_page.java 先在main.xml加入一個按鈕

58 按鈕跳頁 在Jao.java加入呼叫按鈕與程式

59 按鈕跳頁 在AndroidManifest.xml中加入Activity

60 執行按鈕跳頁 解決” Unparsed aapt error(s)! Check the console for output” 問題(如果有)

61 執行按鈕跳頁

62 執行按鈕跳頁

63 執行按鈕跳頁

64 執行按鈕跳頁

65 跳畫面但不換Activity 只換Layout
main main1 Java 只有1份

66 BMI範例

67 BMI計算範例 Body Mass Index = 體重(kg)/(身高*身高)(m) 產生新專案HelloBMI
利用Droiddraw設計介面與產生xml介面檔 修改main.xml 撰寫HelloBMI.java程式 利用按鈕view計算BMI值 利用兩個TextView呈現結果

68 BMI UI Body Mass Index = 體重(kg)/(身高*身高)(m) 我們需要
兩個顯示view(TextView) 來提示填入身高體重數字 兩個輸入view(EditText)來填入身高體重數字 需要一個按鈕view(Button)來開始計算 需要兩個顯示view(TextView)來顯示計算結果

69 輸入View <EditText </EditText> android:id=“@+id/名稱"
android:layout_width="wrap_content" android:layout_height="wrap_content“ android:numeric="true”> </EditText>

70 BMI UI

71 修改main.xml 未修改前

72 修改main.xml 修改後

73 R.java 自動產生

74 BMI UI執行結果

75 BMI程式(I) 建立按鈕事件

76 BMI程式(II) 取得輸入值 計算BMI 顯示BMI 顯示身體狀況

77 BMI範例結果

78 練 習 重構:將HelloBMI中的findViewById與setOnClickListener改成副程式
將字串改存入string.xml中,再在HelloBMI.java中顯示

79 練 習 解 答 將HelloBMI中的findViewById與setOnClickListener改成副程式

80 More Samples

81 對話框(Dialog) I 具備實體,會佔記憶體 結構:
AlertDialog.Builder builder=new AlertDialog.Builder(專案.this); builder.setTitle(對話框標題訊息); builder.setMessage(對話框內容); builder.show(); 具備實體,會佔記憶體

82 對話框(Dialog) I

83 對話框(Dialog) I

84 對話框 (Dialog) II 匿名實體,不佔記憶體 結構: new AlertDialog.Builder(專案.this)
.setTitle(對話框標題訊息) .setMessage(對話框內容) .show(); 匿名實體,不佔記憶體

85 對話框 (Dialog) II

86 對話框 (Dialog) II 結果相同,但不佔記憶體

87 對話框(Dialog)按鈕 匿名實體,不佔記憶體 結構: new AlertDialog.Builder(專案.this)
.setTitle(對話框標題訊息) .setMessage(對話框內容) .setPositiveButton("確認",new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }) .show(); 匿名實體,不佔記憶體

88 對話框(Dialog)按鈕

89 Toast訊息框 import android.widget.Toast;
Toast.makeText(專案.this, 訊息, 顯示時間).show();

90 Toast訊息框

91 Toast訊息框+try catch

92 練 習 加入使用者輸入0的錯誤訊息顯示 使用Try catch +Toast 顯示錯誤訊息

93 練 習 解 答

94 選 單 使用手機硬體上的MENU鍵進行呼叫顯示 建立選單 處理選項動作 onCreateOptionsMenu
onOptionsItemSelected

95 選 單

96 選 單 onOptionsItemSelected onCreateOptionsMenu

97 選單基本結構 建立選單 onCreateOptionsMenu 處理選項動作 onOptionsItemSelected

98 加入選單選項 加入選項(群組id,i項目id,順序,名稱) menu.add(0, 識別符號, 0, 顯示文字)
menu.add(0, MENU_ABOUT, 0, "關於BMI").setIcon(android.R.drawable.ic_menu_help); menu.add(0, MENU_QUIT, 0, "結束BMI").setIcon(android.R.drawable.ic_menu_close_clear_cancel);

99 選 單

100 處理選項動作 處理選項動作 onOptionsItemSelected

101 protected static final int MENU_ABOUT=Menu.FIRST;
protected static final int MENU_QUIT=Menu.FIRST+1; @Override public boolean onCreateOptionsMenu(Menu menu) { // TODO Auto-generated method stub menu.add(0, MENU_ABOUT, 0, "關於BMI").setIcon(android.R.drawable.ic_menu_help); menu.add(0, MENU_QUIT, 0, "結束BMI").setIcon(android.R.drawable.ic_menu_close_clear_cancel); return super.onCreateOptionsMenu(menu); } public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()){ case MENU_ABOUT: break; case MENU_QUIT: return super.onOptionsItemSelected(item);

102 選 單

103 練 習 在”結束”選項中加入詢問對話框 對話框中有”確定”與”取消”按鈕 按下”確定”就結束程式 按下”取消”就取消結束程式的動作

104 選 單

105 練 習 解 答

106 選單選項加入圖示 加入選項 menu.add(0, 識別符號, 0, 顯示文字).setIcon();

107 選單選項加入圖示

108 控制螢幕方向 預設是可以隨著手機方向旋轉而旋轉 可以在AndroidManiFest.xml中設定不旋轉(很多Game APP就是這樣做)
<activity android:name="Main" android:screenOrientation="portrait"></activity> landscape:橫向 portrait:直向

109 設計隨螢幕旋轉與大小無關的UI 多使用DashboardLayout UI裡面也有include功能 請參考

110 動態Layout

111 result

112 answer


Download ppt "Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2"

Similar presentations


Ads by Google