126	CHAPTER 5: Autorotation and Autosizing

buttonUR.frame = CGRectMake(20, 155, 125, 125); buttonL.frame = CGRectMake(177, 20, 125, 125); buttonR.frame = CGRectMake(177, 155, 125, 125); buttonLL.frame = CGRectMake(328, 20, 125, 125); buttonLR.frame = CGRectMake(328, 155, 125, 125);

}

}

The size and position of all views, including controls such as buttons, are specified in a property called frame, which is a struct of type CGRect. CGRectMake is a function provided by Apple that lets you easily create a CGRect by specifying the x and y positions along with the width and height.

Save this code. Now build and run the application to see it in action. Try rotating, and watch how the buttons end up in their new positions.

Swapping Views

Moving controls to different locations, as we did in the previous section, can be a very tedious process, especially with a complex interface. Wouldn’t it be nice if we could just design the landscape and portrait views separately, and then swap them out when the phone is rotated?

Well, we can. But it’s a moderately complicated option, which you’ll likely use only in the case of very complex interfaces.

While controls on both views can trigger the same actions, we need to be able to keep track of the fact that multiple outlets will be pointing to objects performing the same function. For example, if we had a button called foo, we would actually have two copies of that button—one in the landscape layout and one in the portrait layout—and any change we make to one needs to be made to the other. So, if we wanted to disable or hide that button, we would need to disable or hide both of the foo buttons.

We could handle this by using multiple outlets, perhaps fooPortrait and fooLandscape, one pointing to each button. In fact, in previous editions of the book, that’s exactly what we did. Life is better now. There’s a relatively new feature of iOS called an outlet collection that we can use to make our code a little simpler and easier to manage. An outlet collection is exactly like an outlet in every way except for one. Whereas an outlet can point to only a single element, an outlet collection is actually an array and can point to any number of objects. This will allow us to have a single property that points to both versions of the same button.

To demonstrate how this works, we’ll build an app with separate views for portrait and landscape orientation. Although the interface we’ll build is not complex enough to justify the technique we’re using, keeping the interface simple will help clarify the process.

Create a new project in Xcode using the Single View Application template again (we’ll start working with other templates in the next chapter). Call this project Swap. The application will start up in portrait mode, with two buttons, one on top of the other (see Figure 5–13).

www.it-ebooks.info

CHAPTER 5: Autorotation and Autosizing

127

Figure 5–13. The Swap application at launch. This is the portrait view and its two buttons.

Rotating the phone swaps in a completely different view, specifically designed for landscape orientation. The landscape view will also feature two buttons with the exact same labels (see Figure 5–14), so the users won’t know they’re looking at two different views.

Figure 5–14. Similar but not the same. This is the landscape view, with two different buttons.

www.it-ebooks.info

128	CHAPTER 5: Autorotation and Autosizing

When a button is tapped, it will show an alert identifying which button was tapped. We won’t pull the button’s name from sender the way we did in Chapter 3, however. We’ll use the outlet collection to determine which button was tapped.

Designing the Two Views

We’ll need two views in our nib. We can use the existing view that Xcode created for us as one of them, but we’ll need to add a second view. The easiest way to get that second view is to duplicate the existing view, and then make the necessary changes.

Select BIDViewController.xib to edit the file in Interface Builder. In the nib editor dock, there should be three icons. The bottom one represents the view that Xcode created for us. Hold down the option key on your keyboard, and then click and drag that icon downward. When you see the green plus on your icon, that’s your indication that you’ve moved far enough for a copy. Release the mouse button to duplicate the view.

Single-click the newly added view and bring up the attributes inspector by pressing z4. Under the heading Simulated Metrics, look for a popup menu called Orientation. Change it from Portrait to Landscape.

We’ll need access to both of these views in our code so that we can swap between them, so we need a pair of outlets. Make sure the assistant editor is turned on and displaying BIDViewController.h. Control-drag from the portrait view over to BIDViewController.h, and when prompted, create an outlet called portrait. Make sure you specify Strong in the Storage popup menu. Do the same thing from the landscape view, creating an outlet called landscape.

The next step is to drag in our buttons. Go to the object library and drag out a pair of Rounded Rect Buttons onto each of our views. Use Figure 5–15 as a guide. Click each button and use the size inspector (View Utilities Size) to change the Width and Height attributes to 125. Center each button and drag it to the blue guideline near one edge of the view. Double-click each button and change its label to either Foo or Bar. Again, Figure 5–15 will set you straight.

www.it-ebooks.info

CHAPTER 5: Autorotation and Autosizing

129

Figure 5–15. We dragged two buttons onto each of our two views, labeling one Foo and one Bar in each view.

Now, let’s create and connect the button outlets. Again, make sure the assistant is turned on and displaying BIDViewController.h. Control-drag from the Foo button on the landscape view to the header file on the right. When prompted, change the Connection popup menu from Outlet to Outlet Collection, and give it a name of foos. Next, drag from the Foo button on the portrait view and connect it to the existing foos outlet connection. To reiterate, you first control-dragged from the Foo button on the landscape view to create the outlet collection, and then control-dragged from the other view’s Foo button to connect it to that same outlet collection.

Repeat those steps with the Bar buttons. Control-drag from one of them to create a new outlet collection named bars, and then control-drag from the other Bar button to connect it to the same collection.

Lastly, we need to create an action method and connect all four buttons to it. Controldrag from the Foo button on the landscape view to BIDViewController.h, and when prompted, change the connection type from Outlet to Action. Give the action a name of buttonTapped:. Then connect the other three buttons to that action and save the nib.

www.it-ebooks.info