An iPhone app only has one Window. You can place UI objects on the window itself (as we did in the First project), but usually you're going to want more than one "screen" in your app. This is where views come in.

You can think of your window as a clipboard, and views as pages of paper. You can only have one page visible on the front of the clipboard, however you can flip the pages so a new page is in front. Views are somewhat similar. You have a single window, but you can have many different views, and slide different views to the front of the window when needed.

A view is a container for UI objects - buttons, text, images, etc. These are subviews; each subview is contained by the parent view (or superview).

In our First project, we placed a button and a label in the window directly. For the next project, we're going to place the UI objects in a separate view.

Start a new project. (You should close any windows from the First project that you have open in Xcode and Interface Builder.) In Xcode, create a new Window-Based Application and name it Second. Just as with the First project, you'll start off with only a delegate class (SecondAppDelegate.h and SecondAppDelegate.m) and a single xib file (MainWindow.xib).

Double-click on MainWindow.xib to bring up Interface Builder. Look under the File menu and select New. Be sure you have iOS selected in the left-hand frame, then select the "View" icon on the right and click Choose:

You'll get a new Untitled Document window that looks like this:

Before doing anything else, you should save this view to your project. Type ⌘S to save, and be sure you're saving the file into your project's folder (in this case the "Second" folder). Call the new view "MyView".

When it prompts you if you'd like to add MyView.xib to Second.xcodeproj, click the checkbox next to your project name and then click Add. Show Me

At this point you have two xib files open: MainWindow.xib and MyView.xib. It can be difficult (or confusing) to juggle a bunch of xibs when they're all open at the same time, so you'll want to close the ones you aren't currently working on. Closing the document window will also close any of its open views. (Remember you can type ⌘0 to get to the document window.) Go ahead and close the MainWindow.xib document to get it out of the way.

Now let's add a UI to MyView. Double-click on the MyView object in the Document Window, then type ⌘1 to bring up the property inspector for the view.

Add/change the following to the view's UI:

• Change the background color of the view to a light green color.
• Add a Label at the top. Drag the bounding box for the label out to the width of the screen, and set the label text to be centered.
• Add a Button near the bottom of the view. Change the text on the button to say "Show Image".
• Add a TextView (you'll find it in the "Data & Views" folder in the Library).
  • Resize the text view to fill the space between the label and the button.
  • Get rid of the "Lorem ipsum" text by selecting the text and deleting it. Type in "Info will go here" instead.
  • Change the text view so that it is NOT editable. (There's a checkbox for this in the inspector window.)
  • Change the background color of the text view to be transparent. (Look for "Clear Color" in the color list. Show Me)

The final result should look like this:

Save the file and switch back to Xcode. You'll find MyView.xib in your Groups & Files list, just above "Targets". Drag MyView.xib up into the Resources folder so that you keep all of your xib files together. Show Me

Now you'll need to add IBOutlets to your code for each UI item. In the First app, you added the IBOutlets and IBActions to the app delegate file. With a view, however, you should use a View Controller.

• Next:
• View Controllers

Additional References

• UIView Class Reference
• UIWindow Class Reference

Top • Home • Contents