Learn Xcode Interface for iOS App Development

Your First Step to Xcode Tutorial

Through this tutorial we try to teach you the basics of Xcode IDE to develop iPhone Application.As newer version are based on Swift Programming and has various new features to build iOS Application.Because Cocoa Touch Framework are based on Model-View-Controller pattern, it is easy to independently design your interfaces, separate from their implementations.

What You Will Learn

• Understanding Xcode Interface
• Using Simulator

At the end of this iPhone Xcode tutorial you have the proper knowledge to use this IDE and able to create your first iOS Project.

Where To Download Xcode?

Following location can be used to download Xcode for App Development
Mac App Store : https://itunes.apple.com/ca/app/xcode/id497799835?mt=12
Apple Developer Page for Xcode : https://developer.apple.com/xcode/

Explore the Xcode Interface

As you can view in above screenshot of Xcode 8 ,their are 4 main sections to manage the iOS Programming and it'different components. Each Panel handle Different types of Navigations,Properties,Outputs and Designs.
Navigator Tab
Editor Section
Debug Area
Utility Pane
User Can Change the size of all areas by dragging the boundaries through mouse.
You can also show and hide these areas through VIEW buttons shown at right upper corner.All are toggle buttons.

Project Navigator Area

Here you will find all the files associated with your project.You can create group and files in this section .You can also drag files and folders directly to this section.

You can view any file in editor area by single click and if you make double click ,it will open the file in separate window. The root node of the project navigator represents your Xcode project properties.

Search Panel

This Pane is used to search any text or any property,function in your project.

Issue Navigator Area

When you compile or build your project and if there is any error or syntax warnings then compilation get stop and error are shown in issue navigator area. You can view these problems by clicking on it,which will be shown in editor area.

Editor Area

Xcode editor area has multiple editor where you can write or change the code and also create design four app.You can also go to any file by clicking on Jump bar located on top of editor window and breadcrumb.It will open a menu of files.

Editor Views

There are multiple Editor views to see the code files.

Left most is Single view button to view a file in single editor pane.
Middle button is Assistant Editor View which show files in Two panes.Each pane also has independent jump bars.
The Right most is the version editor where you can compare two files.

Interface Builder View

To design ios App here we use Interface Builder where place controls on Storyboard or XIB files. Here we can easily drag and drop different controls like buttone,windows,textfields to design canvas.We can also make connections between Object and code over here.

Utility Area

Xcode Utility Sections consist two panes Inspector pane and the library pane.

Inspector Pane Shows different attributes about the file you selected in Ios Xcode editor.
From Library Pane you can drag different control to user Interface

Debug Area :This Area will show the console output of your program.

iOS Simulator

Xcode equipped with iOS Simulator where you can view the output of your Apps and test on different iOS versions and devices.