Latest Update: A better way to implement push segue animation without UINavigation bar
Apple provides three styles of Storyboard Segue, push segue, modal segue and custom segue. Push segue is a predefined segue with a horizontal sliding animation. To make it works, we have to integrate our view controller with UINavigationController. Sometimes, we don’t want to have a UINavigation Bar, but want to use push segue between viewcontroller transition. We may find that it won’t work. Alternatively, we can use modal segue instead. In modal style, there are four transitions including Cover Vertical, Flip Horizontal, Cross Dissolve and Partial Curl. However, there is no horizontal sliding animation effect. Hence, we have to use custom style segue. Here is a video to show you how we can create a horizontal sliding animation transition by custom segue.
Horizontal Sliding Custom Segue Example
In this example, we will put two viewcontroller on the storyboard, using custom segue HorizontalSlideSegue to connect each of them. Here is the HorizontalSlideSegue code example:
[java]
- (void) perform
{
UIViewController *desViewController = (UIViewController *)self.destinationViewController;
UIView *srcView = [(UIViewController *)self.sourceViewController view];
UIView *desView = [desViewController view];
desView.transform = srcView.transform;
desView.bounds = srcView.bounds;
if(isLandscapeOrientation)
{
if(isDismiss)
{
desView.center = CGPointMake(srcView.center.x, srcView.center.y – srcView.frame.size.height);
}
else
{
desView.center = CGPointMake(srcView.center.x, srcView.center.y + srcView.frame.size.height);
}
}
else
{
if(isDismiss)
{
desView.center = CGPointMake(srcView.center.x – srcView.frame.size.width, srcView.center.y);
}
else
{
desView.center = CGPointMake(srcView.center.x + srcView.frame.size.width, srcView.center.y);
}
}
UIWindow *mainWindow = [[UIApplication sharedApplication].windows objectAtIndex:0];
[mainWindow addSubview:desView];
// slide newView over oldView, then remove oldView
[UIView animateWithDuration:0.3
animations:^{
desView.center = CGPointMake(srcView.center.x, srcView.center.y);
if(isLandscapeOrientation)
{
if(isDismiss)
{
srcView.center = CGPointMake(srcView.center.x, srcView.center.y + srcView.frame.size.height);
}
else
{
srcView.center = CGPointMake(srcView.center.x, srcView.center.y – srcView.frame.size.height);
}
}
else
{
if(isDismiss)
{
srcView.center = CGPointMake(srcView.center.x + srcView.frame.size.width, srcView.center.y);
}
else
{
srcView.center = CGPointMake(srcView.center.x – srcView.frame.size.width, srcView.center.y);
}
}
}
completion:^(BOOL finished){
//[desView removeFromSuperview];
[self.sourceViewController presentModalViewController:desViewController animated:NO];
}];
}
[/java]
In the ViewController, we override the method prepareForSegue to config the custom segue. Here is the source example,
[java]
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
HorizontalSlideSegue *s = (HorizontalSlideSegue *)segue;
s.isDismiss = NO;
if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation))
{
s.isLandscapeOrientation = YES;
}
else
{
s.isLandscapeOrientation = NO;
}
}
[/java]
To dismiss the Push Custom segue, we will change the prepareForSegue function a little bit in the second ViewController. It is very simple as well.
[java]
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
HorizontalSlideSegue *s = (HorizontalSlideSegue *)segue;
s.isDismiss = YES;
if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation))
{
s.isLandscapeOrientation = YES;
}
else
{
s.isLandscapeOrientation = NO;
}
}
[/java]
Push Segue Without UiNavigation Controller Custom Segue Example Source Code
Latest Update: Support for multiple ViewController in Source Code
Get this example under $2.99. With this source code, you can use HorizontalSlideSegue in your project, so that you can implement the Push Segue style without using UiNavigation controller or UiNavigation Bar.
In this example source code, it includes:
- ViewController.m, first View viewcontroller class
- DestViewController.m, second View viewcontroller class
- ThirdViewController.m, third View viewcontroller class
- HorizontalSlideSegue.m, custom segue class