CODEWITHSUNDEEP
uiactivityindicatorviewwatchkit
stk
stk

Reputation: 6461

Is there an ActivityIndicator in WatchKit for Apple Watch?

Is there an ActivityIndicator (or something like it) in WatchKit for Apple Watch? How do you all give the user feedback about some longer lasting background activity?

Upvotes: 37

Views: 22642

Answers (9)

zdravko zdravkin
zdravko zdravkin

Reputation: 2378

use default one ProgressView() supported on watchos https://developer.apple.com/documentation/SwiftUI/ProgressView

Upvotes: 0

Phil Dukhov
Phil Dukhov

Reputation: 87804

SwiftUI has a built-in solution:

ProgressView()

It'll look like this:

Upvotes: 5

Den
Den

Reputation: 3591

I made it similar to the watchOS indicator with swiftUI.

enter image description here

import SwiftUI

struct ActivityIndicatorView: View {

    // MARK: - Value
    // MARK: Public
    @Binding var isAnimating: Bool


    // MARK: Private
    private let radius: CGFloat = 24.0
    private let count = 18
    private let interval: TimeInterval = 0.1

    private let point = { (index: Int, count: Int, radius: CGFloat, frame: CGRect) -> CGPoint in
        let angle   = 2.0 * .pi / Double(count) * Double(index)
        let circleX = radius * cos(CGFloat(angle))
        let circleY = radius * sin(CGFloat(angle))

       return CGPoint(x: circleX + frame.midX, y: circleY + frame.midY)
   }

   private let timer = Timer.publish(every: 1.8, on: .main, in: .common).autoconnect()     // every(1.8) = count(18) / interval(0.1)

   @State private var scale: CGFloat  = 0
   @State private var opacity: Double = 0

   // MARK: - View
   var body: some View {
       GeometryReader { geometry in
            ForEach(0..<self.count) { index in
                Circle()
                    .fill(Color.white)
                    .frame(width: 3.0, height: 3.0)
                    .animation(nil)
                    .opacity(self.opacity)
                    .scaleEffect(self.scale)
                    .position(self.point(index, self.count, self.radius, geometry.frame(in: .local)))
                    .animation(
                        Animation.easeOut(duration: 1.0)
                            .repeatCount(1, autoreverses: true)
                            .delay(TimeInterval(index) * self.interval)
                     )
             }
             .onReceive(self.timer) { output in
                self.update()
             }
        }
        .rotationEffect(.degrees(10.0))
        .opacity(isAnimating == false ? 0 : 1.0)
        .onAppear {
            self.update()
        }
    }



    // MARK: - Function
    // MARK: Private
    private func update() {
        scale   = 0 < scale ? 0 : 1.0
        opacity = 0 < opacity ? 0 : 1.0

        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            self.scale   = 0
            self.opacity = 0
        }
    }
}

#if DEBUG
struct ActivityIndicatorView_Previews: PreviewProvider {

    static var previews: some View {
        let view = ActivityIndicatorView(isAnimating: .constant(true))

        return Group {
             view
                 .previewDevice("Apple Watch Series 5 - 44mm")

             view
                 .previewDevice("Apple Watch Series 4 - 40mm")

             view
                 .previewDevice("Apple Watch Series 3 - 42mm")

             view
                 .previewDevice("Apple Watch Series 3 - 38mm")
         }
     }
 }
 #endif

Upvotes: 4

T. Christiansen
T. Christiansen

Reputation: 1038

Here is an simple text indicator, which uses a @State attribute:

