iOS 13 的 present modally 變成更方便的卡片設計!

最近愈來愈多的 iOS App 在顯示新頁面時以卡片(card)的方式呈現,例如以下的 FB & Music App。

iOS 原本預設的 present modally 以全螢幕(full screen)顯示新的頁面,想以卡片的方式呈現我們需要自己寫程式或採用第三方套件,比方以下的 DeckTransition 套件。

不過在 iOS 13,一切都變了,present modally 變成更酷炫方便的卡片設計。

卡片式設計的幾個特點

1. 新的頁面不會佔滿整個螢幕,而是像張卡片般疊在之前的頁面上。

Calendar App & Contacts App

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:)。

Storyboard 聰明地知道小王子圖片頁面會以卡片呈現,所以上方留了一段空白

結果

切換頁面時,小王子圖片頁面以卡片的形式呈現,而且向下拖曳即可關閉返回。

取消拖曳返回之前頁面的功能

拖曳返回很方便,可是有些時候我們會想取消此功能,防止使用者不小心返回。比方新增行事曆活動時,一旦我們輸入了內容,此時就無法拖曳返回,要按左上角的 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 嗎 ?

當然可以,相關說明可參考以下連結。

參考連結

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com