GSTouchesShowingWindow-Swift

A simple tool that automatically shows all touches inside your app as they are happening, using a circular image indicator. It's useful for creating App Previews for the App Store or any kind of app videos where you need to demonstrate some rich user interaction that would be hard to showcase otherwise.

(Looking for Objective-C version? It's here.)

Example

Short interaction in Timelines, my app for tracking time.

Installation

You can just drag GSTouchesShowingWindow-Swift/Classes into your project.

How to set it up

In your AppDelegate.swift, replace var window: UIWindow? with the following code:

    var customWindow: GSTouchesShowingWindow?
    var window: UIWindow? {
        get {
            customWindow = customWindow ?? GSTouchesShowingWindow(frame: UIScreen.main.bounds)
            customWindow?.showTouchesEnabled = true		// required to enable touches to be displayed
            return customWindow
        }
        set { }
    }

Customising appearance

The color and size of touches can be altered using the appearance. The default values are pretty good but if your application uses a lot of blue, then you may want to change color for better contrast in demostration videos.

Customize your AppDelegate.swift, replace var window: UIWindow? with the following code:

    var customWindow: GSTouchesShowingWindow?
    var window: UIWindow? {
        get {
            customWindow = customWindow ?? GSTouchesShowingWindow(frame: UIScreen.main.bounds)
            customWindow?.showTouchesEnabled = true		// required to enable touches to be displayed
            customWindow?.touchAppearance = TouchAppearance(
              shortTapInitialCircleRadius: 50.0,    // default 22
              shortTapFinalCircleRadius: 70.0,      // default 57
              touchColor: UIColor.red )             // default - nice shade of blue
            return customWindow
        }
        set { }
    }

If you're using the CocoaPods integration, you also need to add the following import at the top of the file:

import GSTouchesShowingWindow_Swift

And that's it!

App Extensions

If you are using App Extensions (such as Today extension or Keyboard extension), you can also show touches in them. First, you need to integrate GSTouchesShowingWindow-Swift in your App Extension target. If you're using CocoaPods, you need to add the pod like this:

target 'Today Extension' do
    use_frameworks!	
    pod 'GSTouchesShowingWindow-Swift'
end

If you're not using CocoaPods, you need to either drag the GSTouchesShowingWindow-Swift/Classes into your extension's target, or you can set their Target Membership to include the extension as well:

Then, in your KeyboardViewController.m or TodayViewController.m, add the following line near the end of -viewDidLoad: method:

self.view.addGestureRecognizer(GSTouchesShowingGestureRecognizer())

Same as with main app target: if you're using the CocoaPods integration, you also need to import the module using:

import GSTouchesShowingWindow_Swift

Note: In Today extensions (Widgets), the touch will disappear shortly after you start dragging (both horizontally and vertically). That's to be expected because system takes over control of the gesture.

How it actually works

Inside the UIWindow subclass, I am overriding the -sendEvent method, processing all the events and directing them to a controller object that takes care of adding/moving/removing imageViews based on those events' touches. And then I call [super sendEvent]; so that the touches are forwarded to the app itself. Refer to Understanding Responders and the Responder Chain to learn more. For extensions, a UIGestureRecognizer subclass is used because it's not possible to override window.

If you have any questions, you're welcome to get in touch with me on Twitter @luksape. And if you use this when creating your app video, I'd love to hear from you!