UIViewanimation trantitionfromView using UIViewfli

Question

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

Answer 1

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()
    }



}