struct MyView: View {
    private let loaderSpeed = 0.1 // seconds per state
    private let loaderStates = [
        "•       ",
        " •      ",
        "  •     ",
        "   •    ",
        "    •   ",
        "     •  ",
        "      • ",
        "       •",
        "      • ",
        "     •  ",
        "    •   ",
        "   •    ",
        "  •     ",
        " •      ",
    ]
    @State private var loaderMessage = ""
    @State private var loaderState = 0 {
        didSet {
            if self.loaderState > 0 {
                DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + self.loaderSpeed) {
                    if self.loaderState > 0 {
                        self.loaderMessage = self.loaderStates[self.loaderState-1]
                        if self.loaderState >= self.loaderStates.count {
                             self.loaderState = 1
                        } else {
                            self.loaderState += 1
                        }
                    }
                }

            }
        }
    }

    var body: some View {
        HStack() {
            Spacer()
            Text("Loading:")
            Text(loaderMessage).onAppear { self.loaderState = 1 }
            Spacer()
        }
    }
}

set loaderState = 1 to start the loader

set loaderState = 0 to stop the loader

Upvotes: 1

Sam Spencer
Sam Spencer

Reputation: 8609

Edit: This answer was originally posted prior to the introduction of Apple Watch models with cellular and wifi connectivity, and thus may no longer apply on newer models of the device (considering significant performance improvements).

This thread on the Apple Developer forums has an authoritative answer from an Apple engineer about why you shouldn't be performing network operations with Apple Watch.

There are two big reasons not to perform networking operations from your watch app / extension:

  1. Users are interacting with their watches for only a brief period of time. See the Human Interface guidelines on this one.

    If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds. So interactions should be brief and interfaces should be simple.

  2. The system may deadlock if the network request does not complete.

    Our recommendation is that, in general, you should not perform complex networking operations inside a WatchKit Extension...

    [Apple recommends that developers] have a single process that is in charge of updating the information in your database (likely your iOS app), and then your extensions would have (essentially) read-only access to this [cached] database....

That being said. If you really need a UIActivityIndicator, rdar://19363748 (I don't think this one has been open radar-ed yet), developers have already filed requests for official support.

You can create a series of images in the activity indicator style of your choice and then animate them using the startAnimatingWithImagesInRange:duration:repeatCount: API. See Apple's Lister app for an example of animation.

Alternatively, look here for a WatchKit Animation tutorial and included "spinner" graphics.

Upvotes: 17

Tim Johnsen
Tim Johnsen

Reputation: 1491

I built a simple activity indicator for the Apple Watch, available here https://github.com/tijoinc/WatchActivityIndicator

Upvotes: 5

Belboz
Belboz

Reputation: 25

In my opinion, trying to create your own Spinner is using excessive resources. If Apple thought it was a good idea, they would have suggested it.

I would instead just have an Image that you adjust the Alpha. Use a boolean to see if you should be adding or subtracting Alpha.

if (add)
    {
        count=count+5;
        if (count==100)
        {
            add=false;
        }
    }
    else
    {
        count=count-5;
        if (count==0)
        {
            add=true;
        }
    }

    float thealpha=((float)count/100);
    [self.scanb setAlpha:thealpha];

}

Upvotes: 2

Mike Swanson
Mike Swanson

Reputation: 3347

Just to add to the options, I've created a JBWatchActivityIndicator project on GitHub that lets you generate your own image sequences: https://github.com/mikeswanson/JBWatchActivityIndicator

It also includes Apple-like activity indicator animations if you don't want to create your own.

Upvotes: 22

lvp
lvp

Reputation: 2088

There is no method for displaying ActivityIndicator in WatchKit Framework. However you can prepare some circular image and easily create infinite animation yourself. Prepare images and name them like this frame-0, frame-1, frame-2...frame-n

and then in your code:

    [self.yourInterfaceImage setImageNamed:@"firstFrame-"]; //setting first frame
    [self.yourInterfaceImage startAnimatingWithImagesInRange:[self.model imageRange]
                                               duration:0.4
                                            repeatCount:0];
    // [self.model imageRange] will return NSRange from 0 to n
    // repeatCount == 0 means infinity. Of course you can set some limit, like 100.

Hope this helps.

Upvotes: 4

Related Questions