2013年6月24日 星期一

回到前一頁面的新招式 - 左右scroll大法 (interactivePopGestureRecognizer) (魔鬼藏在細節裡的iOS 7 UI設計)

iOS SDK的UINavigationController幫助我們輕易實現階層式的多頁面App設計,新頁面就像積木般一層層地往上堆疊,毫不留情地踩在舊頁面的頭頂上。




如上圖所示,App一開始顯示著名推理作家伊坂幸太郎的作品清單,當點選其最新中文譯作"SOS之猿"後,即進入SOS之猿頁面,覆蓋了原先的清單頁面。

不管堆疊了多少層,想要回到舊情人的懷抱,回到舊的頁面,都是ok的。因為UINavigationController採用的是堆積木的設計概念,新舊頁面同時併存,雖然我們只看得見蓋在最上層的頁面,但舊情人(舊頁面)它依然存在,依然活著,並非可憐地只活在我們的心裡啦。

想要回到前一頁面的方法很簡單,只要透過畫面上方UINavigationBar左邊帶有< 符號的button,即可回到前一頁面,再見舊情人的容顏。

人說情歌總是老的好,但是如同舊情人的舊頁面可就不一定了。而且所謂起手無回大丈夫,當我們回到前一頁面時,原本所在的頁面將完完全全被拋棄,消失在這個世界上,再也回不去了。所以點選左上角回到前一頁面的按鈕其實是個頗為危險的動作。

全新設計的iOS 7為我們解決了如此棘手的天大難題。在iOS 7,UINavigationController多了偵測水平scroll手勢的功能。因此,如下圖所示,當我們進入SOS之猿頁面後,可以利用手指按住畫面的左邊界區域向右scroll來返回前一頁面,而且因為scroll是一個連續動作,不像左上角的< 按鈕是個一翻兩瞪眼的動作,因此在scroll的過程中,我們可以看到前一頁面如同美人般害羞地慢慢露臉。若是突然驚覺受騙上當,發現對方是恐龍而非佳人,反悔倒也還來得及。此時只要馬上來個緊急手煞車,改成向左scroll,即可安然返回目前所在頁面。




ps: scroll大法只有當手指碰觸左邊界區塊時才會感應,觸碰其它地方可是你喊100遍芝麻開門也不會開門,不會有反應的唷。

程式實作:

偵測scroll手勢的interactivePopGestureRecognizer:

UINavigationController.h
@property(nonatomic, readonly) UIGestureRecognizer *interactivePopGestureRecognizer

關閉偵測scroll手勢功能:


self.navigationController.interactivePopGestureRecognizer.enabled = NO;




沒有留言:

張貼留言