将实时活动功能引入 Apple Watch

从 iPadOS 18 和 watchOS 11 开始，将实时活动引入 Apple Watch 上的智能叠放。我们将介绍实时活动会如何显示在 Apple Watch 上，以及如何提升实时活动在智能叠放中的显示效果。我们还将探索一些其他注意事项，以确保 Apple Watch 上的实时活动能够始终显示最新的信息。

章节

资源

下载

大家好我叫 Anne 是一名框架工程师从事 watchOS 的开发很高兴能为大家介绍如何让现有的 iOS 实时活动在 Apple Watch 上提供出色体验通过实时活动你可以在多个一目了然的位置比如锁定屏幕、待机显示和灵动岛显示有关你的 App 的活动或事件的最新信息现在在 iOS 18 和 watchOS 11 中 iOS 实时活动会自动显示在 Apple Watch 上的智能叠放中首先谈谈更新到 watchOS 11 后实时活动在 Apple Watch 上的显示方式

然后我将介绍如何为智能叠放自定实时活动视图我还将详细介绍一下 watchOS 的活动更新以及如何让实时活动保持最新状态

我们首先来了解一下现有的 iOS 实时活动在运行 watchOS 11 的 Apple Watch 上如何显示

对于带有灵动岛的 iPhone 在手机保持锁定屏幕状态时实时活动会转为在灵动岛中显示紧凑的前边缘视图和后边缘视图灵动岛中的视图来自“compact leading” 和“compact trailing”视图构建器在 Apple Watch 上同样的视图会自动显示在智能叠放中一同显示的还有一个标题说明这些视图由你的 App 提供不妨借着这次绝佳的机会思考一下你的紧凑视图是否充分利用了可用空间来帮助用户及时获取最新信息在这里我的 App 在前边缘视图中显示的是预计多久送达并在后边缘视图中显示订单当前状态

iOS 上实时活动的更新会自动发送到 Apple Watch 在 iOS 上提醒更新会以动画效果显示灵动岛扩展视图在 Apple Watch 上收到提醒更新时如果提醒目前位于表盘上则系统会自动启动智能叠放显示提醒然后显示实时活动

如果某个 App 位于前台则屏幕底部会显示一个横幅同时显示灵动岛紧凑视图

轻点实时活动可全屏显示并提供在 iPhone 上打开 App 的选项

iOS 实时活动的灵动岛紧凑视图将自动显示在智能叠放中查看一下当前的视图确保显示动态更新的信息以便让用户及时了解活动的状态这项更新功能的受益者包括已更新到 iOS 18 和 watchOS 11 的用户以及你的现有 iPhone 顾客

到目前为止我已经介绍了用户更新到 iOS 18 和 watchOS 11 之后会自动经历哪些事情此外你还有机会为 Apple Watch 提供自定实时活动视图我的 App 为用户提供本地农产品订购送货上门服务用户可以通过实时活动查看订单配送状态我们来修改这个实时活动以自定用于 Apple Watch 的实时活动视图

我的实时活动目前在智能叠放中采用默认显示方式显示紧凑的灵动岛视图可以在 Xcode 中通过预览查看显示效果

在 Canvas Device Settings 中选择 All Variants 后可以在 Canvas 中一并查看所有视图样式或者也可以进入 Select 模式并将 Canvas Device Settings 更新为显示 Content Smart Stack 以便专注于我的智能叠放视图

为了针对 watchOS 智能叠放进行自定我要为我的实时活动在 WidgetConfiguration 中添加 supplementalActivityFamilies 修饰符我将使用 .small 来表明支持智能叠放现在智能叠放中会显示来自活动内容的 iOS 锁定屏幕视图而不是紧凑视图由于我采用了适用于较大视图的锁定屏幕内容设计因此在 Apple Watch 上文本会被截断我要针对智能叠放进行自定

我将获取 activityFamily 环境值然后在 activityFamily 为 small 时为我的内容提供新的布局

当 activityFamily 为 medium 时对于 iOS 锁定屏幕将使用原始内容视图布局

我可以对实时活动使用 Xcode 预览来预览我的视图在智能叠放中的显示效果

通过添加 supplementalActivityFamilies 修饰符我的实时活动现在可以在 Apple Watch 上显示自定视图

即使你没有安装“Watch”App 实时活动也适用于 Apple Watch 但如果你安装了“Watch”App 也可以通过轻点智能叠放中的实时活动选择打开“Watch”App

