Burak Üstün

Flip Card

For Original Post Click Here

Overview

I’ve implemented a card flip in javascript, jquery, angularjs but now that I’ve been learning swift, I’ve been wondering how it’s done. If you’ve been wondering the same thing, you’re in luck. This post will guide you through the code necessary to make a card and flip it in swift. I have to give credit to this post, that I followed.

Content

Step 1

We first need to create the variables for the views.

class ViewController: UIViewController {
    var cardView: UIView!
    var front: UIImageView!
    var back: UIImageView!
}

Step 2

We then need to actually create the views.

class ViewController: UIViewController {

    var cardView: UIView!
    var front: UIImageView!
    var back: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = self.view.frame.width * 0.8
        let height = self.view.frame.height * 0.8
        let rect = CGRectMake(0, 0, width, height)
        
        front = UIImageView(frame: rect)
        front.image = UIImage(named: "front")
        
        back = UIImageView(frame: rect)
        back.image = UIImage(named: "back")
        
        cardView = UIView(frame: rect)
        cardView.addSubview(back)
        self.view.addSubview(cardView)
    }
    
    override func viewWillLayoutSubviews() {
        cardView.center = view.center
    }
}

Step 3

We are displaying a card, but we need to flip it.

To do that, we add a UITapGestureRecognizer

override func viewDidLoad() {
    super.viewDidLoad()
    
    let width = self.view.frame.width * 0.8
    let height = self.view.frame.height * 0.8
    let rect = CGRectMake(0, 0, width, height)
    
    let singleTap = UITapGestureRecognizer(target: self, action: Selector("tapped"))
    singleTap.numberOfTapsRequired = 1
    
    front = UIImageView(frame: rect)
    front.image = UIImage(named: "front")
    
    back = UIImageView(frame: rect)
    back.image = UIImage(named: "back")
    
    cardView = UIView(frame: rect)
    cardView.addGestureRecognizer(singleTap)
    cardView.userInteractionEnabled = true
    cardView.addSubview(back)
    self.view.addSubview(cardView)
}

We also need to create the tapped function. Which will use the UIView.transitionFromView method.

func tapped() {
    var showingSide = front
    var hiddenSide = back
    if showingBack {
        (showingSide, hiddenSide) = (back, front)
    }
    
    UIView.transitionFromView(showingSide, 
            toView: hiddenSide,
            duration: 0.7,
            options: UIViewAnimationOptions.TransitionFlipFromRight,
            completion: nil)
    
    showingBack = !showingBack
}

End Result

class ViewController: UIViewController {

    var cardView: UIView!
    var front: UIImageView!
    var back: UIImageView!
    var showingBack = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = self.view.frame.width * 0.8
        let height = self.view.frame.height * 0.8
        let rect = CGRectMake(0, 0, width, height)
        
        let singleTap = UITapGestureRecognizer(target: self, action: "tapped")
        singleTap.numberOfTapsRequired = 1
        
        front = UIImageView(frame: rect)
        front.image = UIImage(named: "front")
        
        back = UIImageView(frame: rect)
        back.image = UIImage(named: "back")
        
        cardView = UIView(frame: rect)
        cardView.addGestureRecognizer(singleTap)
        cardView.userInteractionEnabled = true
        cardView.addSubview(back)
        self.view.addSubview(cardView)
    }
    
    func tapped() {
        var showingSide = front
        var hiddenSide = back
        if showingBack {
            (showingSide, hiddenSide) = (back, front)
        }
        
        UIView.transitionFromView(showingSide, 
                toView: hiddenSide, 
                duration: 0.7,
                options: UIViewAnimationOptions.TransitionFlipFromRight,
                completion: nil)
        
        showingBack = !showingBack
    }
    
    override func viewWillLayoutSubviews() {
        cardView.center = view.center
    }
}
May 16, 2017