iOS Tutorial - Part 3 - Different parts of Xcode

Getting familiar with different components of Xcode

Video Description

In the previous post we briefly described main components of Xcode. In this tutorial we will show you more details about each components.

Project Toolbar (Header)

1. Play icon button: Runs the app
2. Stop icon button: Stops the app 
3. Simulator/Device name: Selecting different device or simulator via this option 
4. Project Status: Shows the status of app if it's running or building or something else
5. Standard editor button: Shows main standard view (one class at the same time)
6. Assistant editor button: Shows two classes for editing side by side
7. Version editor: Shows the current version and previous version of the selected file
8. Hide/Show navigator button: Hide or show the left sidebar (Project Navigator)
9. Hide/Show debug area button: Hide or show debug area
10. Hide/Show utilities button: Hide or show right sidebar

Project Navigator (Left sidebar)

1. Project navigator: Shows all of the files that are inside of your application
• Main View
• Project name (blue Xcode icon): Project configurations
• .m and .h files: Xcode classes are identified with this format
• Supporting files: All images and other supporting files are here
• Frameworks: all internal and external libraries and frameworks are here
• Bar bottom items
• Plus button: Adds new Xcode class or file to the project
• Show recent files: Shows only files that are recently changed
• Show only files with matching name: Ability to search for specific file name in the project
2. Find navigator: Finding any phrase inside of all classes of the app
3. Issue navigator: Shows all built errors and warnings
4. Test navigator: Shows all test cases of the app

Utilities (Right sidebar)

1. Topbar
• Identity inspector: Assigning Xcode class to a view
• Attribute inspector: Detail configuration of view elements
• Size inspector: Configure the position of the elements based on frame
2. Middle bar
• Object library: Includes all elements like buttons, labels, textfield, views and so on. User can drag and drop them inside of the view
3. Botom bar
• List/Icon view: Changing the layout of elements from list to icon and vise versa
• Search: Searching for specific elements

Editor (Main view)

The place that developers can write code for each class

For more details, please watch the above video.