iOS is a mobile operating system developed and distributed by Apple Inc. It was originally released in 2007 for the iPhone, iPod Touch, and Apple TV. iOS is derived from OS X, with which it shares the Darwin foundation. iOS is Apple's mobile version of the OS X operating system used in Apple computers.
Prerequisites: What's required to Build an iOS App
-
Mac OS
-
Xcode
-
Swift Programming Language
Xcode can be installed free of cost from app store. It is the tool/IDE which we use to develop iOS applications. Xcode provides an interface for UI and code. By using Swift programming language, we can code into Xcode to build iOS applications.
These apps can then be uploaded to app store and millions of users can install your app from there.
Xcode Components:
Project Navigator
In the above image the highlighted box shows the project navigator. It contains the files through which we can navigate between the different project files. From here we can select the swift files, storyboard, image assets and info.plist files. The Project navigator enables you to do things like add, delete, group, and otherwise manage files in your project or choose a file to view or edit in the Editor area. (Depending on the file you choose, you’ll see the appropriate editor).
It is the most important component which will be used more frequently while developing the app.
Editor Area
Editor is one of the most important component which Xcode provides. This area is where you can edit the file that you select from the file navigator.
Code Editor
If we click on the swift file from the navigator, it will present the above code editor where we can write our swift code.
Interface Builder
If we click on the storyboard file from the navigator, the editor will change into an interface builder. This is where we can design our screens for our iOS application.
Assets
This is were we are going to put all the image which we are going to use in our project.
Utility Panel
This pane contains details about the user interface element or block of code that you select from the editor area.
Toolbar
Contains project controls, status bar, buttons to control the user interface.
Debug Console
This area shows you diagnostic info and errors when you run your project.
Design UI Screen on storyboard: When we open the storyboard file, it has one blank screen. This blank screen is used for building the app screen. We can create as many screens as we want in our application. These screen contains 2 layers, a view and a view controller.
View: The top layer on the screen is called view. We can configure the application's view from here. This acts as a container which will contains all the elements which you will place on top of it.
View Controller: The bottom layer on the screen is called view controller. This layer is responsible for managing the view. For eg: When user taps on the view, it lets the view controller know and then we can write the code in view controller swift file to handle that tap.
Object Library: On the interface builder, we can find an object library icon on top right hand side in the Xcode. This object library bring up a list of UI elements/objects that we can add to our view.
Most Used Xcode Keyboard Shortcuts
Command + Spacebar : Auto completion menu Command + [ : Shift code left
Command + ] : Shift code right
Command + I : Re-indent code
Command + / : Toggle between commenting and uncommenting code
Working with Storyboard/Interface Builder:
Command + Shift + L : Open Object Library
Command + Option + Enter : Switch to Assistant Editor Command + Enter : Switch to Standard Editor
Navigating Xcode:
Command + Shift + Y : Toggle Debug Console pane Command + 0 (zero) : Toggle Navigator pane Command + Option + 0 (zero) : Toggle Utilities pane Command + Shift + F : Find in project
Command + F : Find in file
Running Your Project:
Command + R : Run project Command + . (dot) : Stop project
Command + B : Build project Command + Shift + K : Clean project
Auto Layout
Key Concepts
- Auto layout is the system used to size and position elements on the screen
- Before auto layout, elements were laid out using an X,Y coordinate system with the origin (0,0) being the upper left corner.
- X is the horizontal axis and Y is the vertical axis.
- You also had to manually specify a height and width for each element.
- The X, Y, Width and Height values for an element is referred to as the "Frame" of that element.
- Today, the coordinate system is still in place although we size and position elements using Auto Layout Constraints.
- A constraint is a rule that dictates how an element is sized or positions relative to another element.
- For example, if we want to make sure that two elements are both left aligned, we can add a Constraint saying: Element A's left property should be equal to Element B's left property.
- You can add new constraints with these two buttons in Interface Builder:
10. The auto layout system will position and size elements by trying to satisfy all of the Constraints you've specified.
11. Sometimes you will end up in a situation where the auto layout system can't find a way to satisfy all of the Constraints. In this case, the system will automatically break one of the Constraints which can lead to unintended consequences to your layout.
12. If you have conflicting Constraints, Xcode will show you and give you some hints on how to solve it.
So, these are the basic components and auto layout rules which can be used to build an iOS application. I have tried to put pictures/screenshots of each important components in this article for your better understanding which will help you start building your first iOS app.