從無到有-實戰Android系統開發-程式實戰(3)-使用者介面(User Interface)

使用者介面(User Interface)不好意思，最近公司比較忙。所以，在更新文章上，比較慢一些。預計，四月份會正常更新，請大家多多指教。

接下來，當我們順利的開啟一個新的專案後，接著就是要設計使用者介面了。首先，在Eclipse的平台上，打開「Memo」專案中的「res/layout/main.xml」檔案，就會先看到目前檔案的預覽畫面(就是在Layout預設的頁標籤)，如圖26所示。
接著我們來切換到另一個main.xml的頁標籤來看XML格式的文件，如圖27所示。

圖26

在Android平台上，使用者介面都是透過「View Group」或「View」類別來顯示。有關「View Group」或「View」類別，可以參考http://developer.android.com/guide/tutorials/views/index.html 的範例及說明。
Android提供非常豐富而多樣的介面元件，主要可以分成二種類型：
l 版面配置類型(例如：各種不同的Layout、Tab、List等)：如圖26上面的Layouts當中的元件。也可以參考表10，對於比較常用到的版面配置，進行說明的動作。在後續的章節中，會陸續應用到。

l 顯示介面類型(例如：文字框、按鈕、輸入欄位等)：如圖26上面的Views當中的元件。也可以參考表11，對於比較常用到的元件，一個一個的說明。在後續的章節中，會陸續應用到。






在Eclipse上，如圖26的畫面，目前，可以從Views或Layouts的視窗中，拖曳元件，拉到預覽畫面。而可以直接來設計介面。切換到「main.xml」的頁標籤來看XML格式的文件內容，如圖27所示。

基本上，就跟XML元素一樣，有開始的「<」符號就有結束的「>」符號。例如：一個文字顯示的元件在XML標籤表示方式為，包含在裡面的資料就是它的屬性設定，例如：
在設定寬度時，用到的屬性是：android:layout_width="fill_parent"
設定高度時，用到的屬性是：android:layout_height="wrap_content"
設定文字內容時，用到的屬性是：android:text="@string/hello"
等屬性的設定。


圖27

Tip 1：在Eclipse平台，選取選單「Source」中的「Format」選項，可以整理main.xml檔案裡面的XML資料。

Tips 1

從無到有-實戰Android系統開發-程式實戰(2)-專案架構(Project Files)

首先，我們就先由如何建立一個新的程式專案，來說明一下Android程式專案架構，進入Eclipse平台，選取選單「File」中的「New」選項，再選取「Android Project」的專案。就會出現新增Android專案的畫面，如圖24所示。

我們將新專案名稱命名為 Memo。 在「Contents」欄位裡，我們選擇「Create new project in workspace」(在工作區域中建立新專案)。所以欄位依預設值來設定即可。

不過，有一些欄位，是必須由使用者來輸入。請參考如圖7所示。我們要建立一個Memo的專案，可以依圖8的設定值來輸入。

專案輸入欄位，說明如下：


Memo專案，要輸入的欄位值如下：



圖24

填好所有的資料後，再按下「Finish」 按鈕，就建立好一個新的專案了。 請注意 Package Name 的設定，必須至少由兩個部分所構成。

「Create Activity」是指定用來產生預設 java 程式碼的文件名稱，與程式碼中預設 Activity 類別 (class) 的名稱。最好是依照 java 語言的命名習慣，將「Create Activity」採用開頭大寫的形式來命名即可。

回到 Eclipse 的主要畫面，我們會發現Eclipse會自動幫我們建立在 Package Explorer 視窗中的Memo目錄。如圖25所示。


圖25

而預設的目錄架構說明，請參考表9所示：

深入淺出Android程式設計(30)-結言

深入淺出Android程式設計的系列文章，就告一段落了。發表這一系列的文章。可以說明從Android的基礎說明到初步的開發流程。

而進階的程式設計及介面上的討論，我是會在下一個系列的文章，再跟各位來進行討論。而下一個系列的文章就是「從無到有-實戰Android系統開發」，就是從一個簡單的記帳系統為例子，來跟大家分享如何從使用者的需求進行分析、設計系統的介面、資料庫的分析、撰寫程式要注意的重點等系統開發的過程。

從無到有-實戰Android系統開發-程式實戰(1)-前言(Foreword)

程式實戰-如何由系統分析出來流程，來進行程式的撰寫過程，要提出重要的地方來說明分析。

經過需求分析、系統分析、系統設計等步驟，我們已經將系統的藍圖建構出來了，而在這個章節，我們要做的就是撰寫程式，將我們設計的系統實體化出來。不過，由於如果要將一個系統的程式碼一步一步的說明，就太多了。所以，我們在後續的章節會說明幾個重要的地方即可。依Android從程式撰寫到如何發佈到Android Market上，我們分成27個章節來說明，依下述描述所示：

