这儿每天分享一个 iOS 的新知识，快来重视我吧

前语

前几天一直在写小组件相关的内容，感兴趣能够先去看下：

iOS 小组件开发榜首篇：根底介绍
iOS 小组件开发第二篇：时间线
iOS 小组件开发第三篇：实战
iOS 小组件开发第四篇：小组件的尺度
iOS 小组件开发第五篇：开发可装备的小组件
iOS 小组件开发第六篇：点击事件和交互

iOS 小组件开发第七篇：锁屏小组件

从去年的 iPhone 14 Pro 开端，苹果支持了灵动岛，搭配上动画，作用十分惊艳，成功的将一个 “缺陷” 改造成了一个“功能”。

灵动岛十分适合展现一下实时信息，比如：

  • 体育赛事

  • 计时运用

  • 当时播放的音乐内容

  • 显现导航信息

  • 上传/下载速度

今日就来聊聊如何开发一个灵动岛的运用。

灵动岛装备

首要，灵动岛实际上是一个小组件，就像 iOS 14 小部件相同，这也是为什么我会放在小组件的部分来讲。

1、创立 Target

让咱们来创立一个新的 Widget Target，来到 File -> New -> Target...，创立一个 Widget Extension

iOS 小组件开发第八篇：灵动岛开发

一定要勾选 Include live Activity，然后输入称号，点击完结既可。

iOS 小组件开发第八篇：灵动岛开发

2、增加 Info.plist 装备

项目要启用灵动岛，需求在 Info.plist 文件中声明敞开，翻开 Info.plist 文件增加 NSSupportsLiveActivities，并将其布尔值设置为 YES。

iOS 小组件开发第八篇：灵动岛开发

展现部分

当咱们创立这个 Target Extension 并且勾选了 Include live Activity 之后，Xcode 会主动帮咱们创立出来一个灵动岛的模版，我目前用的是 Xcode 15，能够看下 Xcode 主动生成的模版预览：

iOS 小组件开发第八篇：灵动岛开发

灵动岛有三种烘托模式，榜首种是紧凑型，当只要你的运用在运用在运用灵动岛时，会展现成这样：

iOS 小组件开发第八篇：灵动岛开发

第二种叫最小型款式，是当你的运用和别人的运用都在运用灵动岛时，会显现成下面这种款式，体系会决议展现哪个 App 的灵动岛，并运用每个活动的最小演示显现两个实时活动：

iOS 小组件开发第八篇：灵动岛开发

第三种是展开的灵动岛款式，当用户触摸并按住紧凑或最小的演示文稿时，它会显现，这种款式能够显现更多的内容：

iOS 小组件开发第八篇：灵动岛开发

代码部分

首要代码分为两部分，一部分是 ActivityAttributes，首要用来供给灵动岛上展现的数据：

struct MyLiveActivityAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var emoji: String
    }
    var name: String
}

当咱们需求展现灵动岛的时分需求创立一份 ActivityAttributes。

另一部分是灵动岛的 UI 展现：

struct MyLiveActivityLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: MyLiveActivityAttributes.self) { context in
            // 展现锁屏页面的 UI
            VStack {
                Text("(context.attributes.name) (context.state.emoji)")
            }
            .activityBackgroundTint(Color.cyan)
            .activitySystemActionForegroundColor(Color.black)
        } dynamicIsland: { context in
            DynamicIsland {
                // 展开款式 UI
                DynamicIslandExpandedRegion(.leading) {
                    Text("左侧")
                }
                DynamicIslandExpandedRegion(.trailing) {
                    Text("右侧")
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text("底部 (context.state.emoji)")
                    Text("内容：(context.attributes.name) 自定义内容")
                }
            } compactLeading: {
                // 紧凑型款式左面 UI
                Text("左")
            } compactTrailing: {
                // 紧凑型款式右边 UI
                Text("右 (context.state.emoji)")
            } minimal: {
                // 最小型款式 UI
                Text(context.state.emoji)
            }
            .widgetURL(URL(string: "http://www.apple.com"))
            .keylineTint(Color.red)
        }
    }
}

ActivityConfiguration 的榜首个 block 用来烘托展现锁屏页面的 UI，dynamicIsland 就是用来烘托灵动岛的内容了。

DynamicIsland 目标中，榜首部分用来烘托展开款式的 UI，compactLeading 用来展现紧凑型款式左面 UI，compactTrailing 用来展现紧凑型款式右边 UI，minimal 用来展现最小型款式 UI。

关于 UI 部分，能够自由发挥，但要注意每个区域的大小。

发动灵动岛

咱们在主 App 的 ViewController 中烘托三个按钮来模拟用户到达某个条件后发动/更新和封闭灵动岛：

import ActivityKit
class ViewController: UIViewController {
    var activity: Activity<MyLiveActivityAttributes>? = nil
    override func viewDidLoad() {
        super.viewDidLoad()
        createButton(title: "发动灵动岛", y: view.center.y - 100, selector: #selector(start))
        createButton(title: "更新灵动岛", y: view.center.y - 50, selector: #selector(update))
        createButton(title: "封闭灵动岛", y: view.center.y, selector: #selector(end))
    }
    private func createButton(title: String, y: CGFloat, selector: Selector) {
        let button = UIButton(type: .system)
        button.setTitle(title, for: .normal)
        button.sizeToFit()
        view.addSubview(button)
        button.center.x = view.center.x
        button.frame.origin.y = y
        button.addTarget(self, action: selector, for: .touchUpInside)
    }
    @objc
    private func start() {
        // 创立灵动岛
        let attributes = MyLiveActivityAttributes(name: "iOS 新知")
        let state = MyLiveActivityAttributes.ContentState(emoji: " ")
        let content = ActivityContent<MyLiveActivityAttributes.ContentState>(state: state, staleDate: nil)
        do {
            self.activity = try Activity<MyLiveActivityAttributes>.request(attributes: attributes, content: content)
        } catch let error {
            print("出错了：(error.localizedDescription)")
        }
    }
    @objc
    private func update() {
        let state = MyLiveActivityAttributes.ContentState(emoji: " ")
        Task {
            await activity?.update(using: state)
        }
    }
    @objc
    private func end() {
        Task {
            await activity?.end()
        }
    }
}

发动灵动岛需求创立一个 ActivityAttributes，和一个 ActivityContent，然后调用 request(attributes: content:) 办法既可，这个办法会返回一个 Activity 目标，咱们保留这个目标，后面更新和封闭灵动岛的时分运用。

更新灵动岛只需求运用上边的 Activity 目标，调用 update(using:) 办法。

封闭灵动岛只需求运用上边的 Activity 目标，调用 end() 办法。

最后看一下作用。

当咱们发动 App，点击 “发动灵动岛” 按钮，然后把运用退到后台（前台不展现），就能够看到灵动岛上呈现了咱们设置的 UI：

iOS 小组件开发第八篇：灵动岛开发

然后看下锁屏页面，推送通知区域会看到呈现了咱们烘托的内容：

iOS 小组件开发第八篇：灵动岛开发

长按灵动岛，能够从紧凑模式变成扩展模式：

iOS 小组件开发第八篇：灵动岛开发

点击灵动岛能够翻开 App，然后点击 “更新灵动岛” 按钮，再次退到后台，能够看到灵动岛已经改写了：

iOS 小组件开发第八篇：灵动岛开发

最后点击 “封闭灵动岛” 按钮，再退到后台，灵动岛消失。

这儿每天分享一个 iOS 的新知识，快来重视我吧

本文同步自微信公众号 “iOS新知”，每天按时分享一个新知识，这儿只是同步，想要及时学到就来重视我吧！