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

京东云开发者
• 阅读 307

作者:京东零售 姜海

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

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

苹果在iOS16.1系统对第三方开放了灵动岛的API,并允许开发者基于灵动岛开发相应软件,越来越多的APP开始基于灵动岛的交互进行设计和开发,本文将简单介绍灵动岛开发的流程和将其与业务场景相结合的思考。

接入灵动岛

如果项目之前开发过widget小组件,已经添加过Widget Extension,并有WidgetBundle文件,那么可以直接基于其进行扩展开发。但要注意的是,灵动岛开发用到的是Live Activity,主要包括锁屏通知,顶部通知等样式:

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

而并不是widget开发用到的Time Line形式,两者在UI形态上基本毫无关系,只是需要在WidgetBundle中实例化。如果之前没有开发过widget,可以参见另一篇文章:《Widget开发以及动态配置

首先给工程添加Widget Extension:

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

勾选Live Activity:

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

建立Extension以后,系统会自动生成三个文件,除了widget开发用到的TimeLine相关内容的文件和WidgetBundle文件外,还会生成一个专门用来开发灵动岛Live Activity的文件:

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

文件中已经自动生成了部分代码大纲,可以直接查看效果并基于其上进行开发:

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:

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

不同展示样式

灵动岛主要包括三种展示样式:

灵动岛被重按后,展开的完整模式(expanded)

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

此模式分为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,一般用与放置文案描述

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

在系统自动为我们生成的代码中,ActivityConfiguration的dynamicIsland部分分别对应compactLeading和compactTrailing,可以在其中编写我们想要的UI展示:

compactLeading: {
                // compact模式(长条样式)左侧内容,一般放icon
                Text("compactLeading")
            } compactTrailing: {
                // compact模式(长条样式)右侧内容,一般放描述文案
                Text("compactTrailing")
            } 

其他APP切后台时,变化为灵动岛将本app挤占后展示的圆点模式(minimal)

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

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

在系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对象的各种方法对灵动岛进行操作,包括开启,更新和关闭:

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

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

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

与到家业务结合的思考

灵动岛提供了一种全新的“通知交互”形式,不再是单调的一个横幅或者提示框,而是一个实时显示,动态更新的UI,就像他的名字“Live Activity”一样,是一场“直播”。

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

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

灵动岛挂件

灵动岛挂件是我们提出的另一种非常有意思的灵动岛应用。

首先,灵动岛的各项UI数据如下:

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

经过精确布局,可以在灵动岛上动态的展示一个会动的挂件,就像在灵动岛上养了一只可爱的宠物:

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
2年前
Jenkins 插件开发之旅:两天内从 idea 到发布(上篇)
本文首发于:Jenkins中文社区(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fjenkinszh.cn)!huashan(https://oscimg.oschina.net/oscnet/f499d5b4f76f20cf0bce2a00af236d10265.jpg)
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
京东云开发者 京东云开发者
7个月前
iOS16新特性:实时活动-在锁屏界面实时更新APP消息 | 京东云技术团队
简介之前在里介绍了iOS16新的特性:实时更新(LiveActivity)中灵动岛的适配流程,但其实除了灵动岛的展示样式,LiveActivity还有一种非常实用的应用场景,那就是锁屏界面实时状态更新:上图是部分已经做出适配的APP,锁屏实时活动的展示。可
京东云开发者 京东云开发者
4个月前
带你走进灵动岛 | 京东云技术团队
苹果在iPhone14Pro及iPhone14ProMAX上推出了灵动岛,是一次交互玩法的革新。本文从灵动岛的展现形式、场景限制、适配情况和远程通知更新数据几个方面全面带你走进灵动岛