开发 iPhone 灵动岛 Widget 组件详细过程

4,055 阅读1分钟

部署环境

Widget开发需要安装 Xcode12+iOS14+
如果新建没有对应的widget选项, 请确认更新一下开发软件等

创建一个 Project

Create New Project -> 选择 iOS App Next -> 填写项目名称 -> finish

1.png 2.png

引入 Widget Extension

File -> New -> Target -> Widget Extension -> Next
由于是新加入的 Target, 故名字不能与项目名相同
删除Target时不能只删除文件, 还要在项目的Targets中删除

3.png 4.png

勾选 Include live Activity, Xcode会自动帮我们创建一个灵动岛的模版

5.png

灵动岛Dynamic Island有三种模式:

  • 紧凑型: 只有你的应用在应用灵动岛时, 下图的Compact
  • 最小型: 当你的应用和其它应用都在应用灵动岛时, 下图 Minimal
  • 展开型: 当用户触摸并按住紧凑时, 它会显示更多的内容, 下图Expanded

8.png

项目要启用灵动岛, 需要在 Info.plist 文件中声明开启,打开 Info.plist 文件添加SupportsLiveActivities, 并将其布尔值设置为 YES

7.png

创建完成后会生成如下的项目结构

  • app文件夹: 软件应用主程序
  • widget文件夹: 灵动岛组件配置

6.png

代码部分

app 文件下的主要是设置软件内的展示页面的
主要看 widgetLiveActivity 这个类里
从32行 dynamicIsland 开始设置灵动岛内容(即UI部分

  • Compact leading view (未展开时左边展示内容)
  • Compact trailing view(未展开时右边展示内容)
  • Minimal view(最小化时展示内容)
  • Expanded Leading (展开时左边内容)
  • Expanded Center(展开时中间内容)
  • Expanded Trailing(展开时右边内容)
  • Expanded Bottom(展开时底部内容)

9.png

在主App程序中开启灵动岛