十分钟集成 Live Activity —— Ficow的实战笔记

| Swift , iOS , Xcode

 

内容概览

  • 前言
  • 理解 Live Activity 的各种状态/场景
  • 集成 Live Activity
    • 集成 Widget Extension
    • 添加权限
    • Widget 可以隐藏
    • 编译并运行项目
  • 配置并启动 Live Activity
    • 配置 Live Activity 属性
    • 让 UI 可以控制 Live Activity
    • 简单地封装 Live Activity 相关的核心代码
    • 替换 WidgetViewLiveActivity 中的 ActivityAttributes
    • 启动App,检查 Live Activity 集成状况
  • 你可能遇到的问题
    • 显示倒计时文本、倒计时进度条/环
    • 模拟器可以显示 Live Activity,但是设备不显示 Live Activity
  • 总结

 

 

前言

 

apple-live-activity

Live Activity 是 iOS 16.1+ 才支持的功能,它可以让用户很便捷地查看App提供的 实时信息,常见应用场景如:货物配送、计时器等。

开发 Live Activity 其实是和开发 Widget 很像,只是适配的场景不同而已。Live Activity 通常比 Widget 提供 更实时的数据

话不多说,快来打造属于你的 Live Activity 吧~

 

 

理解 Live Activity 的各种状态/场景

 

状态

状态 触发条件 效果图 备注
compact 单个应用占用灵动岛(Dynamic island) 常见的设计是一侧显示进度, 另外一侧显示应用的图标。另外一侧显示应用的图标。
minimal 多个应用占用灵动岛 优先级高的应用占据 attached 一侧,低优先级的应用占据 detached一侧,常见的设计是显示应用的图标。
expanded 点击并长按 compact 或者 minimal 状态的 Live Activity 这种状态的布局比较特殊,需要考虑的设计因素比较多,可以参考:HIG-Live Activities

场景

场景 触发条件 效果图 备注
alert 在没有灵动岛的设备上触发 Live Activity alert 支持灵动岛的设备不会看到这种UI
lock screen 已启动的 Live Activity 会显示在锁屏页面 可以考虑复用 expanded 状态的设计

 

 

集成 Live Activity

 

集成 Widget Extension

添加 Widget Extension target 以支持 Live Activity:

找到并添加 Widget Extension:

输入 Extension 的名称,一定要选中 Live Activity,然后点击 Finish:

不需要切换到新的 Target:

这些就是 Widget Extension 新添加的文件,你后续的代码改动都在这里进行:

添加权限

在主项目里面注明相关的权限,可以直接复制这些 key 进行添加:

  • NSSupportsLiveActivities,支持 Live Activity;

  • NSSupportsLiveActivitiesFrequentUpdates,支持更高刷新频率的 Live Activity;

如果你想了解更多相关的内容,可以在这里搜索 NSSupportsLiveActivitiesFrequentUpdates
Starting and updating Live Activities with ActivityKit push notifications

Widget 可以隐藏

如果不需要 Widget,可以直接注释掉:

编译并运行项目

没错,即使项目跑起来了,你还是看不到 Live Activity!因为,它还没有被触发,你还需要写一些代码~

 

 

配置并启动 Live Activity

 

请注意,本章节中的示例有一代码部分摘自苹果官方的示例项目,Ficow在此基础上做了一些简化和调整:
Emoji Rangers: Supporting Live Activities, interactivity, and animations

示例项目代码仓库地址:LiveActivityDemo

配置 Live Activity 属性

添加一个 LiveActivityAttributes.swift 文件到 主项目Widget Extension 里:

然后,放入以下代码:
LiveActivityAttributes.swift

让 UI 可以控制 Live Activity

接下来,把项目里默认的 ContentView.swift 替换为以下内容:
ContentView.swift

简单地封装 Live Activity 相关的核心代码

温馨提示:代码上线发布前,一定要妥善处理好代码里所有的错误场景。问一下自己:你想事前忙,还是事后忙?

然后,再新建一个 ActivityController.swift 文件,添加到主项目中。代码如下:
ActivityController.swift

ActivityController 的主要职责如下所示:

Live Activity 操作 主要参数 备注
启动 静态内容 attributes,初始状态 initialState,过期时间 staleDate,相关性分数 relevanceScore 如果设置了staleDate,而且过了这个时间,Live Activity就会有一个灰色的菊花遮盖层。如果设置了 relevanceScore,分数高的在灵动岛优先显示,在锁屏页面显示在最上面
更新 最新状态 state,过期时间 staleDate,提示弹窗 alert 如果有重要的更新需要提示用户,可以使用 alert 进行弹窗显示
停止 最终状态 finalState,隐藏策略 dismissalPolicy dismissalPolicy 一般选择 default,让系统决定何时隐藏过期的 Live Activity

替换 WidgetViewLiveActivity 中的 ActivityAttributes

将 WidgetViewLiveActivity.swift 替换为以下代码:
WidgetViewLiveActivity.swift

启动App,检查 Live Activity 集成状况

界面上主要有3个按钮:

点击 Start,然后将 App 放置到后台。

  • 检查灵动岛的效果

  • 长按灵动岛 Live Activity的效果

  • 检查锁屏页面的效果

 

 

你可能遇到的问题

 

显示倒计时文本、倒计时进度条/环

倒计时文本:

        Text(timerInterval: Date.now...endTime,
             pauseTime: state.pauseTime,
             countsDown: true,
             showsHours: false)

倒计时进度条/环

            ProgressView(
                timerInterval: state.startTime...state.endTime,
                countsDown: true,
                label: { EmptyView() },
                currentValueLabel: { EmptyView() }
            )
            // .progressViewStyle(.linear) // 进度条效果
            // .progressViewStyle(.circular) // 进度环效果

如果你已经下载的示例项目的代码,可以把这行代码的 showCountdownItems 改为 true,然后启动App、启动 Live Activity 就可以看到运行效果:
WidgetViewLiveActivity.swift

实际效果:

模拟器可以显示 Live Activity,但是设备不显示 Live Activity

可能的原因也许有很多种,也许 Ficow遇到的问题 可以给你一些启发。

 

总结

 

Live Activity 是一个比较实用的功能。想把它利用好,我们就需要:

  • 理解 Live Activity 适用的场景;
  • 理解 Live Activity 的各种状态,并耐心、细致地调试;
  • 妥善地处理好各种错误场景;

你的 App 集成 Live Activity 了吗?感觉如何呢? 欢迎留言与 Ficow 交流呀~

 

参考内容:
Displaying live data with Live Activities
Emoji Rangers: Supporting Live Activities, interactivity, and animations
Starting and updating Live Activities with ActivityKit push notifications

 

觉得不错?点个赞呗~

本文链接:十分钟集成 Live Activity —— Ficow的实战笔记

转载声明:本站文章如无特别说明,皆为原创。转载请注明:Ficow Shen's Blog

评论区(期待你的留言)