iOS 13 的 present modally 變成更方便的卡片設計!
最近愈來愈多的 iOS App 在顯示新頁面時以卡片(card)的方式呈現,例如以下的 FB & Music App。
iOS 原本預設的 present modally 以全螢幕(full screen)顯示新的頁面,想以卡片的方式呈現我們需要自己寫程式或採用第三方套件,比方以下的 DeckTransition 套件。
不過在 iOS 13,一切都變了,present modally 變成更酷炫方便的卡片設計。
卡片式設計的幾個特點
1. 新的頁面不會佔滿整個螢幕,而是像張卡片般疊在之前的頁面上。
2. 向下拖曳即可關掉頁面,回到之前的頁面。
之前我們以 present modally 呈現的頁面,一般沒有加按鈕是回不去的,但在 iOS 13 再也沒這個問題了,向下拖曳即可返回。而且當使用像 iPhone XS Max 這樣尺寸較大的 iPhone 時,向下拖曳返回的方式也更方便操作。
值得注意的,當頁面本身也可以上下捲動時,以下兩種情況的向下拖曳才可以關閉頁面,其它情況時拖曳只會造成頁面內容的捲動。
- 按住頁面的頂部向下拖曳。
- 頁面滑到最上面時向下拖曳。
有了向下拖曳的新功能後,沒有按鈕我們也能返回前一頁。不過 Apple 還是建議我們設計畫面時加上按鈕提醒使用者,而且可能還是會有使用者不知道向下拖曳可以關閉畫面。
3. 卡片堆疊只會顯示 2 張卡片。
雖然我們可以用 present modally 不斷顯示新的頁面,讓畫面像卡片般層層堆疊,但它呈現時只會顯示兩張卡片。因此如下圖的 Calendar App,我們點選下方的 Calendars 顯示 Calendar 清單頁面,然後再點選 Add Calendar 顯示新增 Calendar 頁面,此時只會看到兩張卡片,而不是三張卡片。
親手實驗 present modally 的卡片效果
接下來就讓我們親手製作一個小小 App,試試 iOS 13 的 present modally 效果吧。
我們可利用 Present Modally 的 segue 切換頁面,或是從程式直接呼叫 function present(_:animated:completion:)。
結果
切換頁面時,小王子圖片頁面以卡片的形式呈現,而且向下拖曳即可關閉返回。
取消拖曳返回之前頁面的功能
拖曳返回很方便,可是有些時候我們會想取消此功能,防止使用者不小心返回。比方新增行事曆活動時,一旦我們輸入了內容,此時就無法拖曳返回,要按左上角的 Cancel 才能取消,如此辛苦輸入的內容才不會因為拖曳返回而不見。
我們只要將新頁面 controller 的 isModalInPresentation 設為 true 即可取消拖曳返回的功能。此時我們仍可向下拖曳,不過只能拖曳一小段的距離,無法返回之前的頁面。
@IBAction func showPrince(_ sender: Any) { if let controller = storyboard?.instantiateViewController(identifier: "Prince") { controller.isModalInPresentation = true present(controller, animated: true, completion: nil) }}
確認是否拖曳返回之前頁面
有時當使用者向下拖曳時,我們會想詢問使用者是否確定要返回,比方以下編輯資料的畫面,我們可在向下拖曳時跳出 action sheet 詢問使用者,透過定義 protocol UIAdaptivePresentationControllerDelegate 的 function。
有興趣的朋友可進一步參考以下連結 Apple 提供的範例。
可以像從前一樣 full screen 嗎 ?
當然可以,相關說明可參考以下連結。