iPhone Development 101

iPhone 101

Code Tips



Xcode4 has a single-window, single-application system for designing, coding, and submitting apps. Although you can still open individual files in separate windows, the overall project is organized and managed through this one window.

There are several key sections to the Xcode window:

  • The Toolbar at the top has buttons for building/running your app, and for managing the window.
  • The Navigator (left side) is where you'll select individual files for editing.
  • The Editor (center) is where you'll edit code (or interfaces). You can also view logs in this area.
  • The Debug Area displays logs while the app is running.
  • The Utilities Area (right side) contains additional info about the current file or object. When you're editing an interface file (xib), the Utilities area contains the inspector panel (for configuring interface elements) and object library.

There's also a separate window, the Organizer, where you can manage your test devices and provisioning profiles, view documentation, and validate and submit apps to the app store.

The Toolbar

Use the toolbar to run your app or select a Scheme (which controls whether the app runs in the simulator or on the device; this is also where you'll create a Release scheme for building your app for the App Store). Use the buttons on the right side of the toolbar to show/hide the various window frames in Xcode.

The Navigator

At the top of the Navigator frame on the left side of the Xcode window are seven tabs:

Use these for selecting files/logs and searching your project. If you double-click on a file in the navigator, it will (by default) open in a new editor window, although you can change this by editing Xcode -> Preferences -> General and changing the "Double Click Navigation" option.

Symbol Shortcut Shows:
command 1 Project Navigator
command 2 Symbol Navigator
command 3 Search
command 4 Issues
command 5 Debug Navigator
command 6 Breakpoints
command 7 Logs

Note that you can change any of the default keyboard shortcuts by going to Xcode -> Preferences -> Key Bindings and customizing the shortcuts there.

The Editor

When you click on the name of a file in the Navigator, its source (or UI) appears in the central editor window. You can split the editor into two frames using the Editor buttons in the toolbar:

Symbol Shortcut Shows:
commandreturn Standard editor
optioncommandreturn Assistant editor
optionshiftcommandreturn Versions editor

Note that you can change any of the default keyboard shortcuts by going to Xcode -> Preferences -> Key Bindings and customizing the shortcuts there.

At the top of the Editor area is a header bar that shows a heirarchical list of the current file being edited, along with the names of individual methods and pragma marks in the file. Click-hold on one of these names to navigate to a different section:

Line numbers: you can adjust the setting to show or hide line numbers in the editor under the Xcode menu -> Preferences -> Text Editing. Other editing options can be set here too, including the page width, autocompletion, text encoding and more.

The Utilities Area

The right-hand frame of the Xcode window is the Utilities area. This shows information about the file being edited, and quick help documentation. It's also where Interface Builder's inspector windows can be found. You can show/hide the Utilities area by clicking the right-most button in the View section of the toolbar:

or commandoption 0

For regular (non-UI) files, the Utilities area has two icons at the top of the section:
Symbol Shortcut Shows:
optioncommand 1 File Inspector
Shows detailed information about the file - file name, path, image sizes, etc.
optioncommand 2 Quick Help Inspector
Shows help about the selected item. (Double-click on a class or method name in your code to view quick help.)

On User Interface files (xibs), the Utilities area now also contains what used to be the Inspector for Interface Builder, with four additional icons:

Symbol Shortcut Shows:
optioncommand 3 Identity Inspector
Shows the class name for the selected UI item.
optioncommand 4 Attributes Inspector
This is where you can set options like background colors/images, visibility, labels for buttons and text fonts, etc.
optioncommand 5 Size Inspector
Here you can view or change the dimensions and position of a UI element on screen.
optioncommand 6 Connections Inspector
View or set connections to IBActions, delegates, bindings, etc.

Note that you can change any of the default keyboard shortcuts by going to Xcode -> Preferences -> Key Bindings and customizing the shortcuts there.

Note 2: If you use LittleSnapper for screenshots, you'll find that it uses these same keyboard shortcuts. You'll either need to quit LittleSnapper or change your key bindings to access the Utilities area with key-shortcuts.

More Xcode 4 Tips and Tricks