In this tutorial we will change our view when the orientation on the device changes. In other words when a user changes the phone to be held in landscape mode we will load a different view then when the phone is held in portrait mode. In this example our two views are going to look completely different, but you could do the same thing while just tweaking the original view to fit better in landscape.
In this tutorial I am using two pictures, one a portrait and one a landscape. You can use mine or get your own.
1.) Create a new View-based Application project and name it OrientationTutorial.
2.) First thing is we will add our artwork to the project. Right-click on Resources and select Add > Existing Files … navigate to where to saved the art and click add.
Make sure you select Copy items into destination group’s folder (if needed).
3.) Before we do anything else we are going to set up our views. So double click OrientationTutorialViewController.xib to open it up in Interface Builder.
Our document window shows that we already have one UIView.
We are going to add a second one. In the Library window find UIView.
Drag it into our document window so that now we should see two UIViews.
4.) Select the top View, go to Identity Inspector and name this view portrait.
This is just to help us keep the two views identified.
Then do the same thing for the other view and name it Landscape.
5.) We’re going to set up the Portrait view first, since it is pretty much all ready to go.
First let’s change the background to black.
Then let’s add a UIImageView and bring in the portrait art we added in step two.
And then let’s add a UILabel.
Here’s what mine looks like when I’m done.
6.) Now let’s set up the Landscape view. Double click our Landscape view in the document window to bring it into view if it isn’t already. With it still selected in the document window go to the Attributes Inspector and change the orientation to Landscape.
At this point you can go to the Size Inspector and check our size. When I switched my view to Landscape it made the size 460 x 320. I went ahead and changed it to 480 x 320. If I had a navigation bar, or toolbar or something I would have to adjust for that. But in this tutorial I don’t need to.
7.) Make the background white if it isn’t already.
Add a UIImageView and bring in the landscape art we have.
Add a label.
Here’s what my Landscape view looks like.
8.) Now that we have the views set up, let’s go back to Xcode and do our coding. Open up our OrientationTutorialViewController.h file. We are going to add two IBOutlets for our two views.
9.) Now open up OrientationTutorialViewController.m.
First synthesize our outlets.
Then implement the shouldAutorotateToInterfaceOrientation method. It is probably commented out by default when you create the project, or a new view controller file.
We are going to set it to handle all orientations by just returning YES.
10.) Whenever a device gets rotated and the orientation changes a notification can be sent. We just need to tell our view to listen for this notification. We’ll do this in the viewDidLoad method.
You’ll see in the second line of code there that we are calling a method named orientationChanged: so we need to set that up next.
11.) In the method orientationChanged: we are going to check to see if the orientation is portrait or not. If it is portrait we will show the portraitView, if it is not portrait we will show the landscapeView. In this tutorial we are only handling these two instances, portrait and not portrait. But we could also handle portrait upside-down, landscapeLeft or landscapeRight.
12.) Before this works we need to go back into Interface Builder and connect our outlets to the views.
Open up OrientationTutorialViewController.xib in Interface Builder. Select File’s Owner in the document window. Go to Connections Inspector and connect the outlets to the views by dragging from the little circle to the particular view in the document window.
That’s all there is to it. Click Build and Run and rotate the view by using the command key and the arrow keys.