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.

iOS Tutorial - Part 2 - Hello World app

Download finished project here: Google Drive Download Link

Creating "Hello World" app for iPhone & iPad

Video Description

1. Follow the Previous post to download the X-code
2. Open X-Code and from the left hand side of the opening window, click on "Create a new Xcode project"
3. Select "Single View Application" and hit next button
4. Give your application a name in "Product Name" field and also your organization (if any)
5. "Company Identifier" is an identifier that Apple uses to make a unique identifier for you application. Usually you can reverse your company URL and put it for this field (ex. com.myurl.www)
6. From "Devices" drop down menu you can select the device that you are planning to develop an application. Universal means for both iPhone and iPad. For this application select Universal
7. Then It asked for the location of the project. Select a location that you want to save the app
8. When it creates the application, you can see three different area (right sidebar, main view and left sidebar)
9. From left sidebar, under your project name in yellow folder click on "Main_iPhone.storyboard". You should see a rectangle, which represents the iPhone view
10. At very bottom of the right sidebar, there is a search field. In that search field, search for "Label". It will show the results above the search field
11. Drag and drop a Label from object library to the iPhone view
12. Double click on the label that you added to the iPhone view and change the text to "Hello World"
13. From upper left corner of the X-Code click on Play icon or hold command key on keyboard and press R to run the application

Download finished project here: Google Drive Download Link

iOS Tutorial - Part 1 - How to Download X-Code

How to install Xcode

Video Description
1. Requirements for developing iOS apps

• Macintosh computer
• X-Code

2. How to download X-Code

• Open "App Store" on your Mac
• On the upper right corner of the "App Store" in the search field, search for X-Code

For more details please watch the above video.