預計範例為一個簡單的記事本系統，主要有一個記事列表畫面、編輯記事畫面。在下述的系統需求描述中，()中的項目編號，就是可以應用到的範圍。

在記事列表畫面(14)，為主畫面。
選單為「系統設定」、「關於」。(5)
「系統設定」(12)為分類編輯、選取語系(13)、是否要訊息提醒、
設定要由前十、十五、三十分鐘等時間來提醒。
「關於」為出現系統訊息。(4)

在日期、時間到達前十、十五、三十分鐘，出現訊息提醒。(9)
列表時，長時間按住某一列時，會自動出現「編輯」、「刪除」等功能。(6)

在編輯記事畫面(14)，可以選取日期(4)、時間(4)、屬於那個分類(15、16)、輸入記事內容。

新增時，新開一個Activity。(7)
編輯時，新開一個Activity，並且帶入一個key值，來查詢資料。(8)

1、2、3、11等章節為說明Android檔案結構及基礎程式邏輯。
10等章節 程式碼撰寫規範try catch。

1. 了解Android程式專案架構
2. 如何設計使用者介面
3. 了解Android基礎程式邏輯架構
4. 如何加入對話框(Dialog)
5. 如何加入選單(Menu)
6. 如何加入快捷選單(Context Menu)
7. 如何加入新的視窗(Activity)
8. 如何傳送資料到新視窗(Intent)
9. 如何使用到訊息提醒(Notification)
10. 如何設定記錄及Debug Log訊息(配合try catch機制)
11. 了解什麼是Activity的Life Cycle
12. 如何設定偏好資料(Preference)
13. 如何支援多國語系
14. 如何指定Android螢幕方向(直式、橫式顯示、自動切換)
15. 了解何謂Adapter(接口機制)
16. 如何加入下拉選單元件(Spinner)

上述範例，先以假想資料來操作。在17-19的章節。會儲存資料到資料庫。

17. 如何建立SQLite資料庫、資料表
18. 如何存取SQLite資料庫，透過SQLiteOpenHelper類別
19. 如何新增、刪除、更新資料

上述範例，可以儲存到資料庫後，在編輯記事時，增加地標欄位，可以先預設目前的地標。
在記事列表，增加可以頁標籤，可以切換成地圖模式，顯示在地圖有那些地方有記事。

20. 如何使用Google地圖的服務
21. 如何使用Map View
22. 如何加入按鍵控制(Key Event)
23. 如何取得現在位置(GPS/基地台三角定位)
24. 如何結合地圖及定位功能(My Location Overlay)
25. 如何在地圖上標上地標(Itemized Overlay)

完成上述功能，再發佈到Android Market上。

26. 如何產生應用程式的keys (使用key tools)
27. 如何發佈到Android Market

從無到有-實戰Android系統開發-系統設計(5)-記帳系統

接下來就是次要的所屬資料表，是要將記帳項目是屬於那個所屬的資料，記錄起來，才可以進行查詢、分析等進階功能的應用。設定這些欄位主要是依「從無到有-實戰Android系統開發-系統分析(9)」的新增所屬項目的系統畫面來分析。而有如表5的欄位分析。


表5

最後，是系統相關項目資料的設定，是要將有關系統方面的資料記錄起來，才可以進行系統方面的應用。設定這些欄位主要是依「從無到有-實戰Android系統開發-系統分析(10)」的系統畫面來分析。而有如表6的欄位分析。


表6

從無到有-實戰Android系統開發-系統設計(4)-記帳系統

接下來就是次要的類別資料表，是要將記帳項目是屬於那個類別的資料，記錄起來，才可以進行查詢、分析等進階功能的應用。設定這些欄位主要是依「從無到有-實戰Android系統開發-系統分析(7)」的新增類別項目的系統畫面來分析。而有如表3的欄位分析。



表3

接下來就是次要的帳戶資料表，是要將記帳項目是屬於那個帳戶的資料，記錄起來，才可以進行查詢、分析等進階功能的應用。設定這些欄位主要是依「從無到有-實戰Android系統開發-系統分析(8)」的新增帳戶項目的系統畫面來分析。而有如表4的欄位分析。



表4

從無到有-實戰Android系統開發-系統設計(3)-記帳系統

首先，我們依資料庫模型的分析，列出如表1所示的所有資料表及相關的說明。記帳項目資料表為主要的資料表，而跟它有關連的是三個次要的資料表，分別是類別、帳戶、所屬等資料表。
最後一個資料表是系統設定資料表，是用來設定系統相關的設定，例如：版本、資料庫路徑等欄位。



表1

首先，我們先來看主要的資料表，是要將記帳項目的資料，記錄起來，才可以進行查詢、分析等進階功能的應用。設定這些欄位主要是依「從無到有-實戰Android系統開發-系統分析(4)」的新增記帳項目的系統畫面來分析。而有如表2的欄位分析。



表2