关于ios:iOS16新特性灵动岛适配开发与到家业务场景结合的探索实践

作者：京东批发姜海

灵动岛是苹果在 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：

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

此模式分为 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
                }
            }

此模式分为两个局部：右边的 Leading，个别用于放图片 icon 等；左边的 Trailing，个别用与搁置文案形容

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

compactLeading: {
                // compact 模式（长条款式）左侧内容，个别放 icon
                Text("compactLeading")
            } compactTrailing: {
                // compact 模式（长条款式）右侧内容，个别放形容文案
                Text("compactTrailing")
            }

此局势个别用于搁置图标 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<ActivityAttributes>.request 胜利开启灵动岛后，将 APP 切到后盾，就能够看到成果了，调用 request 以及 Activity<ActivityAttributes> 里每一个 activity 的 update 办法，都能够触发 ActivityConfiguration 的闭包调用，从它回掉的 context 能够获取到 Attributes 的数据内容，比方 context.state.deliveryManName 和 context.attributes.totalAmount：

与到家业务联合的思考

灵动岛提供了一种全新的“告诉交互”模式，不再是枯燥的一个横幅或者提示框，而是一个实时显示，动静更新的 UI，就像他的名字“Live Activity”一样，是一场“直播”。

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

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

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

通过准确布局，能够在灵动岛上动静的展现一个会动的挂件，就像在灵动岛上养了一只可恶的宠物：

咱们会继续跟进最新的灵动岛技术动静，并且摸索其余实用灵动岛的业务场景，利用这项技术带来更多的流量和利益点

关于ios:iOS16新特性灵动岛适配开发与到家业务场景结合的探索实践

接入灵动岛

不同展现款式

灵动岛被重按后，开展的残缺模式（expanded）

APP 切后盾后的长条形展现款式（compact）

其余 APP 切后盾时，变动为灵动岛将本 app 挤占后展现的圆点模式（minimal）

动态数据更新

灵动岛挂件