關于iPhone 14 Pro靈動島,開發(fā)人員和設計人員需要了解的知識

就在9月15日凌晨,Apple 向開發(fā)者測試通道用戶推送了 iOS 16.1 Beta 1。跟這個測試版一起到來的是靈動島(Dynamic island)的 API 和開發(fā)文檔。這意味著,從更新后開始,開發(fā)者可以開始做靈動島的適配工作。
本文簡單說說 iPhone 14 Pro 靈動島的 UI 界面組成,普通用戶想了解的話可以看看。

上圖是開發(fā)者網(wǎng)站的文檔,從文檔來看,靈動島與鎖屏實時活動功能一樣,屬于 ActivityKit 部分。關于實時活動和?ActivityKit,可以看我之前文章。

要提供實時活動,請在項目添加您現(xiàn)有的小部件擴展或創(chuàng)建一個新的小部件擴展。實時活動(Live Activity)使用 WidgetKit 功能和 SwiftUI 作為其用戶界面。
也就是說靈動島與鎖屏實時活動一樣屬于小組件的一種。靈動島與實時活動需要通過遠程消息通知或者主App的?ActivityKit 提供的方法進行通知,之后才會出現(xiàn)在靈動島和鎖屏實時活動中。
靈動島由緊湊視圖、最小視圖、擴展視圖組成
最小視圖指的是多個實時活動運行的時候,較舊的那些通知活動就會變成在島的右邊的一個小圓形(如下圖上),這個圓形里不一定只放圖標,可以放其他搭配,比如圖片加文字也是可以的。但這個圓形太小了,能放的內容非常有限。

緊湊視圖就是如下圖這種只有一行顯示,在程序里需要在島的左邊和右邊的放入內容。


擴展視圖是長按靈動島的活動,就會彈出一個大的視圖,上圖開發(fā)文檔已經標注了擴展視圖的組成部分,由左、中、右和底部組成,總高度不能超過 144。之前在文章介紹鎖屏實時活動的時候說過,實時活動視圖總高度不能超過 160,超出部分系統(tǒng)會截斷。下圖是原神小組件實時活動版。

代碼不變移到靈動島緊湊視圖里面就變成了下圖中的樣子。代碼里指定了亮色模式和深色模式的顏色代碼,在靈動島只有深色模式。


靈動島在活動的狀態(tài)只支持豎屏顯示,我把旋轉打開,切換橫屏,此時在活動狀態(tài)的這個通知,在橫屏狀態(tài)沒有顯示。(當然,測試版不代表最終效果,只是目前的版本就是這樣)


來分析一下大家非常關心的問題
以微信為例的消息通知能否適配靈動島
首先,遠程消息推送過來在靈動島顯示的時候,是緊湊視圖,也就是只有很小的一行,只有手指長按才會彈出擴展視圖,也就是大黑框的那個視圖。在緊湊視圖里,能顯示的內容非常少,用戶想要看更多的內容需要長按靈動島才會彈出,增加了查看消息通知的步驟,我認為,短期內大部分 App 的消息通知不會適配靈動島。
近期的一些APP內的靈動島交互
最近有一款用靈動島交互的打磚塊游戲推出,通過擊打靈動島得分。如下圖

今天(9月17日)一款名為 Apollo for Reddit 的社交新聞類 App更新,可以在靈動島上方養(yǎng)寵物,寵物可以在靈動島上方走來走去,還會睡覺。網(wǎng)友表示很可愛。

上圖我用 Final Cut Pro 轉成 Gif 的時候,色彩被改變了,且 FCPX 里面色彩選項修改不了。將就看吧。下面放一張靜態(tài)的圖。

值得注意的是,以上兩個 App 的靈動島交互,只是在 App 內部的交互,在 App 外部是沒有這種交互方式的。
更多關于實時活動和靈動島的規(guī)則
實時活動的消息推送大小不能超過 4KB,在靈動島同樣也是這個規(guī)定。
實時活動界面部分使用與小組件一樣的 WidgetKit 和 SwiftUI 來編寫界面,如果以前就寫了桌面小組件,那么只需要簡單地排版適配,就可以在鎖屏實時活動或者靈動島擴展視圖里使用。
自定義實時活動的用戶界面時,系統(tǒng)會忽略任何自定義動畫,也就是自定義的動畫都會無效,但可以使用系統(tǒng)自帶的時間文本動畫,當實時活動的動態(tài)內容發(fā)生變化時,系統(tǒng)會執(zhí)行一些動畫。文本視圖通過模糊的內容過渡動畫內容變化,系統(tǒng)為圖像和 SF Symbols 符號動畫內容過渡,根據(jù)內容或狀態(tài)更改從用戶界面添加或刪除視圖,視圖會淡入淡出。

實時活動大部分的規(guī)則,在靈動島也適用。了解更多實時活動特性,可以看之前發(fā)布過的文章。
目前暫時只發(fā)現(xiàn)這些,有新的發(fā)現(xiàn)和不完善的地方,之后再補充。