iOS 16.1 Live Activities (即時動態) 開發上手教學 (下)

iOS 16.1 Live Activities(即時動態) 之動態島

上一篇我們提到了即時動態的基本應用和相關的設定,那這篇我們就來聊聊更多關於即時動態能做到的酷炫功能吧!

上次我們提到關於 ActivityConfiguration 的設置:

import SwiftUI
import WidgetKit

@available(iOSApplicationExtension 16.1, *)
@main
struct PizzaDeliveryWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: PizzaDeliveryAttributes.self) { context in
            // 製作鎖定畫面應該顯示的畫面,這也同時支援沒有動態島的iOS裝置。
        } dynamicIsland: { context in
            // 製作動態島顯示畫面,這部分下一章會再細說
            // ...
        }
    }
} 

但也只有針對上半部 context 的設計去作延伸,但我相新眼尖的各位一定有發現在 closure 的下面有另外一個 context 的設定,看字面上的意思,當然就是關於動態島的設置,因為這部分的內容偏多、複雜,所以我就另外寫一篇文章來跟大家分享。

Dynamic Island 動態島

首先呢,以開發者的角度來看的話,Apple 官方在開發動態島的元件 UI 時,有列出了一些規範和不同的顯示狀況:

一. 當使用者只有一個顯示中的即時動態時,動態島會在畫面上呈現 Leading side (頭) 跟 Trailing side (尾)。

這時就只有兩側的畫面能夠顯示相關資訊,因此會建議開發者在這樣的規範下設置首要的資訊就好,以上禮拜提到的外送來繼續舉例的話,首要的資訊就是餐點的即時動態。

二. 當使用者同時有不只一個即時動態在運作的時候,兩個即時動態會以 minimal 的方式在 UI 上做互動,動態島選擇一個優先級別更高的顯示在 Leading side,而另一個會以圓形圖示展現在 trailing side 的位置。

三. 
若使用者長按查看某個即時動態的詳細資訊時,這時動態島會擴張成 expanded region ,其中又再細分成不同的約束( constraint )去做設定。

  • Center:位於相機組件下方,由於區域不大,所以建議放置 static data(靜態 data)。
  • Leading:為左半邊 L 型區塊,範圍較大能夠放圖像或是比較明顯的資訊。
  • Trailing:為右半邊反 L 型區塊,跟 Leading 的可用範圍基本一樣。
  • Bottom:下方到底的區塊,這邊的範圍比較規矩,因此能過做更多動態的調整,不管是 animation 或是動態文字都是不錯的選擇。
但如果你不需要這麼多區塊怎麼辦呢?
有些人可能只想要 Leading + Trailing 的話,這樣 Center 跟 Bottom 不就會卡在那個地方影響整體畫面嗎?

這個問題 Apple 官方也給出的相對應的方法去達到不同的要求,init(_:priority:content:) 能夠調整整個動態島在擴張之後區塊渲染的先後順序,因此就能達到特定區塊長滿的需求:




如此一來,開發者就有更多可以應用的空間,不管今天是怎樣的互動性 App 都能依照自己的風格去定義屬於自己的即時動態。

程式碼實作

照著上次建立過的 ActivityConfiguration 繼續往下擴展的話:

import SwiftUI
import WidgetKit

@available(iOSApplicationExtension 16.1, *)
@main
struct PizzaDeliveryWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: PizzaDeliveryAttributes.self) { context in
            // 製作鎖定畫面應該顯示的畫面,這也同時支援沒有動態島的iOS裝置。
        } dynamicIsland: { context in
            // 製作動態島應該顯示的畫面
            DynamicIsland {
                //MARK: -文章上方提到的(三).
                DynamicIslandExpandedRegion(.leading) {
                    Label("(context.attributes.numberOfPizzas) Pizzas", systemImage: "bag")
                        .foregroundColor(.indigo)
                        .font(.title2)
                }
                
                DynamicIslandExpandedRegion(.trailing) {
                    Label {
                        Text(timerInterval: context.state.deliveryTimer, countsDown: true)
                            .multilineTextAlignment(.trailing)
                            .frame(width: 50)
                            .monospacedDigit()
                    } icon: {
                        Image(systemName: "timer")
                            .foregroundColor(.indigo)
                    }
                    .font(.title2)
                }
                
                DynamicIslandExpandedRegion(.center) {
                    Text("(context.state.driverName) is on their way!")
                        .lineLimit(1)
                        .font(.caption)
                }
                
                DynamicIslandExpandedRegion(.bottom) {
                    Button {
                        // Deep link into your app.
                    } label: {
                        Label("Call driver", systemImage: "phone")
                    }
                    .foregroundColor(.indigo)
                }
            //MARK: -文章提到的(一)
            } compactLeading: {
                // Create the compact leading presentation.
                // ...
            } compactTrailing: {
                // Create the compact trailing presentation.
                // ...
            //MARK: -文章提到的(二)
            } minimal: {
                // Create the minimal presentation.
                // ...
            }
            .keylineTint(.yellow)
        }
    }
} 
以官方範例來操作的話,可以看到我們文章提到的一、二、三都有被實作在裡面,每個區域都一一列出,但如果有些區域不設定的話,他就不會有任何操作反應。

如果 build & run 之後,應該可以看到在你的動態島被 request 完建立後,在有動態島的機子上就會看到你的動態島會有下面的幾種畫面:

那如果需要設定 priority 的話,假設你只要 Leading 跟 Trailing,則 Center 跟 Bottom 就不需要設定:

import SwiftUI
import WidgetKit

@available(iOSApplicationExtension 16.1, *)
@main
struct PizzaDeliveryWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: PizzaDeliveryAttributes.self) { context in
            // 製作鎖定畫面應該顯示的畫面,這也同時支援沒有動態島的iOS裝置。
        } dynamicIsland: { context in
            // 製作動態島應該顯示的畫面
            DynamicIsland {
                //MARK: -文章上方提到的(三).
                DynamicIslandExpandedRegion(.leading, priority: 1) {
                    //自訂畫面
                }
            //MARK: -文章提到的(一)
            } compactLeading: {
                // Create the compact leading presentation.
                // ...
            } compactTrailing: {
                // Create the compact trailing presentation.
                // ...
            //MARK: -文章提到的(二)
            } minimal: {
                // Create the minimal presentation.
                // ...
            }
            .keylineTint(.yellow)
        }
    }
} 
應該有人發現在 Dynamic Island closure的下方有一行.keylineTint(.yellow)這行的作用就是可以決定動態島的邊框顏色,沒錯!這個設置真的很棒,這樣就可以依照每個 App 自己的主題色去做設置!

這樣基本上你就完成一個有動態島支援的即時動態啦!

以上就是這篇文章的內容,那因為公司隱私的問題,我還是沒辦法把自己實作的程式碼放上來,還請大家多多包涵,如果有任何問題歡迎到我的IG私訊我,或在底下留言告訴我喔~謝謝!



如果想給我一些支持,也歡迎買杯咖啡給我,謝謝大家!

留言

這個網誌中的熱門文章

iOS 16.1 Live Activities (即時動態) 開發上手教學 (上)