Screen Edge Pan Gesture iOS Tutorial

A Screen Edge Pan Gesture is a panning gesture that start near an edge of the screen. When you drag from top to bottom in iOS8 the Notification Screen is displayed. In this tutorial a soccer bal will rotate with a Screen Edge Pan Gesture. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSScreenEdgePanGestureTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

We need an image of the soccer ball,download it and add it to the project. Go to the Storyboard and drag an Image View to the main view. Select the Image View, go to the Size Inspector and fill in the following values.

Select the Image View again and go to the Property Inspector. In the Image View section select the soccer ball image in the Image field.

Select the main View and change the background color to green, The Storyboard should look like this.

Next, we need to add the Auto Layout values. Ctrl and Drag from inside the image to a little bit to the left, while staying inside the image. Hold down the Ctrl key and select both the Width and Height options.

Ctrl and Drag from the image to the top of the view. Select "Top Space to Top Layout Guide" and "Center Horizontally in Container"

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Image to the ViewController class and create the following Outlet.

Go to the ViewController.swift file and add the following properties

var screenEdgeRecognizer: UIScreenEdgePanGestureRecognizer!
var currentRadius:CGFloat = 0.0

Change the viewDidLoad method to

override func viewDidLoad() {
    super.viewDidLoad()

    screenEdgeRecognizer = UIScreenEdgePanGestureRecognizer(target: self,
                                                            action: #selector(rotateBall))
    screenEdgeRecognizer.edges = .left
    view.addGestureRecognizer(screenEdgeRecognizer)
}

a UIScreenEdgePanGestureRecognizer object is initialized. When this gesture is detected from the left side to inside of the view, the rotateBall method is called.

@objc func rotateBall(sender: UIScreenEdgePanGestureRecognizer) {
    // 1
    if sender.state == .ended {
        // 2
        if currentRadius==360.0 {
            currentRadius=0.0
        }

        UIView.animate(withDuration: 1.0, animations: {
            self.currentRadius += 90.0
            self.imageView.transform = CGAffineTransform(rotationAngle: self.currentRadius * .pi / 180.0)
        })
    }
}

You can download the source code of the IOSScreenEdgePanGestureTutorial at the ioscreator repository on  Github .