Много информации ≠ много кода

Документация Apple рассказывает, как начать работу с Dynamic Island, динамическим островом. Система была представлена Apple в сентябре 2022 года, на данный момент она есть только в моделях iPhone 14 Pro и iPhone 14 Pro Max. С Dynamic Island можно анимированно показывать информацию вокруг области выреза фронтальной камеры iPhone, которую мы привыкли называть «чёлкой».

В этой статье мы рассмотрим пример базовой работы с размещением контента в Dynamic Island для его разных состояний.

Для сборки проекта нужно запустить Xcode версии не ниже 14.1 Beta. 

Этот пример основан на документации Apple. Ещё вы увидите работу с данными, которые отправляются в Activity в Dynamic Island.

Activity — это практически виджет, как виджеты в iOS 14. Мы настраиваем виджет для разных состояний и объявляем его пользовательский интерфейс с помощью SwiftUI. Основное приложение добавляет Activity, потом удаляет его и обновляет информацию, отправляя полезные данные. 

Ещё один способ обновить Live Activity — использовать push-уведомления. В отличие от других виджетов, Live Activity не может обновляться, выходя в сеть, поэтому это делает основное приложение или push-уведомления.

(прим. переводчиков)

В конце реализации мы получим следующий результат:

У нас есть два view для компактного состояния (compact) и четыре view для расширенного (expanded).

Compact (компактный) — «обычное» состояние, когда мы выходим из приложения, и оно «сжимается» в динамический остров.

Expanded  (расширенный) — когда пользователь удерживает нажатие на динамическом острове, Activity временно расширяется, чтобы получить больше места и элементов управления.

(прим. переводчиков)

Создайте новый проект iOS и выберите проект в Project Navigator на панели слева.

Перейдите на вкладку Info в настройках проекта, наведите курсор на последнюю запись, нажмите “+” и добавьте новое свойство. Оно должно называться NSSupportsLiveActivities, значение должно быть типа Boolean, параметр — YES.

Важно, чтобы это было в info.plist таргета приложения, а не в каком-либо из его расширений.

Начнём

Я собираюсь создать Form Section, с помощью которой в дальнейшем будет происходить управление временем жизненного цикла Live Activity.

import SwiftUI

struct TimeSliders: View {
    let title: String
    @Binding var minutes: Double
    @Binding var seconds: Double
    
    var body: some View {
        Section(title) {
            LabeledContent("Minutes", value: minutes, format: .number)
            Slider(value: $minutes, in: 0...60) {
                Text("Minutes")
            }
            LabeledContent("Seconds", value: seconds, format: .number)
            Slider(value: $seconds, in: 0...59) {
                Text("Seconds")
            }
        }
    }
}

Для визуализации view, отображаемых при расширенном состоянии Live Activity, система делит область для контента на секции Center, Leading, Trailing и Bottom, как на схеме:

Для сжатого состояния предусмотрены секции CompactLeading и CompactTrailing.

Во view, приведенном ниже, можно увидеть доступные для редактирования пользователем области Dynamic Island. Каждой части дана пользовательская строка, хотя рекомендую, чтобы эти строки были короткими: многие из них предназначены для маленьких иконок. Ещё здесь можно размещать эмодзи ?.

import SwiftUI

struct ActivityTextFields: View {
    @Binding var centreText: String
    @Binding var bottomText: String
    @Binding var leadingText: String
    @Binding var trailingText: String
    @Binding var compactLeadingText: String
    @Binding var compactTrailingText: String
    
    var body: some View {
        Section("Centre Text") {
            TextField("Centre Text", text: $centreText)
        }
        Section("Bottom Text") {
            TextField("Bottom Text", text: $bottomText)
        }
        Section("Leading Text") {
            TextField("Leading Text", text: $leadingText)
        }
        Section("Trailing Text") {
            TextField("Trailing Text", text: $trailingText)
        }
        Section("Compact Leading Text") {
            TextField("Compact Leading Text", text: $compactLeadingText)
        }
        Section("Compact Trailing Text") {
            TextField("Compact Trailing Text", text: $compactTrailingText)
        }
    }
}

Ниже приведена моя реализация протокола ActivityAttributes. С его помощью хранится текст, отображающийся в определенных позициях Dynamic Island.

import Foundation
import ActivityKit

struct MyActivityAttributes: ActivityAttributes {
    
    public struct ContentState: Codable, Hashable {
        var timerRange: ClosedRange<Date>
    }
    var bottomText: String
    var centreText: String
    var leadingText: String
    var trailingText: String
    var compactLeadingText: String
    var compactTrailingText: String
    var minimalText: String
}

Эту структуру я буду использовать для отображения текущей Live Activity в реальном времени после создания.

Обратите внимание, что я использую Section с названием Time Left, который передает timerInterval в Text. Это новый простой способ отображения таймера с использованием только Text и ClosedRange<Date>. Создание этого объекта ClosedRange<Date> произойдет позже, но его можно использовать, если нужен таймер в Dynamic Island или в виджете на экране блокировки.

import SwiftUI
import ActivityKit

struct ActivityDetailsView: View {
    let activity: Activity<MyActivityAttributes>?
    let timerRange: ClosedRange<Date>
    
    var body: some View {
        if let activity {
            Section("Time Left") {
                Text(timerInterval: timerRange)
            }
            Section ("Text") {
                LabeledContent("Arrival Time", value: timerRange.upperBound, format: .dateTime)
                LabeledContent("Centre Text", value: activity.attributes.centreText)
                LabeledContent("Bottom Text", value: activity.attributes.bottomText)
                LabeledContent("Leading Text", value: activity.attributes.leadingText)
                LabeledContent("Trailing Text", value: activity.attributes.trailingText)
                LabeledContent("Compact Leading Text", value: activity.attributes.compactLeadingText)
                LabeledContent("Compact Trailing Text", value: activity.attributes.compactTrailingText)
            }
        }
    }
}

Я сохраняю все данные в моём типе ContentView, но пока он не соответствует протоколу View. Функция createActivity использует новый тип MyActivityAttributes для создания Activity с выбранными пользователем данными.

import ActivityKit
import SwiftUI

struct ContentView {
    @State var activity: Activity<MyActivityAttributes>?
    @State var minutes = 1.0
    @State var seconds = 0.0
    @State var future = Date.distantFuture
    @State var timerRange = Date.now...Date.distantFuture
    @State var bottomText = "B"
    @State var centreText = "C"
    @State var leadingText = "L"
    @State var trailingText = "T"
    @State var compactLeadingText = "A"
    @State var compactTrailingText = "B"
    @State var minimalText = "M"
    @State var activityExpanded = true
    
    func createActivity() {
        future = Calendar.current
            .date(byAdding: .minute, value: Int(minutes), to: Date())!
        future = Calendar.current
            .date(byAdding: .second, value: Int(minutes), to: future)!
        timerRange = Date.now...future
        let initialContentState = MyActivityAttributes
            .ContentState(timerRange: timerRange)
        let activityAttributes = MyActivityAttributes(
            bottomText: bottomText, centreText: centreText,
            leadingText: leadingText, trailingText: trailingText,
            compactLeadingText: compactLeadingText,
            compactTrailingText: compactTrailingText, minimalText: minimalText
        )
        do {
            activity = try Activity
                .request(attributes: activityAttributes, contentState: initialContentState)
            print("Requested Live Activity \(String(describing: activity?.id)).")
            activityExpanded.toggle()
        } catch (let error) {
            print("Error requesting Live Activity \(error.localizedDescription).")
        }
    }
}

Теперь я добавлю соответствие протоколу View.

Функция createActivity теперь будет добавлена как действие при нажатии Button в Form. Она будет сворачивать DisclosureGroup с параметрами Activity, чтобы отобразить данные Activity в ActivityDetailsView. TimeSliders и ActivityTextFields будут скрыты, но DisclosureGroup можно открыть снова, чтобы при необходимости создать другую Activity.

import SwiftUI

extension ContentView: View {
    
    var body: some View {
        Form {
            DisclosureGroup("Activity", isExpanded: $activityExpanded) {
                TimeSliders(title: "Activity End", minutes: $minutes, seconds: $seconds)
                ActivityTextFields(
                    centreText: $centreText, bottomText: $bottomText,
                    leadingText: $leadingText, trailingText: $trailingText,
                    compactLeadingText: $compactLeadingText,
                    compactTrailingText: $compactTrailingText
                )
                Button("Start", action: createActivity)
            }
            ActivityDetailsView(activity: activity, timerRange: timerRange)
        }
    }
}

Создание виджета

Переходим к следующему шагу.

Перейдите в File > New > Target… и создайте расширение виджета. Я своё назвал DynamicIslandWidget.

Этот пример довольно прост для понимания, поэтому я не углублялся, чтобы сделать подходящий виджет экрана блокировки. Text("N/A") отобразится в нижней части экрана блокировки, но вы можете менять его на всё, что хотите.

import WidgetKit
import SwiftUI

@main
@available(iOS 16.1, *)
struct DynamicIslandWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: MyActivityAttributes.self) { context in
            Text("N/A")
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    Text(context.attributes.leadingText)
                        .foregroundColor(.indigo)
                        .font(.title2)
                }
                DynamicIslandExpandedRegion(.trailing) {
                        Text(context.attributes.trailingText)
                }
                DynamicIslandExpandedRegion(.center) {
                    Text(context.attributes.centreText)
                        .lineLimit(1)
                        .font(.caption)
                }
                DynamicIslandExpandedRegion(.bottom) {
                        Text(context.attributes.bottomText)
                    .foregroundColor(.indigo)
                }
            } compactLeading: {
                Text(context.attributes.compactLeadingText)
            } compactTrailing: {
                Text(context.attributes.compactTrailingText)
            } minimal: {
                Text(context.attributes.minimalText)
            }
            .keylineTint(.yellow)
        }
    }
}

Ниже — результат для сжатого и расширенного состояний Dynamic Island.

Обратите внимание: чтобы приложение свернулось в Dynamic Island, необходимо вернуться к Home Screen.

При одном нажатии на Dynamic Island приложение снова откроется. При удержании откроется расширенное состояние Dynamic Island.

Очевидно, здесь можно передать для отрисовки что-то более сложное, чем строки. Что и в каком именно месте будет отображаться, выбирать вам.

Динамический остров может быть полезен, когда вы хотите показать обновленную информацию о текущей задаче. Например, обновления в реальном времени для спортивного или навигационного приложения, информация обратного отсчета приложения таймера, элементы управления музыкой для музыкальных приложений, данные о загрузке или скачивания файла и т.д.

(прим. переводчиков)

Другие наши статьи по iOS-разработке: