從無到有-實戰Android系統開發-系統分析(10)

最後，我們要做的Prototyping，就是進行一般設定及顯示關於的動作。一進入一般設定的畫面，就先列出目前可以進行一般設定的選項列表。如圖22所示。目前可以設定資料庫及語系等基本功能。
在資料庫選項，可以決定是否要將資料庫的檔案儲存在SD卡中。在語系方面可以進行繁體中文及英文，二種語系的轉換。


圖22

回到系統一開始進入的畫面，按下手機上的「menu」按鈕時，會出現「帳戶結餘」、「設定」、「關於」等選項。按下「關於」功能畫面，就會顯示出系統的相關資訊，例如：版本、作者、網站等資訊。如圖23所示。


圖23

從無到有-實戰Android系統開發-系統分析(9)

接下來，我們要做的Prototyping，就是進行設定歸屬項目的動作。一進入歸屬項目的畫面，就先列出所有的歸屬列表。如圖20所示。
要編輯或刪除某個選項，就長按住某個選項，就會出現「編輯及刪除」的選項視窗。按下「建立新歸屬」按鈕，可以進入新增歸屬畫面。如圖21所示。


圖20


在新增歸屬畫面，可以進行歸屬名稱的輸入，如圖21所示。最後再按下「儲存」按鈕來儲存資料到資料庫中，也可以按下「取消」。回到上一層項目。


圖21

從無到有-實戰Android系統開發-系統分析(8)

接下來，我們要做的Prototyping，就是進行設定帳戶項目的動作。一進入帳戶項目的畫面，就先依資產、負債的區別來列出所屬的帳戶列表，是以資產區別為預設。如圖18所示。
要編輯或刪除某個選項，就長按住某個選項，就會出現「編輯及刪除」的選項視窗。按下「新增資產(負債)」按鈕，可以進入新增帳戶畫面。如圖19所示。


圖18


在新增帳戶畫面，可以進行帳戶名稱、開啟帳戶金額設定的輸入，如圖19所示。而開啟帳戶金額的設定是為了讓使用者可以設定此帳戶目前可以使用的金額。


圖19

從無到有-實戰Android系統開發-系統分析(7)

接下來，我們要做的Prototyping，就是進行設定類別項目的動作。一進入類別項目的畫面，就先依支出、收人的區別來列出所屬的類別列表，是以支出區別為預設。如圖16所示。
要編輯或刪除某個選項，就長按住某個選項，就會出現「編輯及刪除」的選項視窗。按下「新增新支出(收入)」按鈕，可以進入新增類別畫面。如圖17所示。


圖16


在新增類別畫面，可以進行類別名稱、此類別預算的輸入，以及是否要判斷使用預算的勾選項目，如圖17所示。是否要判斷使用預算，是讓使用者可以設定此類別預算金額。如果在新增記帳項目時，如果此類別總計的金額超過的話，會提示使用者。

圖17

從無到有-實戰Android系統開發-系統分析(6)

下一步，我們要做的Prototyping，就是進行設定資料的動作。一進入設定資料的畫面，就有三個選項列表，分別是類別設定、帳戶設定、歸屬設定等選項。如圖15所示。

可以依據使用者目前想要設定那方面的資料，再點選進入。

圖15

從無到有-實戰Android系統開發-系統分析(5)

下一步，我們要做的Prototyping，就是統計帳戶餘額的動作。一進入帳戶餘額的畫面，就會依資產、負債所屬的帳戶來統計目前小計資料，也會計算所有帳戶的總計資料。
可以在「帳戶」按鈕選取一個單一的帳戶，會將此帳戶記錄的明細資料顯示列表出來。如圖14所示。

圖14

從無到有-實戰Android系統開發-系統分析(4)

下一步，我們要做的Prototyping，就是新增記帳項目時，會顯現出來的畫面。主要的功能為，列出今日記帳記錄，計算金額，輸入主題、備註，選擇日期、類別、帳戶、歸屬等選項，如圖10所示。
分成三個區塊，在最上面是計算金額，輸入主題、備註，選擇日期、類別、帳戶、歸屬等選項。
在第二區塊，會顯示出今日記帳記錄。而第三區塊就是進行「儲存」、「取消」等功能運作。

圖10

下述畫面為在計算金額，選擇日期、類別、帳戶、歸屬等選項時，會顯示出的Prototyping。在按下「計算」按鈕時，就會顯示出一個類似計算機的畫面，有0到9的數字及加、減、乘、除等按鈕，可以進行金額的計算。再按下「=」按鈕，將結果帶回原新增記帳項目畫面。如圖11所示。

