iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Mobile Development

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

EP 27: MockData come back with UI design in TopStore App

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

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

上一篇 EP26 談到把 MockData 跟 DbService 透過 IDbService 的介面來完成做展示資料與實際資料作切換,不知是否有朋友想知道如何運用結合在 App 的實際操作上呢?

本篇 EP27 就來介紹介紹囉!


首先,來打開 SettingsPage.xaml 來編輯一下相關的 XAML 標記。
SettingsPage 的編輯 1

改成一個 Grid 為頁面的 RootLayout,並在 Grid 第一列設計 Frame 於其中顯示。
SettingsPage 的編輯 2

接著放了一個 Switch 並且將其 x:Name 命名為 dataChoiceSwitch,也針對其 Toggled 事件設定了其事件處理常式。
SettingsPage 的編輯 2

另外,再針對 Frame 的標記當中設計部分畫面格式的標記。
SettingsPage 的編輯 4

在其 Frame 的標記中所使用的 Label 文字顯示,有運用到先前 EP12EP17 等,介紹 XAML 標記的有關 Binding(繫結) 的特殊處理的部分。

其用意是讓 Label 的文字顯示上能呼應使用者在 switch 的 "開/關" 操作時,讓其顯示的文字更加準確,若有興趣的捧友可以再回顧一下唷!

這裡稍微注意一下,前面的 XAML 編輯中有設定 Switch 的 Toggled 事件的事件處理常式,所以理論上在 SettingPage.xaml.cs 要看到這個事件處理常式的撰寫。
SettingsPage.xaml.cs 的編輯 1

再針對 SettingsPage 覆寫其 OnAppearing 方法。
SettingsPage.xaml.cs 的編輯 2

首先針對 OnAppearing 方法撰寫如下程式。
SettingsPage.xaml.cs 的 OnAppearing 方法

再針對先前的 DataSwitch_Toggled 的事件處理常式撰寫如下程式。
SettingsPage.xaml.cs 的 DataSwitch_Toggled 方法 1

而因為 DisplayAlert 是非同步方法,所以要再加上 async/await 的關鍵字的運用。
SettingsPage.xaml.cs 的 DataSwitch_Toggled 方法 2

最後,打開 App.xaml.cs 將原本 App 建構式當中的程式改成如下。
App.xaml.cs 的編輯

接下來就可以在雙平台 (iOS、Android) 當中執行看看!

第一次執行起 App 時由於 Preferences 記錄上的值會為 "false",所以會讀取到原本 MockData 設計的假資料。
MockData 的顯示

在 App 當中切換到 SettingsPage。
切換到 SettingPage

將其中的 switch 作切換到 ""。
切換到 switch

點選 "確定",進行切換 Data 來源。(若點選取消,會回到原本的設定)
切換 Data 來源

Alert 提醒使用者需 "手動" 重新啟動 App。
手動重新啟動 App

將 App 從背景執行中移除。
背景移除執行中的 App

再次啟動 App 回到 SQLite DB 的資料載入到 App 當中。(在 EP26 中所建立的資料)
SQLite DB 的資料載入到 App 當中

這樣 EP27 的介紹就大功告成囉~~~

有興趣的朋友,可以在 App 中再切到 SettingsPage 當中把 swtich 的設定改回 "關",然後再次重新開啟 App (記得也要把 App 從背景執行移除)。

再次打開 App 就會看到 MockData 的資料又載入回來囉!

下一篇 EP28 見囉!

嘛砂優枷~~~


上一篇
EP 26: MockData come back by (a little bit) DI design
下一篇
EP 28: Shell Routing for TopStore App
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32

尚未有邦友留言

立即登入留言