Building an app containing flashCards. They surely require the ability to flip a card. To do this i have a UIViewController and to avoid flipping the whole view I've implemented my subView into a container.
I have declared two subviews in the container named, frontView
and backView
. frontView
got red background and label saying front while backView
got a blue background and label saying back.
I have declared a variable so i can check which side is showened : var showingFront = true
Got a UIButton action which calls the following func:
if showingFront == true {
UIView.transitionFromView(forside, toView: bagside, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)
showingFront = false
} else {
UIView.transitionFromView(bagside, toView: forside, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)
showingFront = true
}
This flips the view back and forth but the backgroundColor disappears with the labels and i can only see the container flipping?. All help is appreciated
try this way:
in the storyboard create a UIView(width = 90, height = 132)
and change it class to " FlashCard"
also create a button to flip the flashcard.
FlashCard:
import UIKit
class ItemView: UIView {
var label:UILabel?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame:CGRect){
super.init(frame: frame)
}
convenience init(frame:CGRect, backgroundcolor:UIColor, labelText:String){
self.init(frame: frame)
self.backgroundColor = backgroundcolor
self.contentMode = .ScaleAspectFit
label = UILabel(frame: CGRectMake(0,0,50,50))
label!.textAlignment = NSTextAlignment.Center
label!.textColor = UIColor.whiteColor()
label?.center = self.center
label!.text = labelText
self.addSubview(label!)
}
}
class FlashCard: UIView {
var backView:ItemView?
var frontView:ItemView?
var isFrontView_CurrentlyVisable_onTheScreen = false
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.backgroundColor = UIColor.clearColor()
self.userInteractionEnabled=true
setupview()
}
override init(frame:CGRect){
super.init(frame: frame)
self.backgroundColor = UIColor.clearColor()
self.userInteractionEnabled=true
setupview()
}
func setupview(){
loadFront()
loadBack()
}
func loadFront(){
if frontView == nil {
frontView = ItemView.init(frame: self.bounds, backgroundcolor: UIColor.redColor(), labelText: "Front")
self.addSubview(frontView!)
frontView?.hidden = true
}
}
func loadBack(){
if backView == nil {
backView = ItemView.init(frame: self.bounds, backgroundcolor: UIColor.blueColor(), labelText: "Back")
self.addSubview(backView!)
backView?.hidden = false
}
}
func unloadBack(){
backView?.removeFromSuperview()
backView=nil
}
func flip(){
let ObjectToDisplay: ItemView
let currentlyVisableObjectOnScreen: ItemView
if isFrontView_CurrentlyVisable_onTheScreen{
ObjectToDisplay = backView!
currentlyVisableObjectOnScreen = frontView!
isFrontView_CurrentlyVisable_onTheScreen = false
}else{
ObjectToDisplay = frontView!
currentlyVisableObjectOnScreen = backView!
isFrontView_CurrentlyVisable_onTheScreen = true
}
if ObjectToDisplay.hidden{
ObjectToDisplay.hidden = false
}
print("isFrontView_CurrentlyVisable_onTheScreen?: \(isFrontView_CurrentlyVisable_onTheScreen)")
UIView.transitionFromView(currentlyVisableObjectOnScreen, toView:ObjectToDisplay, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: {(done)->() in
if done{
currentlyVisableObjectOnScreen.hidden = true
}
})
}
}
in your viewcontroller:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myButton: UIButton!
@IBOutlet weak var card: FlashCard!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
@IBAction func buttonPressed(sender: AnyObject) {
card.flip()
}
}