圖11

在選取記帳日期時，會預設先帶出今天日期在中間的按鈕，可以按「+」或「-」按鈕來增加或減少一天來設定記帳日期，也可以直接按下中間的按鈕，會顯示出選取日期畫面，如圖12所示。

圖12

在選擇類別、帳戶、歸屬等選項時，可以直接按下按鈕就會顯示出此功能可以選取的項目列表。如圖13所示。

圖13

從無到有-實戰Android系統開發-系統分析(3)

系統介面：
Android GUI介面設計。
首先，要做的Prototyping，就是進入系統時，會顯現出來的畫面。主要的功能為列出資料、查詢資料、新增資料，如圖8所示。


分成四個區塊，在最上面是選取查詢條件(有帳戶、記帳日期區塊等條件)的區塊，點選「帳戶」圖示，會出現單選的列表畫面，選取任何一個。可以再選取記帳日期區塊，會先顯示統計出查詢條件的支出總金額。


而選取的條件資料，會顯示在第二區塊，讓使用者知道目前的查詢條件。而第三區塊就是依查詢條件列出符合的列表資料，一進入系統，會先列出今天的所有記帳資料。最下面的區塊是「新增記帳項目」的按鈕。功能畫面，後續再描述。

圖8

還有，在按下手機上的「menu」按鈕時，會出現「帳戶結餘」、「設定」、「關於」等選項。如圖9所示。功能畫面，後續再描述。



圖9

從無到有-實戰Android系統開發-系統分析(2)

根據系統架構圖，我們就可以依需求分析的功能及假想一下系統的操作介面，就是先做出一個Prototyping，給客戶確認一下，是不是可以符合客戶的需求。而做Prototyping，可以在白板、圖紙上直接畫出來。

不過，現在的電腦科技發達，也可以用Microsoft Visio來畫草圖，在網路上搜尋有關這方面的資訊。我們找到一個在Visio上有關Android GUI的樣板。請參考網站(http://www.artfulbits.com/Android/Stencil.aspx)，去下載可在Visio上使用的樣板檔案。到時候就可以利用Visio進行Android GUI Prototyping。下載前需要填寫個人資料,該網站就會寄下載地址到你的e-mail ，以便進行檔案下載。

後續有關設計的畫面，全部都是用Visio來拉的。來表現出此工具的便利性。此工具也預計在2.0的版本，增加匯出成XML檔案的功能。

順便，介紹一個方便的小工具DroidDraw，是一個可以讓我們在設計Android介面的好工具，在Eclipse的開發介面沒有提供類似其他開發工具那樣，可以直接拖曳物件的功能，所以，有人就用Java寫了類似的工具，幫助Android的開發人員可以比較直覺的方式來拖曳物件，完成Android的介面。

首先，在連到DroidDraw的網頁(參考網址如下：http://www.droiddraw.org/ )，就會直接出現可以編輯的畫面，如圖6所示。在編輯畫面，可以先設定畫面的層次及螢幕的尺寸。可以選取的選項，如下所述：

Root Layout(畫面層次)：Absolute Layout、Linear Layout、Relative Layout、Scroll View、Table Layout

Screen Size(螢幕尺寸)：QVGA Land scape、QVGA Portrait、HVGA Land scape、HVGA Portrait


圖6

可以拖曳物件到編輯畫面上，再選取要編輯的物件，在右上方的視窗，切換到Properties(屬性頁籤)來設定此物件的屬性。編輯好介面後，在右下方，按下「Generate」按鈕來產生對應的XML內容，如圖7所示。
下一步就可以將這個XML內容選取後，複製到Eclipse的介面XML檔案。





圖7

從無到有-實戰Android系統開發-系統分析(1)

系統分析-如何由系統運作的流程分析出系統介面及功能。

根據需求分析出來的結果，歸納出系統的功能列表及系統介面的架構，如圖5所示。

系統功能列表：

記帳系統
記帳資訊列表：將今日所有記帳項目列表(預設)或是
將符合查詢條件的記帳項目列表，可以進行記
帳項目的修改、刪除。
新增記帳項目：新增一個記帳項目，可以輸入金額、
日期、主題、類別、帳戶、所屬、備註等資訊
，再新增到資料庫中。
帳戶結餘：列出所有帳戶結餘。
設定：類別、帳戶、所屬項目設定。
關於：顯示出系統資訊(版本、作者、介紹網址)。

系統架構圖：

圖5