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.
1
2
3
4
5
class ViewController: UIViewController {
var cardView: UIView!
var front: UIImageView!
var back: UIImageView!
}
Step 2
We then need to actually create the views.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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
}
}
