UIGestureRecognizer works outside of UIView borders instead of inside - Ios swift

artexhibit
March 30, 2022
165 views
0 votes
2 Answers

I’ve implemented a popup notification in my app to show user the data was being updated successfully or not.

This popup is just a UIView instantiated from .xib. Here is screenshot of elements hierarchy in xib file: CLICK

Also I wanted the ability to swipe out the popup if user don’t want to see a full time it shows itself on the screen. To do that I have implemented a UIGestureRecognizer:

    private func configureTapGesture() {
    guard let window = UIApplication.shared.windows.first(where: {$0.isKeyWindow}) else { return }
    let swipe = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipes(_:)))
    swipe.direction = .up
    window.addGestureRecognizer(swipe)
}

@objc private func handleSwipes(_ sender:UISwipeGestureRecognizer) {
    if sender.direction == .up {
        UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            self.popupView.removeFromSuperview()
        }
        self.isRemovedByTap = true
    }
}

When I run the app it works only if I swipe out anywhere but not inside the popupView. Please check for the GIF: CLICK

If I replace a target from self (Popup class) to popupView (UIVisualEffectView, which is a rounded rectangle you see on GIF), then I receive an error unrecognized selector sent to instance

Here is a my full custom Popup class where I initialize the view, configure, animate and show it:

import UIKit

  class PopupView: UIView {

@IBOutlet weak var popupView: UIVisualEffectView!
@IBOutlet weak var symbol: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var descriptionLabel: UILabel!

private var isRemovedByTap = false

override init(frame: CGRect) {
    super.init(frame: frame)
    configure()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    configure()
}

private func configure() {
    if let views = Bundle.main.loadNibNamed("PopupView", owner: self) {
        guard let view = views.first as? UIView else { return }
        view.frame = bounds
        addSubview(view)
    }
}

private func configurePopup() {
    guard let window = UIApplication.shared.windows.first(where: {$0.isKeyWindow}) else { return }
    popupView.layer.cornerRadius = 20
    popupView.clipsToBounds = true
    popupView.center.x = window.frame.midX
    popupView.translatesAutoresizingMaskIntoConstraints = true
    window.addSubview(popupView)
}

private func animatePopup() {
    UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
        self.popupView.center.y += 34
    } completion: { _ in
        UIView.animate(withDuration: 0.15, delay: 10.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            if !self.isRemovedByTap {
                self.popupView.removeFromSuperview()
            }
        }
    }
}

private func configureTapGesture() {
    guard let window = UIApplication.shared.windows.first(where: {$0.isKeyWindow}) else { return }
    let swipe = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipes(_:)))
    swipe.direction = .up
    window.addGestureRecognizer(swipe)
}

@objc private func handleSwipes(_ sender:UISwipeGestureRecognizer) {
    if sender.direction == .up {
        UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            self.popupView.removeFromSuperview()
        }
        self.isRemovedByTap = true
    }
}

func showPopup(title: String, message: String, symbol: UIImage) {
    titleLabel.text = title
    descriptionLabel.text = message
    self.symbol.image = symbol
    
    configurePopup()
    animatePopup()
    configureTapGesture()
}
}

What should I change to be able to swipe out only when inside the popupView rounded rectangle?

Answers

private func configureTapGesture() {
     guard let window = UIApplication.shared.windows.first(where: {$0.isKeyWindow}) else { return }
     let swipe = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipes(_:)))
     swipe.direction = .up
     window.addGestureRecognizer(swipe)

    // you also must add this and test it
    self.addGestureRecognizer(swipe)
}

Couple issues – without seeing your xib view hierarchy, I can’t test this completely, but it should get you on your way.

You are adding the swipe gesture to the window …

The reason you can’t swipe inside the popup view is because the popup view captures the touch gestures. If you set .isUserInteractionEnabled = false you should be able to swipe inside the view.

If you want to swipe only inside the view, check the swipe location and see if the view contains that point.

Along these lines:

@objc private func handleSwipes(_ sender:UISwipeGestureRecognizer) {
    // may need to convert touch and frame
    let loc = sender.location(in: self)
    let r = popupView.frame
    if sender.direction == .up, r.contains(loc) {
        UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            self.popupView.removeFromSuperview()
        }
        self.isRemovedByTap = true
    }
}

You’ll need to debug the frame and gesture coordinates to make sure you’re checking the correct area.

Edit

To check if the swipe is inside the popupView frame, we have to do a couple things…

Add a new property — I’ll call it yAdjustment — and then in your animatePopup() func, set that to the popupView’s y origin:

var yAdjustment: CGFloat = 0

private func animatePopup() {
    UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
        self.popupView.center.y += 34
        // save the top of the popupView frame
        self.yAdjustment = self.popupView.frame.origin.y
    } completion: { _ in
        UIView.animate(withDuration: 0.15, delay: 10.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            if !self.isRemovedByTap {
                self.popupView.removeFromSuperview()
            }
        }
    }
}

then, change your swipe region testing to this:

@objc private func handleSwipes(_ sender:UISwipeGestureRecognizer) {

    // get location of swipe
    var loc = sender.location(in: popupView)

    // adjust the touch y
    loc.y -= (yAdjustment - popupView.frame.origin.y)

    // get the view bounds
    let r = popupView.bounds
    
    // only do this if
    //  swipe direct is up
    //  AND
    //  swipe location is inside popupView
    if sender.direction == .up, r.contains(loc) {
        UIView.animate(withDuration: 0.15, delay: 0.0, options: .curveLinear) {
            self.popupView.center.y -= 50
        } completion: { _ in
            self.popupView.removeFromSuperview()
        }
        self.isRemovedByTap = true
    }
    
}

The reason we have to "correct" the frame…

When you write that chained animation block, this line:

self.popupView.center.y -= 50

is executed immediately — the animation is simply delayed (by 10-seconds, in this case).

Normally, we would get the touch location in the view’s frame and see if it is contained in the bounds.

In this case, though, because the view’s frame has already been changed – even though we don’t see it yet – we have to compensate for the new location.

Please signup or login to give your own answer.

Click here to cancel reply.

UIGestureRecognizer works outside of UIView borders instead of inside – Ios swift

Answers