CODEWITHSUNDEEP
swiftswiftuiwidgetwidgetliveactivity
lex_shvets
lex_shvets

Reputation: 717

SwiftUI - ProgressBar inside Live Activity

I am trying to add a simple visual progress bar to my live activity on lock screen or in Digital Island but I can't find a way to trigger progress calculation update. Seems like Timer nor @State work inside of the live activity. Its weird because both native and public apps do use progress bars in activities that update more often then once a second even when apps are suspended and look super smooth.

Apple native timer app still animates smoothly when suspended

enter image description here

One of my favorite apps - Structured also managed to do it when suspended enter image description here

I tried already even adding Lottie animations to the activity :D

Am I missing something?

Upvotes: 4

Views: 4901

Answers (2)

NSPratik
NSPratik

Reputation: 4858

ProgressView(timerInterval:countsDown:label:currentValueLabel:) updates a progress view in your live activity every second:

Take ClosedRange type inside ActivityAttributes

struct ParkWidgetAttributes: ActivityAttributes {
    
    var startDate: Date
    var endDate: Date

    // 'ContentState' represents the dynamic content of the Live Activity.
    public struct ContentState: Codable, Hashable {
        // Dynamic stateful properties about your activity go here
        var parkingTimer: ClosedRange<Date>
    }
}

Use that attribute inside View:

func minimalView(for context: ParkActivityViewContext) -> some View {
    ProgressView(
        timerInterval: context.state.parkingTimer,
        countsDown: true,
        label: {
            EmptyView()
        },
        currentValueLabel: {
            // Text or Image or whatever you want
            Text("P").foregroundColor(.blue)
        }
    )
    .progressViewStyle(.circular)
    .tint(.blue)
}

Upvotes: 0

lex_shvets
lex_shvets

Reputation: 717

Apparently you are not allowed to make custom progress bars in the live activity or at least I didn't find a way to do so. iOS is limiting your abilities to trigger timers, loops and any logical methods to update the progress bar. The only way I found doing it is by using a native progress bar

ProgressView(
    timerInterval: countFrom...endDate,
    countsDown: false,
    label: { EmptyView() },
    currentValueLabel: { EmptyView() }
)
.progressViewStyle(.circular)

Upvotes: 10

Related Questions