The use of smartphones has been growing by leaps and bounds at present, which has resulted in different opportunities to carve a niche for yourself besides making a ton of money by selling your app to countless individuals who are willing to shell out much money to get that app.
This post elaborately discusses on creating an iOS App Development meant especially for web designers in a few simple steps.
As a designer, making native apps for Apple’s iOS seems to be an attractive, as well as a lucrative adventure. However, you need to be an experienced programmer or else the task will turn out to be difficult. This post explains some crucial steps on iPhone app development.
The result will look something like this :
Go Native
Native iOS development indicates using the software development kit (SDK) of Apple along with the programming language Objective C to author apps for the iPod Touch, iPad and the iPhone. Apple has made it convenient for developers to use familiar languages like JavaScript, HTML and CSS, and third-party frameworks to make apps.
The demerit of third-party tools is that the resulting app will not be as powerful as the one that is authored natively.
How to get started
You’ll require two things to begin working with the iOS SDK. These are:
1. A Mac with the latest version of OS X.
2. X code application of Apple.
Download X code from the Mac App Store. It doesn’t cost a dime and weighs approximates 1.5GB which can be installed in half an hour.
Graphic Preparation
When you are waiting for the download to be completed, you can use Photoshop for preparation and exportation of graphics.
Try to work in Photoshop with non-destructive methods so that you may not require to design again. This indicates creating interface elements and buttons with vector layer styles and shapes and using great objects for the images.
You can find lots of templates with intact iOS system elements on the internet, which saves you a lot of time. The settings you require in an image editor while setting up a fresh blank iPhone document are as follows:
a) 640*1136 pixels
b) RGB colour mode
c) 72 ppi
These settings are for an iPod Touch 5th generation or an iPhone 5. For an iPod Touch 4th generation or an iPhone 4, 4S, the screen dimensions are bit shorter at 640 * 960 pixels.
Overview of Xcode
After installing Xcode, you have to download and unzip some template files. In the package, move to the folder titled “Begin here”. Find the Xcode project document titled “Portfolio.xcodeproj” after which you need to double click on it to launch the document. After the document gets loaded, click on the left-sided icon titled “Portfolio, 1 target, iOS SDK”. You’ll eventually notice a project summary screen in the basic Xcode interface, which will look something like this-
The “Navigator” contains all the files linked to your project while the “Editor” changes based on the kind of tasks you are performing. The “Target Summary” screen which will be given to you includes some fundamental alternatives for your apps, such as types of device, iOS version besides display orientation you’d want your app to support.
Click on AppDelegate.m afte which the editor area will transform into a code editor and will show the code present in the file. In the navigator region, click on MainWindow.xib after which the Interface Builder will be displayed by the Editor area. This is graphical user interface or GUI for assembling your application’s front-end.
The “Inspector” is something which you need to know pretty well. The last four are considered to be the most crucial.
Another vital control is the button titled “Run” present in the top left portion of Xcode. If you press this, your project code will be compiled into an app. Run this in an iOS simulator to find out if it works without the need to load it onto a real device. Pressing it now will open the simulator and you’ll be presented with a iPhone on the desktop.
How to import images into your project
For importing images into the project, press ctrl key and click on ”Images”.
Browse the folder titled “PN G” and select the entire images. Check the box named “Copy items into destination group’s folder” and click on “Add”. The images now get imported into the project and can be available to Interface Builder and Xcode.
How to edit the template
Click on MainWindow.xib located in the project navigator to bring up the Interface Builder. Select the icon titled “Show the Object Library” in the library and scroll to find “View Controller”.
Use the button titled “Expand Document Outline” for expanding the dock. After this, drag the View Controller object onto the “Tab Bar Controller”. This process has to be repeated at least twice so that you get three View Controllers present within the Tab Bar Controller.
Building Classes
For adding a new View Controller Class, click on ctrl and the folder titled “Portfolio”. From the contextual menu, select “New File”. In the option sheet, select “Cocoa Touch” followed by “Objective-C class”.
Click on “Next”. In the “Class” category within the sheet that comes up, enter “HomeViewController”. From the drop-down menu, select “UIViewController” and check the box titled “With XIB for user interface”.
Select the folder titled “Begin Here>Portfolio and then click on “Create”. The process has to be repeated for the additional two views. Each class has to be named “ContactViewController” and “PortfolioViewController” respectively.
The order of the files can be rearranged by dragging and dropping. It’ll look similar to this:
How to configure Tabs and Views
Go back to MainWindow.xib and select “HomeViewController” from the drop-down menu.
Next, navigate to the Attributes Inspector. In the “Title” field, enter “Home” and for the NIB name, select “HomeViewController”.
The View Controller has to be expanded in the dock and its “Tab Bar Item” selected. Set the title in the Attributes Inspector as “Home” following which you need to select “tab-icon-home.png” from the dop-down menu of the image.
The colour of the highlight of the tab bar can be altered by selecting the “Tab Bar” object after which you select “Image Tint” within the Attributes Inspector.
In the navigator, select “HomeViewController.xib” and from the library, drag “Label” onto the view in the canvas. If you want to edit the text, double click on the label within the canvas. Change this to “Home”.
This has to repeated for ContactViewController.xib and PortfolioViewController.xib, while naming the labels suitably.
Hit the “Run” button and check out the app in the simulator.
