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 一定有名稱空間xmlns

XML 擴充後main.xml 擴充後tag 有幾個擴充後tag？

多國語言

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

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

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

介面佈局 Layout

View Hierarchy

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

LinearLayout

LinearLayout

RelativeLayout

RelativeLayout

TableLayout

介面檢視工具 Hierarchy View

Hierarchy View 要先啟動AVD

Hierarchy View 點兩下可預覽

介面設計工具 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

按鈕View

按鈕View 使用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

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

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

按鈕View跳頁 建立對應的畫面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

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

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

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

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

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

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

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

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

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

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

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

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

執行按鈕View跳頁

執行按鈕View跳頁

執行按鈕View跳頁

執行按鈕View跳頁

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();

選單選項加入圖示