How to detect shake gestures

About 2 min

How to detect shake gestures 관련

SwiftUI by Example

Back to Home

How to detect shake gestures | SwiftUI by Example

How to detect shake gestures

Updated for Xcode 15

SwiftUI doesn't have a built-in way to detect the user shaking their device, but it doesn't take much work to create one yourself by overriding motionEnded() in UIWindow and creating a custom view modifier.

This takes five steps:

Adding an extension to UIDevice to track a new notification that will be sent when a shake gesture happens.
Create an extension on UIWindow to override the default motionEnded() method. This is where UIKit sends shake gestures, so you should look for that happening and translate it into your new notification.
Create a custom view modifier to watch for the shake notification being posted, and call a function of your choosing when it happens.
Create a View extension that wraps up your new modifier neatly.
Try it out in a view.

Important

At the time of writing view modifiers do not work with onReceive() unless you first add onAppear(), which is why it appears above. Yes, it's empty, but it acts as a workaround for the problem.

Here's a complete code sample walking through all five steps with comments:

// The notification we'll send when a shake gesture happens.
extension UIDevice {
    static let deviceDidShakeNotification = Notification.Name(rawValue: "deviceDidShakeNotification")
}

//  Override the default behavior of shake gestures to send our notification instead.
extension UIWindow {
     open override func motionEnded(_ motion: UIEvent.EventSubtype, with event: UIEvent?) {
        if motion == .motionShake {
            NotificationCenter.default.post(name: UIDevice.deviceDidShakeNotification, object: nil)
        }
     }
}

// A view modifier that detects shaking and calls a function of our choosing.
struct DeviceShakeViewModifier: ViewModifier {
    let action: () -> Void

    func body(content: Content) -> some View {
        content
            .onAppear()
            .onReceive(NotificationCenter.default.publisher(for: UIDevice.deviceDidShakeNotification)) { _ in
                action()
            }
    }
}

// A View extension to make the modifier easier to use.
extension View {
    func onShake(perform action: @escaping () -> Void) -> some View {
        self.modifier(DeviceShakeViewModifier(action: action))
    }
}

// An example view that responds to being shaken
struct ContentView: View {
    var body: some View {
        Text("Shake me!")
            .onShake {
                print("Device shaken!")
            }
    }
}

As you can see, once you have the first four steps in place you can go ahead and add an onShake() modifier to any view you want, providing some custom code to run when the shake gesture happens – it's not straightforward to set up, but once you're done it all works neatly.