iOS Revisited: Swipe Gesture Recognizer

Hot

Post Top Ad

Showing posts with label Swipe Gesture Recognizer. Show all posts
Showing posts with label Swipe Gesture Recognizer. Show all posts

12 Nov 2017

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4

11/12/2017 10:01:00 am 0
The iOS UIPinchGestureRecognizer class has a built-in way to detect pinch gesture on any view.

In this tutorial we will learn Pinch Gesture Recognizer on ImageView.

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4

Other Gestures in iOS:

Single Tap & Double Tap Gesture - UITapGestureRecognizer
Swipe Gesture Recognizer - UISwipeGestureRecognizer
Pan Gesture Recognizer - UIPanGestureRecognizer
Long Press Gesture - UILongPressGestureRecognizer
UIRotationGestureRecognizer - Rotate Image View swift 

Getting Started:

Firstly create new Xcode project and save it with 'PinchGesture'.

Next open the ViewController.swift file and add the imageView as follow.

Adding ImageView:

First create imageView property as follow:

let imageView = UIImageView()

Next add imageView as sub view and give the auto layout constraints. Add the following code in viewDidLoad() method:

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(named: "cat")
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
view.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.6).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1).isActive = true

Adding Pinch Gesture:

First create an instance to UIPinchGestureRecognizer() as follow:

var pinchGesture  = UIPinchGestureRecognizer()

Next add pinchGesture to the imageView. Add the following code to the end of viewDidLoad() method:

pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(self.pincheGestureHandler))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(pinchGesture)

The isUserInteractionEnabled property of the view is set to true. Image views and labels set this property to false by default.

Finally add the action for the pinch gesture, add the following method:

@objc func pincheGestureHandler(recognizer:UIPinchGestureRecognizer){
    self.view.bringSubview(toFront: imageView)
    recognizer.view?.transform = (recognizer.view?.transform)!.scaledBy(x: recognizer.scale, y: recognizer.scale)
    recognizer.scale = 1.0
}

Run the project, we will see an image with an pinch gesture as follow:

UIPinchGestureRecognizer - Pinch Gesture Example on ImageView in Swift 4 gif

Download sample project with example :

Read More

9 Nov 2017

Swipe Gesture Recognizer On ImageView swift 4

11/09/2017 04:55:00 am 0
Swipe Gesture Recognizer is the one of the important gesture for the iOS users. It's really easy to implement, here we will show implementation to swipe gesture with an example project.

In this example project we are going to swipe image to left, right, up and down.

Swipe Gesture Recognizer On ImageView swift 4

Other Gestures in iOS:

Single Tap & Double Tap Gesture - UITapGestureRecognizer
Pinch Gesture Recognizer - UIPinchGestureRecognizer
Pan Gesture Recognizer - UIPanGestureRecognizer
Long Press Gesture - UILongPressGestureRecognizer
UIRotationGestureRecognizer - Rotate Image View swift 

Getting Started:

Firstly create new Xcode project and save it with 'SwipeGesture'.

Next open the ViewController.swift file and add the imageView as follow.

Adding ImageView:

First create imageView property as follow:

let imageView = UIImageView()

Next add imageView as sub view and give the auto layout constraints. Add the following code in viewDidLoad() method:

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.image = UIImage(named: "cat")
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
view.addSubview(imageView)
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.6).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1).isActive = true

Adding Swipe Gesture:

First create an instance to UISwipeGestureRecognizer() as follow:

var swipeGesture  = UISwipeGestureRecognizer()

Next add swipeGesture to the imageView. Add the following code to the end of viewDidLoad() method:

let directions: [UISwipeGestureRecognizerDirection] = [.up, .down, .right, .left]

for direction in directions {
    swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(self.swipwView(_:)))
    imageView.addGestureRecognizer(swipeGesture)
    swipeGesture.direction = direction
    imageView.isUserInteractionEnabled = true
    imageView.isMultipleTouchEnabled = true
}

The isUserInteractionEnabled property of the view is set to true. Image views and labels set this property to false by default.

Finally add the action for the swipe gesture in all directions:

@objc func swipwView(_ sender : UISwipeGestureRecognizer){
    UIView.animate(withDuration: 1.0) {
        if sender.direction == .right { // Swipe right action
            
            self.imageView.frame = CGRect(x: self.view.frame.size.width - self.imageView.frame.size.width, y: self.imageView.frame.origin.y , width: self.imageView.frame.size.width, height: self.imageView.frame.size.height)
        }else if sender.direction == .left{ // Swipe left action
            
            self.imageView.frame = CGRect(x: 0, y: self.imageView.frame.origin.y , width: self.imageView.frame.size.width, height: self.imageView.frame.size.height)
            
        }else if sender.direction == .up{ // Swipe up action
            
            self.imageView.frame = CGRect(x: self.view.frame.size.width - self.imageView.frame.size.width, y: 0 , width: self.imageView.frame.size.width, height: self.imageView.frame.size.height)
        }else if sender.direction == .down{ // Swipe down action
            
            self.imageView.frame = CGRect(x: self.view.frame.size.width - self.imageView.frame.size.width, y: self.view.frame.size.height - self.imageView.frame.height , width: self.imageView.frame.size.width, height: self.imageView.frame.size.height)
        }
        self.imageView.layoutIfNeeded()
        self.imageView.setNeedsDisplay()
    }
}

Run the project, we will see an image. swipe and test it works as follow:

swift 4 swipe gesture recognizer example,Swipe back and forth through array of images Swift 4,UISwipeGestureRecognizer,How to recognize swipe in all 4 directions swift 4,Handling Swipe Gestures,Detecting Swipe Gestures in iOS 11 with Swift 4,swift 3 swipe gesture recognizer.
Download sample project with example :

Read More

Post Top Ad