UIView split transition - ios

Question

There is a good chance that I am just using the wrong terminology for this, but I have been looking to see if there is an iOS UIView transition that splits a view (BLUE) and any subview controls to reveal another view (RED) and its controls. I have found a couple of posts that mention something similar from 2011 but nothing recent, so was wondering if anything new had been added now we are upto iOS 8. Any pointers would be much appreciated.

Answer 1

If you are trying to do such split transition, I have created a animation controller for view controller transition. If you look at the code, you will find that there can be two different ways to transit, opening from view from the middle or the toview comes and collapses on the top of the from view.
Here is a small gif of how the code below works;
class AnimationController: NSObject, UIViewControllerAnimatedTransitioning {
let presenting: Bool
init(presenting: Bool) {
self.presenting = presenting
}
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {
return 1.0
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
animateOutImagesWithContext(transitionContext)
//animateInImagesWithContext(transitionContext)
}
func snapshotView(view: UIView!) -> UIImage {
UIGraphicsBeginImageContext(view.bounds.size)
view.drawViewHierarchyInRect(view.bounds, afterScreenUpdates: true)
let snapshotImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return snapshotImage
}
func animateOutImagesWithContext(transitionContext:UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let fromView = fromViewController!.view
let toView = toViewController!.view
containerView.addSubview(toView)
let snapshotImage = snapshotView(fromView)
fromView.removeFromSuperview()
let imageViews = animatingOutImageViews(snapshotImage)
containerView.addSubview(imageViews.firstImageView)
containerView.addSubview(imageViews.secondImageView)
UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in
let firstImageView = imageViews.firstImageView
let secondImageView = imageViews.secondImageView
if self.presenting {
firstImageView.frame = CGRectOffset(firstImageView.frame, -CGRectGetWidth(firstImageView.frame), 0)
secondImageView.frame = CGRectOffset(secondImageView.frame, CGRectGetWidth(secondImageView.frame), 0)
} else {
firstImageView.frame = CGRectOffset(firstImageView.frame, 0, -CGRectGetHeight(firstImageView.frame))
secondImageView.frame = CGRectOffset(secondImageView.frame, 0, CGRectGetHeight(secondImageView.frame))
}
}) { (completed: Bool) -> Void in
imageViews.firstImageView.removeFromSuperview()
imageViews.secondImageView.removeFromSuperview()
transitionContext.completeTransition(true)
}
}
func animateInImagesWithContext(transitionContext:UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView()
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let fromView = fromViewController!.view
let toView = toViewController!.view
containerView.insertSubview(toView, belowSubview: fromView)
let snapshotImage = snapshotView(toView)
let imageViews = animatingInImageViews(snapshotImage)
containerView.addSubview(imageViews.firstImageView)
containerView.addSubview(imageViews.secondImageView)
UIView.animateWithDuration(transitionDuration(transitionContext), animations: { () -> Void in
let firstImageView = imageViews.firstImageView
let secondImageView = imageViews.secondImageView
if self.presenting {
firstImageView.frame = CGRectOffset(firstImageView.frame, 0, CGRectGetHeight(firstImageView.frame))
secondImageView.frame = CGRectOffset(secondImageView.frame, 0, -CGRectGetHeight(secondImageView.frame))
} else {
firstImageView.frame = CGRectOffset(firstImageView.frame, CGRectGetWidth(firstImageView.frame), 0)
secondImageView.frame = CGRectOffset(secondImageView.frame, -CGRectGetWidth(secondImageView.frame),0)
}
}) { (completed: Bool) -> Void in
fromView.removeFromSuperview()
imageViews.firstImageView.removeFromSuperview()
imageViews.secondImageView.removeFromSuperview()
transitionContext.completeTransition(true)
}
}
func animatingOutImageViews(snapshotImage: UIImage) -> (firstImageView: UIImageView!, secondImageView: UIImageView!)
{
let imageSize = snapshotImage.size
var firstPartFrame: CGRect
var secondPartFrame: CGRect
if presenting {
firstPartFrame = CGRectMake(0, 0, imageSize.width * 0.5, imageSize.height)
secondPartFrame = CGRectOffset(firstPartFrame, CGRectGetWidth(firstPartFrame), 0)
} else {
firstPartFrame = CGRectMake(0, 0, imageSize.width, imageSize.height * 0.5)
secondPartFrame = CGRectOffset(firstPartFrame, 0, CGRectGetHeight(firstPartFrame))
}
let firstImage = getImage(snapshotImage, insideRect: firstPartFrame)
let secondImage = getImage(snapshotImage, insideRect: secondPartFrame)
let firstImageView = UIImageView(frame: firstPartFrame)
firstImageView.image = firstImage
let secondImageView = UIImageView(frame: secondPartFrame)
secondImageView.image = secondImage
return (firstImageView, secondImageView)
}
func animatingInImageViews(snapshotImage: UIImage) -> (firstImageView: UIImageView!, secondImageView: UIImageView!)
{
let imageSize = snapshotImage.size
var firstPartFrame: CGRect
var secondPartFrame: CGRect
if presenting {
firstPartFrame = CGRectMake(0, 0, imageSize.width, imageSize.height * 0.5)
secondPartFrame = CGRectOffset(firstPartFrame, 0, CGRectGetHeight(firstPartFrame))
} else {
firstPartFrame = CGRectMake(0, 0, imageSize.width * 0.5, imageSize.height)
secondPartFrame = CGRectOffset(firstPartFrame, CGRectGetWidth(firstPartFrame), 0)
}
let firstImage = getImage(snapshotImage, insideRect: firstPartFrame)
let secondImage = getImage(snapshotImage, insideRect: secondPartFrame)
let firstImageView = UIImageView(image: firstImage)
let secondImageView = UIImageView(image: secondImage)
if presenting {
firstImageView.frame = CGRectOffset(firstPartFrame, 0, -CGRectGetHeight(firstPartFrame))
secondImageView.frame = CGRectOffset(secondPartFrame, 0, CGRectGetHeight(secondPartFrame))
} else {
firstImageView.frame = CGRectOffset(firstPartFrame, -CGRectGetWidth(firstPartFrame), 0)
secondImageView.frame = CGRectOffset(secondPartFrame, CGRectGetWidth(secondPartFrame), 0)
}
return (firstImageView, secondImageView)
}
func getImage(image: UIImage, insideRect rect:CGRect) -> UIImage {
let image = CGImageCreateWithImageInRect(image.CGImage, rect)!
return UIImage(CGImage: image)!
}
}
class SecondViewController: UIViewController, UIViewControllerTransitioningDelegate {
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
init() {
super.init(nibName: nil, bundle: nil)
self.transitioningDelegate = self
}
override func viewDidLoad() {
super.viewDidLoad()
let view1 = UIView(frame: CGRectZero)
view1.backgroundColor = UIColor.purpleColor()
view1.setTranslatesAutoresizingMaskIntoConstraints(false)
let view2 = UIView(frame: CGRectZero)
view2.backgroundColor = UIColor.cyanColor()
view2.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(view1)
view.addSubview(view2)
let views = [
"view1": view1,
"view2": view2
]
let vFormat = "V:|[view1][view2(==view1)]|"
let hFormat = "H:|[view1]|"
let hConstraints = NSLayoutConstraint.constraintsWithVisualFormat(hFormat,
options: .allZeros,
metrics: nil,
views: views)
let vConstraints = NSLayoutConstraint.constraintsWithVisualFormat(vFormat,
options: .AlignAllLeft | .AlignAllRight,
metrics: nil,
views: views)
view.addConstraints(hConstraints)
view.addConstraints(vConstraints)
let tapGestureRecognizer = UITapGestureRecognizer(target: self,
action: "tapped")
view.addGestureRecognizer(tapGestureRecognizer)
}
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return AnimationController(presenting: true)
}
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return AnimationController(presenting: false)
}
func tapped() {
let nextViewController = NextViewController()
dismissViewControllerAnimated(true, completion: nil)
}
}
class FirstViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let view1 = UIView(frame: CGRectZero)
view1.backgroundColor = UIColor.redColor()
view1.setTranslatesAutoresizingMaskIntoConstraints(false)
let view2 = UIView(frame: CGRectZero)
view2.backgroundColor = UIColor.greenColor()
view2.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(view1)
view.addSubview(view2)
let views = [
"view1": view1,
"view2": view2
]
let hFormat = "H:|[view1][view2(==view1)]|"
let vFormat = "V:|[view1]|"
let hConstraints = NSLayoutConstraint.constraintsWithVisualFormat(hFormat,
options: .AlignAllTop | .AlignAllBottom,
metrics: nil,
views: views)
let vConstraints = NSLayoutConstraint.constraintsWithVisualFormat(vFormat,
options: .allZeros,
metrics: nil,
views: views)
view.addConstraints(hConstraints)
view.addConstraints(vConstraints)
let tapGestureRecognizer = UITapGestureRecognizer(target: self,
action: "tapped")
view.addGestureRecognizer(tapGestureRecognizer)
}
func tapped() {
let secondViewController = SecondViewController()
presentViewController(secondViewController, animated: true, completion: nil)
}
}
The code might be little longer but has to be easy to understand. Tune up a little if you want.

Answer 2

There is no such built in transition in iOS. You have to make it yourself. One way to do this would be by using the UIViewControllerAnimatedTransitioning protocol, and doing a custom presentation. The animation steps that would be carried out by the custom animator object would be something like this,
1) create two half images of the blue view, and add them to the transitionContext's containerView (you can't split a UIView in half, so you need to use an image of it instead)
2) add the red controller's view to the transitionContext's containerView underneath the half images.
3) remove the blue view
4) slide the two half images off the screen by animating their constraint constant values.

Answer 3

You could use something like:
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 2, 0, 1, self.view.frame.size.height)];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
[UIView animateWithDuration:1 animations:^{
redView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
} completion:^(BOOL finished) {
UIViewController2 *viewController = [UIViewController2 new];
[self presentViewController:viewController animated:NO completion:^{
[redView removeFromSuperview];
}];
}];
on button click.