How to Swipe UIView on Button Action in all four directions

Question

I have Two UIButtons on Right and Left and a UIView At Middle of the button..

I have to swipe ContainerView with some animation on UIButton click..

If user tap on right button ContainerView swipe to .right direction....If user tap on Left button ContainerView swipe to .left direction..

I have not found it anyWhere....Need help with full coding part

I have done this on my view

override func viewDidAppear(_ animated: Bool) {
    leftSwipe()
    rightSwipe()
}

 //MARK:Left Swipe Function
func leftSwipe()
{
    let swipeLeft = UISwipeGestureRecognizer()
    swipeLeft.direction = .left   
    self.insideContainerViewSecond.addGestureRecognizer(swipeLeft)
    swipeLeft.addTarget(self, action: #selector(swipe(sender:)))
}

//MARK:Right Swipe Function
func rightSwipe()
{
    let swipeRight = UISwipeGestureRecognizer()
    swipeRight.direction = .right  
    self.insideContainerViewSecond.addGestureRecognizer(swipeRight)
    swipeRight.addTarget(self, action: #selector(swipe(sender:)))
}

//MARK: Swipe Function
@objc func swipe(sender: UISwipeGestureRecognizer)
{
    switch sender.direction
    {
    case .left:
        print("swiped left")
    case .right:
        print("swiped right")
    default:
        print("no action")
    }
}

In this image I have a UIView and two button right and left..When I swipe on my UIView It swipe Left and right without animation.....But I need to swipe my UIView on right or Left button action with flip animation

Answer 1

We have CATransition Classes with iOS. You should use this. Or you should constraint animation. Maybe this repo is helped you for first trick.

https://github.com/barankaraoguzzz/FastOnBoarding/blob/master/FOView/Classes/FOAnimation.swift

if this answer doesn't be true for this question. Come again :)

Answer 2

You have a couple different questions...

How to "simulate" a swipe-gesture on a button tap?

You could do this different ways, such as creating a showNextImage() function, and then call it on swipe-left or on right-button-tap.

Or, you could do something like this, where you create a temporary swipe gesture recognizer and pass it to your recognizer function:

@objc func leftButtonTap(_ sender: UIButton)
{
    // create a right-swipe-gesture
    let sgr = UISwipeGestureRecognizer()
    sgr.direction = .right
    self.swipe(sender: sgr)
}

@objc func rightButtonTap(_ sender: UIButton)
{
    // create a left-swipe-gesture
    let sgr = UISwipeGestureRecognizer()
    sgr.direction = .left
    self.swipe(sender: sgr)
}

You said on swipe (or button tap), you want to use flip animation to show the next (or previous) image?

You can do this by adding two image views to your "container" view. Set one view hidden. When you want to "show the next image," set the .image property of the hidden imageView and then use UIView.transition(...) to flip from the visible imageView to the hidden imageView:

private func flipMe(_ direction: UIView.AnimationOptions) -> Void {
    // fromView is the one that is NOT hidden
    let fromView = imgViewB.isHidden ? imgViewA : imgViewB
    
    // toView is the one that IS hidden
    let toView = imgViewB.isHidden ? imgViewB : imgViewA
    
    UIView.transition(from: fromView,
                      to: toView,
                      duration: 0.5,
                      options: [direction, .showHideTransitionViews],
                      completion: { b in
                        // if we want to do something on completion
                      })
}

Here is a simple example that you can run and see what happens. No @IBOutlet or @IBAction connections, so you don't need any Storyboard setup:

FlipView custom view subclass:

class FlipView: UIView {
    
    // set image names from controller
    var imageNames: [String] = [] {
        didSet {
            if let img = UIImage(named: imageNames[0]) {
                imgViewB.image = img
            } else {
                imgViewB.image = testImage()
            }
        }
    }
    
    // index counter
    private var idx: Int = 0
    
    // two image views
    private let imgViewA: UIImageView = UIImageView()
    private let imgViewB: UIImageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        
        // add both image views
        // with light-gray backgrounds
        // constraining all 4 sides to self
        [imgViewA, imgViewB].forEach { v in
            v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
            addSubview(v)
            v.translatesAutoresizingMaskIntoConstraints = false
            NSLayoutConstraint.activate([
                v.topAnchor.constraint(equalTo: topAnchor),
                v.leadingAnchor.constraint(equalTo: leadingAnchor),
                v.trailingAnchor.constraint(equalTo: trailingAnchor),
                v.bottomAnchor.constraint(equalTo: bottomAnchor),
            ])
        }
        
        // start with one of the image views hidden
        imgViewA.isHidden = true
        
    }
    
    private func flipMe(_ direction: UIView.AnimationOptions) -> Void {
        // fromView is the one that is NOT hidden
        let fromView = imgViewB.isHidden ? imgViewA : imgViewB
        
        // toView is the one that IS hidden
        let toView = imgViewB.isHidden ? imgViewB : imgViewA
        
        UIView.transition(from: fromView,
                          to: toView,
                          duration: 0.5,
                          options: [direction, .showHideTransitionViews],
                          completion: { b in
                            // if we want to do something on completion
                          })
    }
    
    func flipToPrevious() -> Void {
        // don't try to flip past the first image
        if idx == 0 {
            return
        }
        
        // decrement the index
        idx -= 1
        
        let hiddenImageView = imgViewA.isHidden ? imgViewA : imgViewB
        // get the previous image
        if let img = UIImage(named: imageNames[idx]) {
            hiddenImageView.image = img
        } else {
            hiddenImageView.image = testImage()
        }
        
        // flip it from left
        flipMe(.transitionFlipFromLeft)
    }

    func flipToNext() -> Void {
        // don't try to flip past the last image
        if idx == imageNames.count - 1 {
            return
        }
        
        // increment the index
        idx += 1
        
        let hiddenImageView = imgViewA.isHidden ? imgViewA : imgViewB
        // get the next image
        if let img = UIImage(named: imageNames[idx]) {
            hiddenImageView.image = img
        } else {
            hiddenImageView.image = testImage()
        }
        
        // flip it from right
        flipMe(.transitionFlipFromRight)
    }
    
    // get a numbered system image if the named image
    //  cannot be loaded from assets
    private func testImage() -> UIImage {
        let colors: [UIColor] = [
            .systemRed, .systemGreen, .systemBlue,
            .systemYellow, .systemTeal, .systemPurple,
        ]
        guard let img = UIImage(systemName: "\(idx+1).circle") else {
            // that should not fail, but in case it does
            return UIImage()
        }
        return img.withTintColor(colors[idx % colors.count], renderingMode: .alwaysOriginal)
    }
}

ViewController example ViewController class:

class ViewController: UIViewController {
    
    let insideContainerViewSecond: FlipView = FlipView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // respect safe area
        let g = view.safeAreaLayoutGuide
    
        // create left and right buttons
        let leftButton = UIButton()
        leftButton.translatesAutoresizingMaskIntoConstraints = false
        let leftImg = UIImage(systemName: "chevron.left.circle.fill")
        leftButton.setImage(leftImg, for: [])
        leftButton.addTarget(self, action: #selector(leftButtonTap(_:)), for: .touchUpInside)
        
        let rightButton = UIButton()
        rightButton.translatesAutoresizingMaskIntoConstraints = false
        let rightImg = UIImage(systemName: "chevron.right.circle.fill")
        rightButton.setImage(rightImg, for: [])
        rightButton.addTarget(self, action: #selector(rightButtonTap(_:)), for: .touchUpInside)
        
        insideContainerViewSecond.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(insideContainerViewSecond)
        view.addSubview(leftButton)
        view.addSubview(rightButton)
        
        NSLayoutConstraint.activate([
            
            insideContainerViewSecond.topAnchor.constraint(equalTo: g.topAnchor, constant: 80.0),
            insideContainerViewSecond.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 80.0),
            insideContainerViewSecond.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -80.0),
            insideContainerViewSecond.heightAnchor.constraint(equalTo: insideContainerViewSecond.widthAnchor, multiplier: 0.5),
            
            leftButton.centerYAnchor.constraint(equalTo: insideContainerViewSecond.topAnchor),
            leftButton.centerXAnchor.constraint(equalTo: insideContainerViewSecond.leadingAnchor),
            
            rightButton.centerYAnchor.constraint(equalTo: insideContainerViewSecond.topAnchor),
            rightButton.centerXAnchor.constraint(equalTo: insideContainerViewSecond.trailingAnchor),
            
        ])

        // your array of image names
        let imageNames: [String] = [
            "pic1", "pic2", "pic3", "pic4", "pic5", "pic6",
        ]

        insideContainerViewSecond.imageNames = imageNames

        leftSwipe()
        rightSwipe()
    }

    //MARK:Left Swipe Function
    func leftSwipe()
    {
        let swipeLeft = UISwipeGestureRecognizer()
        swipeLeft.direction = .left
        self.insideContainerViewSecond.addGestureRecognizer(swipeLeft)
        swipeLeft.addTarget(self, action: #selector(swipe(sender:)))
    }
    
    //MARK:Right Swipe Function
    func rightSwipe()
    {
        let swipeRight = UISwipeGestureRecognizer()
        swipeRight.direction = .right
        self.insideContainerViewSecond.addGestureRecognizer(swipeRight)
        swipeRight.addTarget(self, action: #selector(swipe(sender:)))
    }
    
    //MARK: Swipe Function
    @objc func swipe(sender: UISwipeGestureRecognizer)
    {
        switch sender.direction
        {
        case .left:
            print("swiped left")
            self.insideContainerViewSecond.flipToNext()
        case .right:
            print("swiped right")
            self.insideContainerViewSecond.flipToPrevious()
        default:
            print("no action")
        }
    }

    @objc func leftButtonTap(_ sender: UIButton)
    {
        // create a right-swipe-gesture
        let sgr = UISwipeGestureRecognizer()
        sgr.direction = .right
        self.swipe(sender: sgr)
    }

    @objc func rightButtonTap(_ sender: UIButton)
    {
        // create a left-swipe-gesture
        let sgr = UISwipeGestureRecognizer()
        sgr.direction = .left
        self.swipe(sender: sgr)
    }

}