作者：京东零售 姜海

灵动岛是苹果在iPhone 14 Pro和iPhone 14 Pro Max上首次提出的全新UI交互方式，创新性的让虚拟软件和硬件的交互变得更为流通。当有来电、短信等告诉时，灵动岛会改变形状，以便让用户能够更直观地接收到这些信息。

而在用户运用一些应用App，比方音乐，并将其切换到后台时，灵动岛也能以另一种形状来显现这些软件，还能够通过轻点，重按等来实现的操作，比方切换歌曲。

苹果在iOS16.1体系对第三方开放了灵动岛的API，并允许开发者根据灵动岛开发相应软件，越来越多的APP开端根据灵动岛的交互进行规划和开发，本文将简单介绍灵动岛开发的流程和将其与事务场景相结合的考虑。

接入灵动岛

假如项目之前开发过widget小组件，现已增加过Widget Extension，并有WidgetBundle文件，那么能够直接根据其进行扩打开发。但要留意的是，灵动岛开发用到的是Live Activity，首要包含锁屏告诉，顶部告诉等款式：



而并不是widget开发用到的Time Line方式，两者在UI形状上基本毫无关系，仅仅需求在WidgetBundle中实例化。假如之前没有开发过widget，能够参见另一篇文章：《Widget开发以及动态配置》

首先给工程增加Widget Extension：



勾选Live Activity：



树立Extension以后，体系会主动生成三个文件，除了widget开发用到的TimeLine相关内容的文件和WidgetBundle文件外，还会生成一个专门用来开发灵动岛Live Activity的文件：



文件中现已主动生成了部分代码大纲，能够直接查看效果并根据其上进行开发：

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 {
                // 点击灵动岛后打开的款式
                // 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方式（长条款式）左边内容，一般放icon
                Text("compactLeading")
            } compactTrailing: {
                // compact方式（长条款式）右侧内容，一般放描绘案牍
                Text("compactTrailing")
            } minimal: {
                // minimal方式（其他APP抢占后的圆圈款式）
                Text("minimal")
            }
            .widgetURL(URL(string: "http://www.apple.com"))
            .keylineTint(Color.red)
        }
    }
}

同时需求在info.plist中增加对Live Activity的支持，在TARGETS – Info – Custom iOS Target Properties中增加NSSupportsLiveActivities并设置为YES：



不同展现款式

灵动岛首要包含三种展现款式：

灵动岛被重按后，打开的完整方式（expanded）



此方式分为Leading、Trailing、Center和Bottom四个部分，在体系主动为咱们生成的代码中，ActivityConfiguration的dynamicIsland中能够分别找到对应操控的代码段：

dynamicIsland: { context in
            DynamicIsland {
                // 点击灵动岛后打开的款式
                // 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）

此方式分为两个部分：左面的Leading，一般用于放图片icon等；右边的Trailing，一般用与放置案牍描绘



在体系主动为咱们生成的代码中，ActivityConfiguration的dynamicIsland部分分别对应compactLeading和compactTrailing，能够在其间编写咱们想要的UI展现：

compactLeading: {
                // compact方式（长条款式）左边内容，一般放icon
                Text("compactLeading")
            } compactTrailing: {
                // compact方式（长条款式）右侧内容，一般放描绘案牍
                Text("compactTrailing")
            } 

其他APP切后台时，改变为灵动岛将本app抢占后展现的圆点方式（minimal）

此局势一般用于放置图标icon或动态图等



在系ActivityConfiguration的dynamicIsland部分对应minimal，能够在其间编写咱们想要的UI展现

minimal: {
                // minimal方式（其他APP抢占后的圆圈款式）
                Text("minimal")
            }

动态数据更新

上文说灵动岛视图布局是在ActivityConfiguration中编写的，而其上的数据更新依托的是ActivityAttributes目标。需求留意的是，ActivityAttributes不需求跟ActivityConfiguration写在一起，就像view不需求跟model写在一起一样。

苹果官方建议ActivityAttributes分为两部分：固定不变的特点（比方总数，订单号等等）和会动态改变的特点（比方配送员名称，配送时间等等）。官方给出的demo是披萨配送的app，咱们能够参阅它的Attributes声明规则：

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是会动态改变的部分。在完结布局编写后，实践的工程应用当中能够调用Activity目标的各种方法对灵动岛进行操作，包含敞开，更新和封闭：



调用Activity.request成功敞开灵动岛后，将APP切到后台，就能够看到效果了，调用request以及Activity里每一个activity的update方法，都能够触发ActivityConfiguration的闭包调用，从它回掉的context能够获取到Attributes的数据内容，比方
context.state.deliveryManName和context.attributes.totalAmount：



与到家事务结合的考虑

灵动岛供给了一种全新的“告诉交互”方式，不再是单调的一个横幅或者提示框，而是一个实时显现，动态更新的UI，就像他的姓名“Live Activity”一样，是一场“直播”。

对灵动岛的适配被形象地称为“登岛”，针对到家的事务场景，咱们也做了一系列考虑，最适用的事务场景也是下单后订单状况的实时更新“直播”，而且编写了Demo展现：



灵动岛挂件

灵动岛挂件是咱们提出的另一种十分有意思的灵动岛应用。

首先，灵动岛的各项UI数据如下：



通过精确布局，能够在灵动岛上动态的展现一个会动的挂件，就像在灵动岛上养了一只心爱的宠物：



咱们会持续跟进最新的灵动岛技术动态，而且探索其他实用灵动岛的事务场景，利用这项技术带来更多的流量和利益点

本文正在参与「金石方案」