Pages

Thursday, January 13, 2011

Using UIActionSheet design to alert users

我們在 iPhone 上使用 Facebook app,當點選到自己朋友的個人頁面,如果想要跟他做更進一步事情,我們知道說右上角有個按鈕可以選擇,按下它之後,畫面下方即會出現一排選單讓使用者可以做進一步的選擇,例如:傳送訊息、poke 一下。

另外一個經驗,例如今天
搭乘大眾交通工具路上編寫很長的一段文字,手指頭辛辛苦苦打到一半,如果不小心按到取消,而系統沒設計好就真的回到上一層,資料也消失了,這樣是不是很想摔手機,但是也只能氣到內傷。所以有些設計良好介面的 iPhone app 會彈出詢問,是否真的要取消的選單。這樣重要設計方式在 iPhone 上是如何做出來呢?

UIAcitonSheet 是一個可以提供系列的選單給使用者做選擇的 class。我們也可以使用 action sheets 來彈出提醒使用者些潛在風險的狀況。Action sheet 提供了標題選單和一到多的按鈕,每一個按鈕都有不同的 action 可以接收。

使用這個 class 可以設定它的 properties 調整 action sheet 的訊息、style 和按鈕等等。在使用這個同時,也要記得指派 delegate 到我們的 action sheet。這個 delegate object 會負責提供 action 對應到當被按下去相關的按鈕要處理的行為,確定給 UIActionSheetDelegate 這個 protocol。

我們可以從 toolbar 來帶出這效果、tab bar、或者按鈕按下去時候等等時機點。以 iPhone 和 iPod touch devices 來說, Action sheet 會典型地從底下往上滑出,然後呈現在畫面的最上層顯示,並且讓背景變成深色,讓使用者做選擇。我們來看看怎麼寫。

我拿先前介紹文章過 PushPop 展示 Navigation 的 project 來加上此功能的介紹。這次主要在最後一頁的上方 tab bar 加上按鈕,按下去可以做出 Action sheet 效果,而且將這版用版本控管機制 commit 且 push 到 github 上,我們可以從 程式碼差異頁面 來做分析,學習只要改什麼 code 即可達到目的。

在 .h file 加上 UIActionSheetDelegate


在 .m file 的 viewDidLoad 加上 navigation 右邊 button 有進階圖示的按鈕。


再來將 UIActionSheetDelegate 的 method 實作。


如此一來即可達到進階更貼心的好選單效果。以上這些資訊想要瞭解也可以參考 iOS 開發文件 UIActionSheet 頁面介紹。

No comments:

Post a Comment