Search code examples
swiftuikit

UIView flip not working when flipping back


I have got a single view controller app.

In IB I added a subview (centerView) to the main view and connected it to the ViewController

Then I add 2 subviews to the centerView: frontView (red) and backView (green). First time flipping works fine. FrontView replaced with backView. When I do flipping again I expect frontView on top. But what I can see is that both views become white.

Here is the code

import UIKit

class ViewController: UIViewController {

    @IBOutlet var centerView: UIView!

    var frontView: UIView!
    var backView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .orange

        let view1 = UIView(frame: self.centerView.bounds)
        view1.translatesAutoresizingMaskIntoConstraints = false
        view1.backgroundColor = .red
        view1.isHidden = false

        self.frontView = view1

        self.centerView.addSubview(view1)

        NSLayoutConstraint.activate([
            view1.leadingAnchor.constraint(equalTo: self.centerView.leadingAnchor, constant: 5),
            view1.trailingAnchor.constraint(equalTo: self.centerView.trailingAnchor, constant: -5),
            view1.topAnchor.constraint(equalTo: self.centerView.topAnchor, constant: 5),
            view1.bottomAnchor.constraint(equalTo: self.centerView.bottomAnchor, constant: -5)
        ])

        let view2 = UIView(frame: self.centerView.bounds)
        view2.translatesAutoresizingMaskIntoConstraints = false
        view2.backgroundColor = .green
        view2.isHidden = true

        self.backView = view2

        self.centerView.addSubview(view2)
        self.centerView.sendSubviewToBack(view2)

        NSLayoutConstraint.activate([
            view2.leadingAnchor.constraint(equalTo: self.centerView.leadingAnchor, constant: 5),
            view2.trailingAnchor.constraint(equalTo: self.centerView.trailingAnchor, constant: -5),
            view2.topAnchor.constraint(equalTo: self.centerView.topAnchor, constant: 5),
            view2.bottomAnchor.constraint(equalTo: self.centerView.bottomAnchor, constant: -5)
        ])


    }

    @IBAction func flip(_ sender: Any) {

        if self.frontView.isHidden == false {
            UIView.transition(from: self.frontView, to: self.backView, duration: 0.5, options: [.transitionFlipFromRight], completion: nil)
            self.frontView.isHidden = true
            self.backView.isHidden = false
        } else {
            UIView.transition(from: self.backView, to: self.frontView, duration: 0.5, options: [.transitionFlipFromLeft], completion: nil)
            self.frontView.isHidden = false
            self.backView.isHidden = true
        }
    }


}

Solution

  • Fixed it by adding .showHideTransitionViews

        @IBAction func flip(_ sender: Any) {
    
            if self.frontView.isHidden == false {
                UIView.transition(from: self.frontView, to: self.backView, duration: 0.5, options: [.transitionFlipFromRight, .showHideTransitionViews], completion: nil)
                self.frontView.isHidden = true
                self.backView.isHidden = false
            } else {
                UIView.transition(from: self.backView, to: self.frontView, duration: 0.5, options: [.transitionFlipFromLeft, .showHideTransitionViews], completion: nil)
                self.frontView.isHidden = false
                self.backView.isHidden = true
            }
        }