iPhone 101
Code Tips
Resources
More
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: |
---|---|---|
![]() |
![]() |
Project Navigator |
![]() |
![]() |
Symbol Navigator |
![]() |
![]() |
Search |
![]() |
![]() |
Issues |
![]() |
![]() |
Debug Navigator |
![]() |
![]() |
Breakpoints |
![]() |
![]() |
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: |
---|---|---|
![]() |
![]() ![]() |
Standard editor |
![]() |
![]() ![]() ![]() |
Assistant editor |
![]() |
![]() ![]() ![]() ![]() |
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
0
Symbol | Shortcut | Shows: |
---|---|---|
![]() |
![]() ![]() |
File Inspector Shows detailed information about the file - file name, path, image sizes, etc. |
![]() |
![]() ![]() |
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: |
---|---|---|
![]() |
![]() ![]() |
Identity Inspector Shows the class name for the selected UI item. |
![]() |
![]() ![]() |
Attributes Inspector This is where you can set options like background colors/images, visibility, labels for buttons and text fonts, etc. |
![]() |
![]() ![]() |
Size Inspector Here you can view or change the dimensions and position of a UI element on screen. |
![]() |
![]() ![]() |
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.