iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 13

EP 13

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP13。

在前一篇 EP12 當中,我們已經將當無論是以何種方式轉跳進入 PersonDetailPage 時所需要的 UI 變化處理完成了,但在最後也提到要在 PersonDetailPage 新增聯絡人資料的部分看似好像已經沒問題;但是檢視某筆聯絡人資料,然後再進行變更時會發生資料面上的處理問題。

最主要是先前在 EP10 當中 Models 裡的 Person 類別當中設計了 Id 屬性,並且在 MockData 的 People 資料產生的時候也賦予了 Id 值。

才有辦法繼續完成在 EP11、EP12 當中所介紹的效果。

但由於這個 Id 值的產生,是透過我們所設計前 MockData 處理而來的,思考的問題點就會是要注意在,當我們未來加入 SQLite 去處理資料的使用時,應該會是如何運用 SQLite 的設計。

那 MockData 就要盡可能的有類似運作設計,以便利我們當要轉換到 SQLite 的時候。

好囉,廢話不多說 EP13 就此開始囉~~~


首先,來打開 Utilities 資料夾底下的 MockData 這個類別,並且在此當中增加三個方法(這裡有預先 using 引用了 System.Linq 的命名空間)。

MockData 針對 People 資料的修正處理

所以當 MockData 當中設計了 GetPerson、NewPerson、EditPerson 這三個方法之後,我們來打開 PersonDetailPageViewModel 來作一些程式的編修。

透過呼叫 MockData 的 GetPerson 方法,取代先前轉寫的 Linq 找尋; 用呼叫 NewPerson 方法,取代之前直接 new Person();
PersonDetailPageViewModel 使用 GetPerson 與 NewPerson

透過呼叫 MockData 的 EditPerson 方法取代先前直接 People.Add(EditPerson
),並且加入對於 UI 互動上更有幫助的程式設計。
PersonDetailPageViewModel 使用 EditPerson 並修改 Alert 的顯示效果

所以 PersonDetailPage 對於 "新增" 聯絡人的部分,我們就透過下面的操作畫面,確認一下結果吧!

首先是 "新增" 聯絡人。
Android:
PersonDetailPage 新增聯絡人資料

iOS:
PersonDetailPage 新增聯絡人資料

到目前為止,雖然我們已經能針對 MockData 當中的 People 進行資料的 "檢視"、"新增"、"修改",但對於 "修改" 的資料顯示上好像還怪怪的...

因為我們對於 Person 類別的設計並沒有實作成 NotifyPropety,所以再次打開 Models 資料夾底下的 Person 類別,並且針對需要有 UI 與資料變更的屬性來完成 NotifyPropety 相關的實作。

Person 類別設計 NotifyPropety

再來是 "修改" 聯絡人。

Android:
PersonDetailPage 修改聯絡人資料-Android

iOS:
PersonDetailPage 修改聯絡人資料-iOS

可能會有朋友疑問在 MockData 設計的 EditPerson 方法當中只有呼叫 People.Add(person) 的部分,為何在 "修改" 功能上就會成功。

別忘了,我們的 EditPerson 會在 GetPerson 的時候把找到的物件取出,交給 PersonDetailPageViewModel 的 EditPerson 屬性的指派。

所以後續在變更的時候都是利用原本的物件參考直接變更 在 MockData 的 People 集合中的物件資訊。

好的,本 EP13 的介紹就到這邊,我們已經能針對 MockData 當中的 People 進行資料的 "檢視"、"新增"、"修改",並且在聯絡人與聯絡人詳細資訊的畫面上呈現正常,再下一篇 EP14 中,就要再來繼續介紹 "刪除" 的功能囉~~~

祝觀賞本篇的各位:
中秋佳節月圓人團圓,處處賞月地地佳情。

鼓的掰!^_<


上一篇
EP 12
下一篇
EP 14
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore31

尚未有邦友留言

立即登入留言