iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Mobile Development

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

EP 18

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

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

在目前 PeoplePage 呈現聯絡人列表中沒有實作搜尋的功能,而當聯絡人多的時候可能就會需要有這樣的功能實作,所以本篇就來在 PeoplePage 當中的 ListView 的上方呈現中實作 SearchBar 的 UI 元件,並且完成最基本的針對聯絡人姓名搜尋功能。

開始囉~~~


首先打開找到 PeoplePage 的 ListView 標記。
ListView 標記

由於版面的 RootLayout 當初是用 StackLayout,就直接在該 ListView 標記上方撰寫 SearchBar 的標記,並設定其 Placeholder 的文字。
SearchBar 標記

接下來繼續在 SearchBar 當中設定 SearchCommand 跟 SearchCommandParameter 的 Binding(繫結) 對象。
SearchBar 中設定 SearchCommand 跟 SearchCommandParamete 屬性

而在這邊也增加一個 TextTransform 的屬性設定 為 Lowercase,讓使用者輸入的文字就算是英文大寫也會變英文的小寫,以防止搜尋時有大小寫比對的問題發生(不做此設定也可以,但注意後面的 SearchCommand 實作時就要轉換 keyword 的參數值為小寫來比對)。
SearchBar 中設定 TextTransform 屬性

後續動作應該不用多說,應該也猜的到要到 PeoplePageViewModel 當中撰寫對應應有的 SearchCommand 設計。

不過,要注意的是此 SearchCommand 需有設計引數 keyword 來供使用者在 SearchBar 中輸入的文字(Text 屬性)當參數資料輸入。
SearchCommand 設計 1

SearchCommand 實際的功能程式碼,大體上就針對 MockData 中的 People ,利用了 Linq 語句處理條件的部分(請先在 PeoplePageViewModel 當中加入 using System.Linq 的命名空間引用),並且針對查詢不到資料時作了一個 Alert 的 UI 顯示。
SearchCommand 設計 2

若前面的 SearchBar 沒有設定 TextTransform 的屬性的話,請記得在比對時 keyword 也要轉換成小寫文字,以利使用者輸入的文字能統一大小寫比對查詢。
(除非真的要做精準文字比對,那就可以不管這問題了)

而在雙平台 (iOS、Android) 執行搜尋的效果如下:

在 PeoplePage 的 SearchBar 準備輸入文字"。
搜尋的效果 1

在 SearchBar 輸入文字,例如: "j",並按下虛擬鍵盤中的 "搜尋" 鍵。
搜尋的效果 2

然後 ListView 的內容變換成搜尋後的結果。
搜尋的效果 3

透過 SearchBar 完成基本的 Search 效果後,則要再處理一些 SearchBar 本身設計時的 UI 問題才行...

讓我們先回到 PeoplePaeg.xaml,針對 SearchBar 的標記增加 TextChanged 的事件註冊。
TextChanged 的事件註冊

並在 PeoplePage.xaml.cs 當中找到對應的事情處理常式的程式碼。
SeachBar 的 TextChanged 事件處理常式

撰寫事情處理常式內部要執行的程式碼。
SeachBar 的 TextChanged 事件處理常式要執行的程式碼

這主要是為了要處理使用者操作的過程當中,可能會在搜尋完成後透過 SearchBar 的清除按鈕時,將 SearchBar 的所有文字時刪除,能順利恢復到能觀看所有聯絡人的狀態。

修正後在雙平台 (iOS、Android) 執行搜尋的效果如下:

在 SearchBar 輸入文字,例如: "j",並按下虛擬鍵盤中的 "搜尋" 鍵。
搜尋文字清除後的效果 1

按下虛擬鍵盤中的 "搜尋" 鍵,結果顯示正確。
搜尋文字清除後的效果 2

清除 SearchBar 的文字,ListView 恢復顯示所有聯絡人資訊。
搜尋文字清除後的效果 3

以上本 EP18 的介紹完成~~~

蹦的掰!


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

尚未有邦友留言

立即登入留言