在“Watch”App 目标的 Build Settings 中为 Info.plist 部分中的 Supports Launch for Live Activity Attribute Types 键添加一个值要想为你的所有实时活动启动“Watch”App 请将这个值留空要想只为特定的实时活动启动请为每个应该启动“Watch”App 的 ActivityAttributes 遵从类型添加一个项目

只需编写几行代码我已经能够更新实时活动的显示方式了还能预览显示效果在 Apple Watch 上为了确保实时活动显示尽可能最新的信息并按照你设想的方式发挥作用你还应该了解一些其他的事项我要介绍一下更新频率和预算、如何处理连接受限的问题以及如何针对全天候显示模式调整实时活动视图

iPhone 和 Apple Watch 在更新频率和预算方面存在一些差异

实时活动更新会自动同步到 Apple Watch 你不必管理单独的推送令牌也不必添加任何代码为了避免影响电池续航时间对更新同步设置了预算预算阈值与 iOS 类似如果现在将推送更新用于实时活动这些更新应该会在 Apple Watch 的预算范围内并且无需额外的操作 Apple Watch 还支持在需要时提供高频更新

在 iOS App 中请考虑实时活动通过 ActivityKit 在本地更新的情况现在这些更新还会同步到 Apple Watch 并计入设备更新预算如果更新超出预算则可能不会在用户垂下手腕时立即显示出来但是当用户抬起手腕时实时活动就会显示可用的最新信息

可能导致 Apple Watch 不及时接收活动更新的另一个原因是连接状态如果 Apple Watch 与附近搭配使用的 iPhone 连接良好或者位于同一无线局域网中则更新一般会发送到 Apple Watch 在连接受限的情况下会在 Apple Watch 上优先显示开始、结束和提醒更新

系统会通过在智能叠放中显示一条有关上次连接的信息让用户知道自己可能无法看到最新信息还可以思考一下你的活动可能需要针对全天候显示模式进行哪些调整当手表处于全天候显示模式时如果用户手腕下垂系统会自动将配色方案切换到深色并降低亮度

如果视图颜色鲜艳可以使用 isLuminanceReduced 环境值来移除鲜艳的元素或降低其亮度

在我的视图中我要让仪表在亮度降低后换一个色调从而在降低亮度的同时仍然便于阅读

如果你希望实时活动具有浅色外观可以将 preferredColorScheme 设置为 light 在全天候模式下实时活动会自动采用深色外观并降低亮度诸如 primary 之类的语义色会根据配色方案自动采用相应的颜色现在我的活动视觉效果很棒并且始终尽可能显示最佳信息

从 iOS 18 和 watchOS 11 开始 iOS 实时活动会自动显示在 Apple Watch 上的智能叠放中确保灵动岛紧凑视图显示及时、相关且丰富的信息使用 supplementalActivityFamilies 为 Apple Watch 自定实时活动如需进一步了解出色的实时活动设计请观看视频 “为 Apple Watch 设计实时活动” 如果你没有 watchOS 开发经验那么实时活动可能会成为你针对 watchOS 自定 App 内容的首次尝试我们很高兴大家能够加入我们这个平台我们也希望大家进一步探索让你们的 App 也能登陆 Apple Watch 谢谢

1:28 - Existing Live Activity views

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
    }
}

3:43 - Preview Live Activities with Xcode Previews

extension DeliveryActivityAttributes.ContentState {
    static var shippedOrder: DeliveryActivityAttributes.ContentState {
        .init(
            status: .shipped,
            courierName: "Johnny"
        )
     }

     static var packedOrder: DeliveryActivityAttributes.ContentState {
         .init(
            status: .packed,
            courierName: "Contacting Courier...")
     }
}

#Preview(
    "Dynamic Island Compact",
    as: .dynamicIsland(.compact),
    using: DeliveryActivityAttributes.preview
) {
    DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

4:15 - Add .supplementalActivityFamilies to indicate support for the Smart Stack

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

4:49 - Customize view layout for the small activity family

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

5:06 - Preview customized layouts for the Smart Stack

#Preview("Content", as: .content, using: DeliveryActivityAttributes.preview) {
   DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

8:37 - Use isLuminanceReduced to remove bright elements with Always On Display

struct DeliveryGauge: View {
    @Environment(\.isLuminanceReduced) private var isLuminanceReduced
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        Gauge(value: context.state.progressPercent) {
            GaugeLabel(context: context)
        }
        .tint(isLuminanceReduced ? .gaugeDim : .gauge)
    }
}

8:57 - For Live Activities with a light appearance, use a light preferredColorScheme

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
                .preferredColorScheme(.light)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。