Bright Future Bright Future - 1 month ago 4
iOS Question

Display 2 view controllers at the same time with animation

I'm following this awesome video to create a custom transition for my project, because I'm developing for the iPad, so instead of presenting destination view controller full screen, I want to have it occupy half of the screen like this:

enter image description here

My code of the custom transition class is:

class CircularTransition: NSObject {

var circle = UIView()
var startingPoint = CGPoint.zero {
didSet {
circle.center = startingPoint
}
}
var circleColor = UIColor.white
var duration = 0.4

enum circularTransitionMode: Int {
case present, dismiss
}
var transitionMode = circularTransitionMode.present
}

extension CircularTransition: UIViewControllerAnimatedTransitioning {

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return duration
}

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView
if transitionMode == .present {
if let presentedView = transitionContext.view(forKey: UITransitionContextViewKey.to) {

var viewCenter = presentedView.center
var viewSize = presentedView.frame.size


if UIDevice.current.userInterfaceIdiom == .pad {
viewCenter = CGPoint(x: viewCenter.x, y: viewSize.height)
viewSize = CGSize(width: viewSize.width, height: viewSize.height)
}

circle = UIView()
circle.frame = frameForCircle(withViewCenter: viewCenter, size: viewSize, startPoint: startingPoint)
circle.layer.cornerRadius = circle.frame.size.width / 2
circle.center = startingPoint
circle.backgroundColor = circleColor
circle.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
containerView.addSubview(circle)

presentedView.center = startingPoint
presentedView.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
presentedView.alpha = 0
containerView.addSubview(presentedView)

UIView.animate(withDuration: duration, animations: {
self.circle.transform = CGAffineTransform.identity
presentedView.transform = CGAffineTransform.identity
presentedView.alpha = 1
presentedView.center = viewCenter
}, completion: {(sucess: Bool) in transitionContext.completeTransition(sucess)})
}
} else {
if let returningView = transitionContext.view(forKey: UITransitionContextViewKey.from) {
let viewCenter = returningView.center
let viewSize = returningView.frame.size

circle.frame = frameForCircle(withViewCenter: viewCenter, size: viewSize, startPoint: startingPoint)
circle.layer.cornerRadius = circle.frame.size.width / 2
circle.center = startingPoint

UIView.animate(withDuration: duration + 0.1, animations: {
self.circle.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
returningView.transform = CGAffineTransform(scaleX: 0.001, y: 0.001)
returningView.center = self.startingPoint
returningView.alpha = 0
}, completion: {(success: Bool) in
returningView.center = viewCenter
returningView.removeFromSuperview()
self.circle.removeFromSuperview()
transitionContext.completeTransition(success)
})
}
}
}

func frameForCircle(withViewCenter viewCenter: CGPoint, size viewSize: CGSize, startPoint: CGPoint) -> CGRect {

let xLength = fmax(startingPoint.x, viewSize.width - startingPoint.x)
let yLength = fmax(startingPoint.y, viewSize.height - startingPoint.y)
let offsetVector = sqrt(xLength * xLength + yLength * yLength) * 2
let size = CGSize(width: offsetVector, height: offsetVector)

return CGRect(origin: CGPoint.zero, size: size)

}
}


And the part of code in my view controller:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let secondVC = segue.destination as! ResultViewController
secondVC.transitioningDelegate = self
secondVC.modalPresentationStyle = .custom
}

// MARK: - Animation

func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {

transtion.transitionMode = .dismiss
transtion.startingPoint = calculateButton.center
transtion.circleColor = calculateButton.backgroundColor!
return transtion
}

func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {

transtion.transitionMode = .present
transtion.startingPoint = calculateButton.center
transtion.circleColor = calculateButton.backgroundColor!
return transtion
}


But the controller shows up full screen.

Answer

So I have finished creating my answer, It takes a different approach than the other answers so bear with me.

Instead of adding a container view what I figured would be the best way was to create a UIViewController subclass (which I called CircleDisplayViewController). Then all your VCs that need to have this functionality could inherit from it (rather than from UIViewController).

This way all your logic for presenting and dismissing ResultViewController is handled in one place and can be used anywhere in your app.

The way your VCs can use it is like so:

class AnyViewController: CircleDisplayViewController { 

    /* Only inherit from CircleDisplayViewController, 
      otherwise you inherit from UIViewController twice */

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func showCircle(_ sender: UIButton) {

        openCircle(withCenter: sender.center, radius: nil, infoToPass: "Info Passed", moreInfoToPass: 0)

        //I'll get to this stuff in just a minute

    }

}

Where showCircle will present your ResultViewController using the transitioning delegate with the circle center at the sending UIButtons center.

The CircleDisplayViewController subclass is this:

class CircleDisplayViewController: UIViewController, UIViewControllerTransitioningDelegate, ResultDelegate {

    private enum CircleState {
        case collapsed, visible
    }

    private var circleState: CircleState = .collapsed

    private lazy var resultViewController = UIStoryboard.resultViewController()

    private lazy var transition = CircularTransition()

