Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10
Model-View-Controller Model：儲存內容 MVC Model Model-View-Controller Model：儲存內容 View：顯示介面 Controller：控制程式操作 使用者 View 要求動作 顯示內容 Controller 查詢資料 Model 提供資料
Android視窗介面 Views 按鈕元件 影像按鈕元件 單選選單元件 複選選單元件 對話視窗 …
Android視窗介面 透過main.xml佈局資源檔設計介面 透過strings.xml文字資源檔設計介面文字 理面的android:id屬性是程式與介面的連結 透過strings.xml文字資源檔設計介面文字 透過drawable圖檔資源檔設計介面圖形 透過anim.xml設計介面動畫
XML
XML eXtensible-Markup-Language data of data 由tag構成，一定要有開始與結束tag 需有root tag Well-defined 開頭： <?xml version="1.0" encoding="UTF-8" ?> 與HTML不同，並非HTML的進化
XML 原始main.xml root tag
XML 擴充後main.xml 擴充後tag 有幾個擴充後tag？
按鈕元件
按鈕元件 使用Eclipse建立新專案 Project Name=Jao Application Name=MyButton Package Name=com.android.jao Create Activity= Jao
Jao專案 1
Jao專案畫面 Button.java
設計main.xml 介面佈局資源檔 設計介面的組成元件，例如按鈕… res\layout\main.xml
設計main.xml 原始main.xml
設計main.xml 1 加入scrollview讓介面可以上下捲動 大小寫有差！
設計main.xml 代表有錯誤！ 加入button讓介面出現按鈕元件 還有 Relative layout Table layout 程式與介面的連結 android:id 屬性 代表有錯誤！ 2 加入button讓介面出現按鈕元件
android:id 介面佈局資源檔main.xml與程式的連結 格式：android:id=“@+id/名稱” @：解讀成識別符號而不是一般內容 +：新增一個id id/：識別符號被歸類在id類別下 自動在R.java中產生索引 取用方式：R.id.名稱
設計strings.xml 在strings.xml加入button_large文字對應
預覽main.xml 預覽main.xml
R.java R.Java自動加入資源
加入圖檔 加入arrow.png 確定圖檔路徑是在專案內
AndroidManifest.xml 2 更改Application的icon 1
執行程式 1
執行程式 目前只有畫面，沒有動作
加入按鈕元件處理程式 1 main.xml中的android:id屬性 2 3
按鈕元件跳頁 建立對應的畫面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
按鈕元件跳頁 建立對應的畫面sample_page.xml 2 1
按鈕元件跳頁 建立對應的畫面sample_page.xml 複製main.xml的結構
按鈕元件跳頁 建立對應的畫面sample_page.xml
按鈕元件跳頁 建立對應的程式sample_page.java 1
按鈕元件跳頁 建立對應的程式sample_page.java 2
按鈕元件跳頁 建立對應的程式sample_page.java 複製Button.java的結構
按鈕元件跳頁 建立對應的程式sample_page.java 1 2 3 4
按鈕元件跳頁 建立對應的程式sample_page.java
按鈕元件跳頁 加入從Jao.java呼叫sample_page.java 先在main.xml加入一個按鈕
按鈕元件跳頁 在Jao.java加入呼叫按鈕與程式
按鈕元件跳頁 在AndroidManifest.xml中加入Activity
執行按鈕元件跳頁 解決” Unparsed aapt error(s)! Check the console for output” 問題（如果有）
執行按鈕元件跳頁
執行按鈕元件跳頁
執行按鈕元件跳頁
執行按鈕元件跳頁
介面設計工具 DroidDraw
DroidDraw 協助進行Android程式介面設計，拖拉放方式 協助產生XML碼，再貼回main.xml等檔案就可以 網路版 單機版 http://droiddraw.org/ 單機版
DroidDraw網路版 產生xml碼 物件 版面 xml碼
DroidDraw單機版 下載單機版
DroidDraw單機版 不需要安裝，直接執行droiddraw.exe
DroidDraw單機版 物件 版面 產生xml碼
其它Views http://developer.android.com/guide/tutorials/views/index.html
BMI範例
BMI計算範例 Body Mass Index = 體重(kg)/(身高*身高)(m) 產生新專案HelloBMI 利用Droiddraw設計介面與產生xml介面檔 修改main.xml 撰寫HelloBMI.java程式 利用按鈕view計算BMI值 利用兩個TextView呈現結果
新專案HelloBMI
BMI UI Body Mass Index = 體重(kg)/(身高*身高)(m) 我們需要 兩個顯示view(TextView) 來提示填入身高體重數字 兩個輸入view(EditText)來填入身高體重數字 需要一個按鈕view(Button)來開始計算 需要一個顯示view(TextView)來顯示計算結果
輸入View <EditText > </EditText> android:id=“@+id/名稱" android:layout_width="wrap_content" android:layout_height="wrap_content“ android:numeric="true" > </EditText>
BMI UI
修改main.xml 未修改前
修改main.xml 修改後
R.java 自動產生
BMI UI執行結果
BMI程式(I) 建立按鈕事件
BMI程式(II) 取得輸入值 計算BMI 顯示BMI 顯示身體狀況
BMI範例結果
練 習 重構：將HelloBMI中的findViewById與setOnClickListener改成副程式 將字串改存入string.xml中，再在HelloBMI.java中顯示
練 習 解 答 將HelloBMI中的findViewById與setOnClickListener改成副程式
More Samples http://developer.android.com/resources/samples/index.html
對話框(Dialog) I 具備實體，會佔記憶體 結構： AlertDialog.Builder builder=new AlertDialog.Builder(專案.this); builder.setTitle(對話框標題訊息); builder.setMessage(對話框內容); builder.show(); 具備實體，會佔記憶體
對話框(Dialog) I
對話框(Dialog) I
對話框 (Dialog) II 匿名實體，不佔記憶體 結構： new AlertDialog.Builder(專案.this) .setTitle(對話框標題訊息) .setMessage(對話框內容) .show(); 匿名實體，不佔記憶體
對話框 (Dialog) II
對話框 (Dialog) II 結果相同，但不佔記憶體
對話框(Dialog)按鈕 匿名實體，不佔記憶體 結構： new AlertDialog.Builder(專案.this) .setTitle(對話框標題訊息) .setMessage(對話框內容) .setPositiveButton("確認",new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub } }) .show(); 匿名實體，不佔記憶體
對話框(Dialog)按鈕
Toast訊息框 import android.widget.Toast; Toast.makeText(專案.this, 訊息, 顯示時間).show();
Toast訊息框
Toast訊息框+try catch
練 習 加入使用者輸入0的錯誤訊息顯示 使用Try catch +Toast 顯示錯誤訊息
練 習 解 答
選 單 使用手機硬體上的MENU鍵進行呼叫顯示 建立選單 處理選項動作 onCreateOptionsMenu onOptionsItemSelected
選 單
選 單 onOptionsItemSelected onCreateOptionsMenu
選單基本結構 建立選單 onCreateOptionsMenu 處理選項動作 onOptionsItemSelected
加入選單選項 加入選項 menu.add(0, 識別符號, 0, 顯示文字)
選 單
處理選項動作 處理選項動作 onOptionsItemSelected
選 單
練 習 在”結束”選項中加入詢問對話框 對話框中有”確定”與”取消”按鈕 按下”確定”就結束程式 按下”取消”就取消結束程式的動作
選 單
練 習 解 答
選單選項加入圖示 加入選項 menu.add(0, 識別符號, 0, 顯示文字).setIcon();
選單選項加入圖示