How to animate a custom view to a custom view

Question

I'm building a flashcard-like app, and I'm using a library KolodaView: https://github.com/Yalantis/Koloda

I have this extension which returns a UIView as the front of a flashcard:

extension StudyViewController: KolodaViewDataSource {

func kolodaNumberOfCards(koloda:KolodaView) -> UInt {
    return UInt(memories.count)
}

func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    return UIImageView(image: memories[Int(index)].frontImage)
}

func koloda(koloda: KolodaView, viewForCardOverlayAtIndex index: UInt) -> OverlayView? {

    return NSBundle.mainBundle().loadNibNamed("OverlayView",owner: self, options: nil)[0] as? OverlayView
}
}

And I want to be able to transform the from view to the back view with a tap:

func koloda(koloda: KolodaView, didSelectCardAtIndex index: UInt) {

    let frontView: UIView = koloda as KolodaView
    let backView: UIView = UIImageView(image: memories[Int(index)].backImage)

    if showingFront == true {
        UIView.transitionFromView(frontView, toView: backView, duration: 1, options: UIViewAnimationOptions.TransitionCrossDissolve, completion: nil)
    } else {
        UIView.transitionFromView(backView, toView: frontView, duration: 1, options: UIViewAnimationOptions.TransitionCrossDissolve, completion: nil)
        showingFront = false
    }
}

The transition was successful but after it finishes, the flashcard will turn from a KolodaView to a giant UIView

How do I transform a KolodaView to anther KolodaView?

Eugene H · Answer 1 · 2016-08-14T14:18:41.873

I have not used KolodaView so my answers are more generic to the problem at hand.

Two approaches

a. Variant of your current approach (Hackish way)

As the library do not expose the reference to the shown imageView, you will first need to maintain your internal set of imageView for later use.

private var myImageViews: [Int: UIImageView] = [:]
func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    let imageView = UIImageView(image: memories[Int(index)].frontImage)
    myImageViews[Int(index)] = imageView
    return imageView
}

Animate view using your current approach and update the final state of the original image using the completion block.

UIView.transitionFromView(frontView,
                          toView: backView,
                          duration: duration,
                          options: [.TransitionCrossDissolve, .ShowHideTransitionViews],
                          completion: { [weak self] (finished: Bool) in
        let imageView = myImageViews[Int(index)]
        imageView.image = memories[Int(index)].frontImage
        frontView.hidden = false
        backView.hidden = true
        backView.removeFromSuperview()
})

b. Return a custom view in the datasource method, and toggle its internal state in didSelectCardAtIndex

private var myCustomViews: [Int: MyCustomView] = [:]
func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    let customView = MyCustomView(frontImage: memories[Int(index)].frontImage, 
                                  backImage: memories[Int(index)].backImage)
    myCustomViews[Int(index)] = customView
    return customView
}

func koloda(koloda: KolodaView, didSelectCardAtIndex index: UInt) {
    let customView = myCustomViews[Int(index)]
    customView.toggleFrontBackState()
}

In this case, the implementation for toggleFrontBackState will contain the code of your initial implementation (customView.showingFront, transitionFromView). Let me know if you need more clarification.

EDIT

class MyCustomView: UIView {
    private(set) lazy var frontView: UIImageView = self.makeFrontView()
    private(set) lazy var backView: UIImageView = self.makeBackView()
    var showingFront: Bool = false

    init(frontImage: UIImage?, backImage: UIImage?){
        super.init(frame: CGRectZero)
        frontView.image = frontImage
        backView.image = backImage
        backView.hidden = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func toggleFrontBackState() {
        if showingFront {
            UIView.transitionFromView(frontView, toView: backView, duration: 1, 
                                      options: [.TransitionCrossDissolve, .ShowHideTransitionViews], completion: nil)
        } else {
            UIView.transitionFromView(backView, toView: frontView, duration: 1, 
                                      options: [.TransitionCrossDissolve, .ShowHideTransitionViews] , completion: nil)
        }
        showingFront = !showingFront
    }

    func makeFrontView() -> UIImageView {
        return UIImageView()
    }

    func makeBackView() -> UIImageView {
        return UIImageView()
    }
}

Can you expand a little on the b methods? How do you implement `MyCustomView` class and `toggleFrontBackState()` method? — Bright, Aug 12 '16 at 12:20
It seems like the `kolodaviewDatasource` only accepts a single `UIImageView` as the return value, whenever I try to pass 2 `UIImageView`, it becomes blank — Bright, Aug 14 '16 at 08:23
You should return MyCustomView (not two ImageView). See code in approach B — Eugene H, Aug 14 '16 at 08:59
Just initialise a UIImageView in those function. Updated code section above — Eugene H, Aug 14 '16 at 13:17
Then Xcode sends an error say: use of self in property access `front/backView` before super.init() initialises — Bright, Aug 14 '16 at 13:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120957/discussion-between-eugene-h-and-bright-future). — Eugene H, Aug 15 '16 at 11:01

How to animate a custom view to a custom view

1 Answers1