    func openCircle(withCenter center: CGPoint, radius: CGFloat?, infoToPass: String, moreInfoToPass: Int) {

        let circleCollapsed = (circleState == .collapsed)

        DispatchQueue.main.async { () -> Void in

            if circleCollapsed {

                self.addCircle(withCenter: center, radius: radius, infoToPass: infoToPass, moreInfoToPass: moreInfoToPass)

            }

        }

    }

    private func addCircle(withCenter circleCenter: CGPoint, radius: CGFloat?, infoToPass: String, moreInfoToPass: Int) {

        var circleRadius: CGFloat!

        if radius == nil {
            circleRadius = view.frame.size.height/2.0
        } else {
            circleRadius = radius
        }

        resultViewController.transitioningDelegate = self
        resultViewController.infoToPass = circleInfo
        resultViewController.moreInfoToPass = moreInfoToPass
        resultViewController.delegate = self

        resultViewController.modalPresentationStyle = .custom

        let resultOrigin = CGPoint(x: 0.0, y: circleCenter.y - circleRadius)
        let resultSize = CGSize(width: view.frame.size.width, height: (view.frame.size.height - circleCenter.y) + circleRadius)

        resultViewController.view.frame = CGRect(origin: resultOrigin, size: resultSize)

        transition.circle = UIView()
        transition.startingPoint = circleCenter
        transition.radius = circleRadius

        transition.circle.frame = circleFrame(radius: transition.radius, center: transition.startingPoint)

        present(resultViewController, animated: true, completion: nil)

    }

    func collapseCircle() { //THIS IS THE RESULT DELEGATE FUNCTIONS

        dismiss(animated: true, completion: nil)

    }

    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {

        transition.transitionMode = .dismiss
        transition.circleColor = UIColor.red
        return transition

    }

    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {

        transition.transitionMode = .present
        transition.circleColor = UIColor.red
        return transition

    }

    func circleFrame(radius: CGFloat, center: CGPoint) -> CGRect {
        let circleOrigin = CGPoint(x: center.x - radius, y: center.y - radius)
        let circleSize = CGSize(width: radius*2, height: radius*2)
        return CGRect(origin: circleOrigin, size: circleSize)
    }

}

public extension UIStoryboard {
    class func mainStoryboard() -> UIStoryboard { return UIStoryboard(name: "Main", bundle: Bundle.main) }
}

private extension UIStoryboard {

    class func resultViewController() -> ResultViewController {
        return mainStoryboard().instantiateViewController(withIdentifier: "/* Your ID for ResultViewController */") as! ResultViewController
    }

}

The only function that is called by the VCs that inherit from DisplayCircleViewController is openCircle, openCircle has a circleCenter argument (which should be your button center I'm guessing), an optional radius argument (if this is nil then a default value of half the view height is taken, and then whatever else you need to setup ResultViewController.

In the addCircle func there is some important stuff:

you setup ResultViewController however you have to before presenting (like you would in prepare for segue),

then setup the frame for it (I tried to make it the area of the circle that is visible but it is quite rough here, might be worth playing around with),

then this is where I reset the transition circle (rather than in the transition class), so that I could set the circle starting point, radius and frame here.

then just a normal present.

If you haven't set an identifier for ResultViewController you need to for this (see the UIStoryboard extensions)

I also changed the TransitioningDelegate functions so you don't set the circle center, this is because to keep it generic I put that responsibility to the ViewController that inherits from this one. (see top bit of code)

Finally I changed the CircularTransition class

I added a variable:

var radius: CGFloat = 0.0 //set in the addCircle function above

and changed animateTransition:

(removed the commented out lines):

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

    let containerView = transitionContext.containerView

    if transitionMode == .present {
        if let presentedView = transitionContext.view(forKey: UITransitionContextViewKey.to) {

           ...

           // circle = UIView()
           // circle.frame = frameForCircle(withViewCenter: viewCenter, size: viewSize, startPoint: startingPoint)
           circle.layer.cornerRadius = radius

           ...

        }

    } else {

        if let returningView = transitionContext.view(forKey: UITransitionContextViewKey.from) {

            ...

            // circle.frame = frameForCircle(withViewCenter: viewCenter, size: viewSize, startPoint: startingPoint)

            ...

        }
    }
}

Finally I made a protocol so that ResultViewController could dismiss the circle

protocol ResultDelegate: class {

    func collapseCircle()

}

class ResultViewController: UIViewController {

    weak var delegate: ResultDelegate!

    @IBOutlet weak var passedTextLabel: UILabel!

    var infoToPass: String!
    var moreInfoToPass: Int?

    override func viewDidLoad() {
        super.viewDidLoad()

        passedTextLabel.text = infoToPass
        let text = moreInfoToPass!

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func closeResult(_ sender: UIButton) {

        delegate.collapseCircle()

    }

}

This has turned out to be quite a huge answer, sorry about that, I wrote it in a bit a of rush so if anything is not clear just say.

Hope this helps!

Edit: this is what it looks like open for me

enter image description here

Comments