iOS Basics: How to Load a UIView Without a Navigation Controller

A UIView is essentially a piece of your iOS device’s screen and it is used to manage, display and contain content. There are many ways to present a UIView, for example, you can push the UIView via a UIViewController and then present the view. However if you simply want to display a view and don’t need the extra features of a UINavigationController, then there’s another approach.

Simply display a UIView as the superview and then remove it from the superview once you’re done! This isn’t the most elegant approach but it’s a good starting point for beginners and teaches some important concepts. Let’s find out how to display and remove a UIView as the superview as well as animate the transition between displaying and removing the view.

Part One: Creating and Displaying the View

1. For this tutorial all we’ll need is Xcode and the iPhone Simulator so start Xcode and create a new project (File – New – Project…). Create a Single View Application and press Next.

Give your app a name. For this tutorial I’ve called it PushyView. You can leave the company identifier the same and leave the class prefix blank but make sure that the device family is set to ‘iPhone’ and that ‘Use Storyboards’, ‘Use Automatic Reference Counting’ and ‘Include Unit Tests’ are all unchecked. Press Next and choose somewhere to save your project.

Setting up your Project

Setting up your Project

2. Now, we have a project that is a single view. If you were to run your application (CMD + R), you’ll find that it runs fine but is very boring. Go back over to Xcode and within the Project Navigator, open ViewController.xib — this is the boring view we see when we run our application and now what we’re going to do is add a button as well as the new view.

3. Go to File – New File and select View from the User Interface tab. Call it NewView — now we have our view, go to the Object Library in the bottom right corner (View – Utilities – Show Object Library) and at the bottom of the library, search for a “button”. You should see a Rounded Rect Button. Click and drag this to your boring view, you can change the size of it as well as add text by double clicking — this button will close the view.

4. Now, in the Project Navigator, go to View Controller.xib and add a new Rounded Rect Button, this button will display the new view.

Xcode

5. We now have two views, each with their own buttons, and we need to make the buttons actually work and tell our app about our new view. Back in the Project Navigator, open ViewController.h and just above the @end, type the following:


@interface ViewController : UIViewController
@property (nonatomic, retain) IBOutlet UIView *mrView;
-(IBAction)displayNewView:(id)sender;
-(IBAction)displayOldView:(id)sender;
@end

6. What we have done here is created an outlet for our new view and two methods, one for each button. Now in the Project Navigator, go to ViewController.m and just under @implementation ViewController, insert the following:

@synthesize newView;

7. Now we have that code, it’s time to create our methods, so underneath the -(void)viewDidLoad method (it’s last curly brace), add the following:

-(IBAction)displayNewView:(id)sender {
[[NSBundle mainBundle] loadNibNamed:@"NewView" owner:self options:nil];
[self.view addSubview:mrView];
}

-(IBAction)displayOldView:(id)sender {
[mrView removeFromSuperview];
}

8. Go to ViewController.xib and in the left sidebar, click on the box icon. On the right, click on the last tab to display the Connection Inspector (Option + Cmd + 6) and then select the dot to the right of displayNewView and click and drag to your button and then click Touch Up Inside.

9. Go to NewView.xib in the Project Navigator and then click on the same box in the left sidebar but this time select the second tab on the right (Option + Cmd + 2) and then change the Class to ViewController and then go to the Connections Inspector and drag mrView to your actual view and the displayOldView method to the button and then press Touch Up Inside.

Changing the Class

Changing the Class

10. Now, if you run your application (Cmd + R), you’ll find that if you click on the first button, it displays the new view and when you click the second one, the old view displays.

Part Two: Adding Animations

1. Now, as you can see, simply loading the views doesn’t make for the nicest thing to look at. We’ll add some simple animation. In the Project Navigator, go to ViewController.m and within the displayNewView and displayOldViews methods, replace them with:

-(IBAction)displayNewView:(id)sender {
[[NSBundle mainBundle] loadNibNamed:@"NewView" owner:self options:nil];
CATransition *transition = [CATransition animation];
transition.duration = 0.5;
transition.type = kCATransitionReveal;
[mrView.layer addAnimation:transition forKey:nil];
[self.view addSubview:mrView];
}

-(IBAction)displayOldView:(id)sender {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.8f];
mrView.transform = CGAffineTransformMakeTranslation(mrView.frame.origin.x, 480.0f + (mrView.frame.size.height/2));
[UIView commitAnimations];
}

2. In order for this to work, we need to add a new framework. In the Project Navigator, click the name of your project at the top and then click the Build Phases tab at the top. Expand the Link Binary With Libraries and then press the ‘+’ icon in the bottom left corner. Start typing “Quartz” and under iOS 5.1, select QuartzCore.framework and press Add.

3. Now, go to back to ViewController.m and just under #import “ViewController.h”, add the following:

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>

4. Run your application and your buttons should now animate and remove your new views when tapped.

In this tutorial you have successfully set up an Xcode project, configured a view controller, added a new view, had a taste of the Object Library and discovered a new way to present UIViews.

Final Outcome

Final Outcome

Click here to download the source files.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote