Is there a Swift sample code for “card” modal view style?

Question

Created Apr ’17

Replies 1

Boosts 0

Views 4.1k

Participants 2

Example of а “card” modal view can be seen in Mail compose window. The Music app in iOS 10 also adopts card-like appearance: Now Playing screen slides up, while the view below in the hierarchy zooms out, protruding slightly at the top of the screen.

What's the most elegant and idiomatic way to implement this? Is it with UIPresentationController and UIModalTransitionStyle? Is there a Storyboard-only method? I'm quite new to programming, and I would really appreciate if someone can point me to some sample code on how to do this.

Boost

Answer 1

ZanderIsMe OP

Apr ’17

I got most of the segue on my own but am having a problem, when I scale down the origin view controller the destination view controller slides up like a card and then shrinks to the size of the origin view controller. Is there a way to have the destination view controller be larger than the smaller view controller it is supposed to be in front of?

Here is my custom segue:

override func perform() {
       
        let firstVC = self.source.view as UIView!
        let secondVC = self.destination.view as UIView!
       
        let screenWidth = UIScreen.main.bounds.size.width
        let screenHeight = UIScreen.main.bounds.size.height
       
        secondVC?.frame = CGRect(x: 0.0, y: screenHeight, width: screenWidth, height: screenHeight)
       
        let window = UIApplication.shared.keyWindow
        window?.addSubview(secondVC!)
       
        secondVC?.clipsToBounds = false
       
        UIView.animate(withDuration: 0.4, delay: 0.0, options: .curveEaseOut, animations: { () -> Void in
           
            firstVC?.layer.cornerRadius = 5
            firstVC?.backgroundColor = UIColor.gray
            firstVC?.transform = CGAffineTransform(scaleX: 0.94, y: 0.94)
           
            secondVC?.frame = CGRect(x: 0.0, y: 0.0, width: screenWidth, height: screenHeight)
            UIApplication.shared.statusBarStyle = .lightContent
           
        }) { (Finished) -> Void in
            self.source.present(self.destination, animated: false, completion: nil)
        }
    }

0