iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Mobile Development

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

EP 28: Shell Routing for TopStore App

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

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

EP3EP4 的時候介紹利用 Shell 的 Tabbar 功能來完成此 TopStore App 複刻的 UI 布局規劃。

雖然當時 UI 介面做出來了,而且一直使用至今也沒啥太大問題,但為了整個 App 在轉跳的 Route (路由)上有其一致性,讓未來若有 UI 介面有擴增需求時,可以透過一致性的 Route (路由)作轉跳處理!

本篇 EP28 就來介紹一下 App 當中要規劃的 Route (路由)處理囉!


首先,先做個實驗驗證一下 Shell 的 Route (路由)狀態。

打開 App.xamal.cs 並在 OnStart 方法當中加入如下程式。
Shell 的路由狀態實驗 1

接著選擇雙平台任一個平台,執行偵錯看看 Visual Studio 的 "輸出" 窗格。

在 App 當中切換不同頁面時會顯示此時 Shell 紀錄的 Route (路由)狀態。
Shell 的路由狀態實驗 2-1

Shell 的路由狀態實驗 2-2

Shell 的路由狀態實驗 2-3

Shell 的路由狀態實驗 2-4

Shell 的路由狀態實驗 2-5

由此可知 Shell 的 Route (路由)狀態,若未指定時會隨機產生其 Route (路由),並啟動轉跳到該頁面。

所以實務上,如果採用 Shell 來規劃 App 的 UI 畫面與布局,應該要設定其 Route (路由)規劃,以防日後要透過 "程式" 的方式指定轉跳頁面時會發生問題。

那就來打開 AppShell.xaml 來修正一下當初設計的 Tabbar 當中的 ShellContent 且設定其 Route (路由)吧!

設定 Route (路由)前。
修正 ShellContent 的 Route - 設定前

設定 Route (路由)後。
修正 ShellContent 的 Route - 設定後

再同樣的選擇雙平台任一平台,執行偵錯看看 Visual Studio 的 "輸出" 窗格。

在各頁面間切換時就會看到其 Route (路由)是固定的了。
設定 Route 後的結果

最後別忘記 PersonDetailPage 當初是在 AppShell 的建構式當中,動態(程式)註冊路由的頁面,以及當初 PeoplePageViewModel 的轉跳進入 PersonDetailPage 的路由程式修正。

打開 AppShell.xmal 找到當初的 Route (路由)註冊,修正到 People 底下。
AppShell 的建構式當中的路由修正

打開 PeoplePageViewModel.cs 找到設計 AddCommand 跟 EditCommand 撰寫轉跳進入 PersonDetailPage 部分,進行路由修正。
PeoplePageViewModel 轉跳進入 PersonDetailPage 的路由程式修正

目前 TopStore App 的 Route (路由)與其對應設計的頁面狀態會是如下結構:

TopStore App
            |- People (由 PeoplePage 來顯示)
            |         |- PersonDetail (由 PersonDetailPage 來顯示)
            |- Goods (由 GoodsPage 來顯示)
            |- Orders (由 OrdersPage 來顯示)
            |- Settings (由 SettingsPage 來顯示)

以上完成 EP28 的介紹囉~~~

下篇 EP29 再見唷!!!

搭拉阿咧~~~


上一篇
EP 27: MockData come back with UI design in TopStore App
下一篇
EP 29: Archive and Publish TopStore App for Android in Visual Studio
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32

尚未有邦友留言

立即登入留言