iOS Revisited: UIRotationGestureRecognizer

Hot

Post Top Ad

Showing posts with label UIRotationGestureRecognizer. Show all posts
Showing posts with label UIRotationGestureRecognizer. Show all posts

18 Nov 2017

UIRotationGestureRecognizer - Rotate image with Two Fingers in swift

11/18/2017 09:37:00 am 1
In this tutorial we will learn how to rotate an imageView using UIRotationGestureRecognizer.

A rotation gesture is a continuous gesture that occurs when the first two fingers that touch the screen rotate around each other

The iOS UIRotationGestureRecognizer class has a built-in way to detect rotation gesture on any view.

UIRotationGestureRecognizer - Rotate image with Two Fingers in swift

Other Gestures in iOS:

Getting Started:

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

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 Rotation Gesture:

First create an instance to UIRotationGestureRecognizer() as follow:

var rotationGesture = UIRotationGestureRecognizer()

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

rotationGesture = UIRotationGestureRecognizer(target: self, action: #selector(self.rotationGestureHandler))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(rotationGesture)

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 rotate gesture, add the following method:

@objc func rotationGestureHandler(recognizer:UIRotationGestureRecognizer){
    if let view = recognizer.view {
        view.transform = view.transform.rotated(by: recognizer.rotation)
        recognizer.rotation = 0
    }
}

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

UIRotationGestureRecognizer - Rotate image with Two Fingers in swift-gif
Download sample project with example :

Read More

15 Nov 2017

UIPanGestureRecognizer - Dragging View Example in Swift

11/15/2017 08:24:00 am 0
In this tutorial we will learn how to drag a view using UIPanGestureRecognizer.

The iOS UIPanGestureRecognizer class has a built-in way to detect pan gesture on any view.

UIPanGestureRecognizer - Dragging View Example in Swift

Other Gestures in iOS:

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

Getting Started:

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

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.4).isActive = true
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1).isActive = true

Adding Pan Gesture:

First create an instance to UIPanGestureRecognizer() as follow:

var panGesture  = UIPanGestureRecognizer()

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

panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.panGestureHandler(_:)))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(panGesture)

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 pan gesture, add the following method:

@objc func panGestureHandler(_ recognizer: UIPanGestureRecognizer){
    self.view.bringSubview(toFront: imageView)
    let translation = recognizer.translation(in: self.view)
    imageView.center = CGPoint(x: imageView.center.x + translation.x, y: imageView.center.y + translation.y)
    recognizer.setTranslation(CGPoint.zero, in: self.view)
}

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

UIPanGestureRecognizer - Dragging View Example in Swift

Download sample project with example :

Read More

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

11 Nov 2017

UITapGestureRecognizer - Single Tap & Double Tap Example in Swift 4

11/11/2017 12:41:00 am 0
The iOS UITapGestureRecognizer class has a built-in way to detect taps on any view. We can set the required taps based on our usage.

UITapGestureRecognizer - Single Tap & Double Tap Example in Swift 4

Other Gestures in iOS:

Swipe Gesture Recognizer - UISwipeGestureRecognizer
Pinch Gesture Recognizer - UIPinchGestureRecognizer

Pan Gesture Recognizer - UIPanGestureRecognizer
Long Press Gesture - UILongPressGestureRecognizer
UIRotationGestureRecognizer - Rotate Image View swift

Single Tap Gesture:

For detecting single tap gesture, here's an example:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(singleTap(gesture:)))
    view.addGestureRecognizer(tapGesture)
}

@objc func singleTap(gesture: UITapGestureRecognizer) {
    print("single tap called")
}


Double Tap Gesture:

For detecting Double tap gesture is similar to above, just we need to set numberOfTapsRequired to 2.

Here's an example:

override func viewDidLoad() {
    super.viewDidLoad()
    
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(doubleTap(gesture:)))
    tapGesture.numberOfTapsRequired = 2
    view.addGestureRecognizer(tapGesture)
}

@objc func doubleTap(gesture: UITapGestureRecognizer) {
    print("double tap called")
}

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