作者：京东批发 姜海
灵动岛是苹果在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<ActivityAttributes>.request胜利开启灵动岛后，将APP切到后盾，就能够看到成果了，调用request以及Activity<ActivityAttributes>里每一个activity的update办法，都能够触发ActivityConfiguration的闭包调用，从它回掉的context能够获取到Attributes的数据内容，比方context.state.deliveryManName和context.attributes.totalAmount：
与到家业务联合的思考
灵动岛提供了一种全新的“告诉交互”模式，不再是枯燥的一个横幅或者提示框，而是一个实时显示，动静更新的UI，就像他的名字“Live Activity”一样，是一场“直播”。
对灵动岛的适配被形象地称为“登岛”，针对到家的业务场景，咱们也做了一系列思考，最实用的业务场景也是下单后订单状态的实时更新“直播”，并且编写了Demo展现：
灵动岛挂件
灵动岛挂件是咱们提出的另一种十分有意思的灵动岛利用。
首先，灵动岛的各项UI数据如下：
通过准确布局，能够在灵动岛上动静的展现一个会动的挂件，就像在灵动岛上养了一只可恶的宠物：
咱们会继续跟进最新的灵动岛技术动静，并且摸索其余实用灵动岛的业务场景，利用这项技术带来更多的流量和利益点
发表回复