簡介：

靈動島是蘋果在iPhone 14 Pro和iPhone 14 Pro Max上首次提出的全新UI交互形式，創(chuàng)新性的讓虛擬軟件和硬件的交互變得更為流暢。當(dāng)有來電、短信等通知時(shí)，靈動島會變化形態(tài)，以便讓用戶能夠更直觀地接收到這些信息。

而在用戶使用一些應(yīng)用App，比如音樂，并將其切換到后臺時(shí)，靈動島也能以另一種形態(tài)來顯示這些軟件，還可以通過輕點(diǎn)，重按等來實(shí)現(xiàn)的操作，比如切換歌曲。

接入靈動島

直接基于其進(jìn)行擴(kuò)展開發(fā)。但要注意的是，靈動島開發(fā)用到的是Live Activity，主要包括鎖屏通知，頂部通知等樣式。

首先給工程添加Widget Extension：

image.png

勾選Live Activity：

image.png

image.png

struct DJDynamicIslandAdvanceLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DJDynamicIslandAdvanceAttributes.self) { context in
            // Lock screen/banner UI goes here
            VStack {
                Text("Hello")
            }
            .activityBackgroundTint(Color.cyan)
            .activitySystemActionForegroundColor(Color.red)

        } dynamicIsland: { context in
            DynamicIsland {
                // 點(diǎn)擊靈動島后展開的樣式
                // various regions, like leading/trailing/center/bottom
                DynamicIslandExpandedRegion(.leading) {
                    Text("Leading")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text("Trailing")
                }
                DynamicIslandExpandedRegion(.center) {
                    Text("Center")
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text("Bottom")
                    // more content
                }
            } compactLeading: {
                // compact模式（長條樣式）左側(cè)內(nèi)容，一般放icon
                Text("compactLeading")
            } compactTrailing: {
                // compact模式（長條樣式）右側(cè)內(nèi)容，一般放描述文案
                Text("compactTrailing")
            } minimal: {
                // minimal模式（其他APP擠占后的圓圈樣式）
                Text("minimal")
            }
            .widgetURL(URL(string: "http://www.apple.com"))
            .keylineTint(Color.red)
        }
    }
}

同時(shí)需要在info.plist中添加對Live Activity的支持，在TARGETS - Info - Custom iOS Target Properties中添加NSSupportsLiveActivities并設(shè)置為YES：

image.png

不同展示樣式
靈動島主要包括三種展示樣式：

靈動島被重按后，展開的完整模式（expanded）

image.png

此模式分為Leading、Trailing、Center和Bottom四個(gè)部分，在系統(tǒng)自動為我們生成的代碼中，ActivityConfiguration的dynamicIsland中可以分別找到對應(yīng)控制的代碼段：

dynamicIsland: { context in
            DynamicIsland {
                // 點(diǎn)擊靈動島后展開的樣式
                // various regions, like leading/trailing/center/bottom
                DynamicIslandExpandedRegion(.leading) {
                    Text("Leading")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text("Trailing")
                }
                DynamicIslandExpandedRegion(.center) {
                    Text("Center")
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text("Bottom")
                    // more content
                }
            }

APP切后臺后的長條形展示樣式（compact）
此形式分為兩個(gè)部分：左邊的Leading，一般用于放圖片icon等；右邊的Trailing，一般用與放置文案描述

image.png

在系統(tǒng)自動為我們生成的代碼中，ActivityConfiguration的dynamicIsland部分分別對應(yīng)compactLeading和compactTrailing，可以在其中編寫我們想要的UI展示：

compactLeading: {
                // compact模式（長條樣式）左側(cè)內(nèi)容，一般放icon
                Text("compactLeading")
            } compactTrailing: {
                // compact模式（長條樣式）右側(cè)內(nèi)容，一般放描述文案
                Text("compactTrailing")
            }

其他APP切后臺時(shí)，變化為靈動島將本app擠占后展示的圓點(diǎn)模式（minimal）
此形勢一般用于放置圖標(biāo)icon或動態(tài)圖等

image.png

在系A(chǔ)ctivityConfiguration的dynamicIsland部分對應(yīng)minimal，可以在其中編寫我們想要的UI展示

minimal: {
                // minimal模式（其他APP擠占后的圓圈樣式）
                Text("minimal")
            }

動態(tài)數(shù)據(jù)更新
上文說靈動島視圖布局是在ActivityConfiguration中編寫的，而其上的數(shù)據(jù)更新依靠的是ActivityAttributes對象。需要注意的是，ActivityAttributes不需要跟ActivityConfiguration寫在一起，就像view不需要跟model寫在一起一樣。

蘋果官方建議ActivityAttributes分為兩部分：固定不變的屬性（比如總數(shù)，訂單號等等）和會動態(tài)變化的屬性（比如配送員名稱，配送時(shí)間等等）。官方給出的demo是披薩配送的app，我們可以參考它的Attributes聲明規(guī)則：

struct PizzaDeliveryAttributes: ActivityAttributes {
    public typealias PizzaDeliveryStatus = ContentState

    public struct ContentState: Codable, Hashable {
        var driverName: String
        var deliveryTimer: ClosedRange<Date>
    }

    var numberOfPizzas: Int
    var totalAmount: String
    var orderNumber: String
}

其中ContentState是會動態(tài)改變的部分。在完成布局編寫后，實(shí)際的工程應(yīng)用當(dāng)中可以調(diào)用Activity對象的各種方法對靈動島進(jìn)行操作，包括開啟，更新和關(guān)閉：

image.png

調(diào)用Activity.request成功開啟靈動島后，將APP切到后臺，就可以看到效果了，調(diào)用request以及Activity里每一個(gè)activity的update方法，都可以觸發(fā)ActivityConfiguration的閉包調(diào)用，從它回掉的context可以獲取到Attributes的數(shù)據(jù)內(nèi)容，比如context.state.deliveryManName和context.attributes.totalAmount：

image.png