Pages

Thursday, June 7, 2012

SVProgressHUD - A Progress HUD for iOS App

圖片參考自 http://samvermette.com/199
當我們在開發 iOS App,要從 iPhone 透過網路跟 Server 端溝通,過程一定是需要等待,而這過程會有來回時間,這依照網路的好壞來決定要多久。在這過程我們會需要適當的在 App 介面上顯示目前走到哪了,告知使用者目前還在進行當中,稍後就會告知結果。


對應上我們就需要  Progress HUD ( heads-up display ) 來顯示。使用上特點有:
  • 可以加入在當前的 View 上面。
  • 簡單的顯示,容易的移除掉。
  • 在過程當中,成功或失敗結果,根據階段顯示對應的圖片和文字。


推薦 GitHub 上面的這套 Project:samvermette / SVProgressHUD。使用上透過 SVProgressHUD 對應靜態的 method 即可做出這些需求組合:
  • Show
  • Show、伴隨狀態文字
  • Show、伴隨狀態文字、是否顯示 Activity Indicator。
  • Show、伴隨狀態文字、加上顯示 Mask Type。
  • Show 成功、伴隨狀態文字、過程停留秒數
  • Show 失敗、伴隨狀態文字、過程停留秒數
  • Set Status 過程可以轉換狀態文字
  • Dismiss
  • Dismiss 成功、伴隨狀態文字、過程停留秒數
  • Dismiss 失敗、伴隨狀態文字、過程停留秒數


這套類型上 HUD Mask Type 支援四種:None (過程還是可以讓使用者持續操作其他事情)、Clear (不允許使用者互動)、Black (不允許且用黑色的效果)、Gradient (不允許且加上 Gradient 的背景效果)。

而當然在使用這些狀況,我們要讓呼叫的程式寫在 UIViewController 會比較好,除了正常顯示之外,讓 View 的邏輯集中在這個地方。所以使用通常會伴隨三個階段:

1. 使用者操作,啟動 HUD

這邊伴隨著各種操作動作,例如 Query, Delete, Add to Favorite, Remove from Favorite 等等各種功能操作。

2. 使用者等待,持續顯示 HUD

如果是一般的網路溝通,就用一般 Activity Indicator 加上傳送中的文字。如果是上傳比較大的檔案,可以透過數學計算進度百分比,讓它持續更新狀態文字,讓使用者可以預期還要等待多久,完成了多久。

3. App 回饋結果,顯示文字後關閉 HUD

不論是成功或是失敗,透過適當的文字結果告知使用者,這次的操作行為結束了,而結果是這樣子。如此一來也把操作權交回給使用者,使用者可以繼續別的 App 功能操作下去。

使用 Progress HUD 很方便,效果也很清楚。但是它也帶來操作上另外一種缺陷。在使用上要特別注意的。因為在這過程畫面會被罩上這樣進度顯示,所以使用者的操作體驗是被中斷的。另外如果撰寫不小心,這個畫面停留太久讓使用者無法關閉,這樣是嚴重的 Bug 出現了。

所以以上在採用這樣的配套措施引用在 App 使用過程裡頭,有它的方便性、回饋準確效果,當然也是會帶來另外一種被中斷的等待體驗。

No comments:

Post a Comment