We have seen rapid changes and shift in the app market continuously. Some people are creating bigger success stories that catch our eyes towards them.
Like others, do you have any app ideas that make you center of attraction? If you have and want to convert it into a robust application then here you have a perfect & step-wise tutorial.
We know developing an application is not as easy as eating cookies. It requires time, efforts and proper understanding of codes. For those people, who don’t have any idea about app development then here, we have mentioned process with images for proper understanding.
Before start explanation process, one question comes in our mind is why developers are interested in developing application for iPhone.
Let’s discuss some interesting points about iOS platform. Presently, a large portion of market is seized by iPhone and I think this is one of the strongest points that grab attention of developers and businesses.
Considering development viewpoint, Apple’s iOS is one of the best operating systems that empower every Apple’s device, including iPhone, iPad, and iPod. Thus, when you are developing iOS application, ensure to consider all devices and its sizes.
Interestingly, Objective-C is its core programming languages that empower all of its frameworks. Not only Objective-C, but also Cocoa Touch, a programming framework allows you to develop iPhone application that drives UI on iOS.
Below given is some information that you have to grab before starting iPhone application development process. Now, we are proceeding with our first point of development and make proper structure of application for iOS.
iPhone App Structure Planning
In the very first stage, you have to plan and sketch an application idea. It is considered as one of the important stage where you have to think why people would download your application. What features you have to add in your application to make it more attractive.
If you are implementing such things in the proper ways, you don’t have to face any confusion and trouble in the coding phrase.
It is recommended to draw some rough ideas about some pages of your application. You just have to draw 5-6 rectangle shapes and draw the features that you wanted to add in your application.
It would be great to draw pages like a list of contacts, login form and table of data.
Check out a collection of the different UI bar elements given below:
Toolbar: This toolbar is added in the bottom of the iPhone application that holds some icons connected with some functions like Download, Delete, Share and so on.
Status Bar: It shows bars of reception, phone carrier, current batter level, 3G connections and so on.
Navigation Bar: With this bar, your users can get an option to navigate page hierarchies with an ease. This bar includes a button on the left side that allows user to return to the previous application view.
Tab Bar: It is same as the toolbar that allows users to automatically highlight tab icon when he clicks. With this bar, you can simply switch between views rather than offering direct functionality.
Above given list only has toolbars that users could find in the most of the application. If you are looking for some latest styles and views, it would be great to visit Apple’s iOS UI Element Usage Guidelines.
When you are finding confusion about iPhone’s UI elements, it is recommended to consider this documentation.
Designing Photoshop Mockups
Most of the developers are feeling comfortable with Adobe Photoshop as it is the first software that allows creating graphics for logos, banners, websites and mobile mockups.
We all know that designing graphics is one of the easiest processes. But, when it comes to designing iOS application, it is much difficult. Those people, who are designing application, make sure to create pixel-perfect mockup designs.
First of all, we are going to discuss Photoshop settings. In order to design application for iPhone, we have to consider two different design styles, i.e. 320 x 480 pixels and to 640 x 960 pixels for designing standard layout. It simply means you have to create 2 sets of icons for your mockups.
Generally, one can set icons to 163ppi, however, you have to add 326ppi icon for iPhone 4. Moreover, you have to traditionally marked icons with @2x, that means your file’s name should be “icon@2x.png“.
If you want to gather more about iPhone 4 Retina Display: Techniques and Workflow, we suggest you to read Smashing Magazine’s article for excellent tips related to create and scale icons.
In next step, we have to optimize new document settings for that, we have to edit some preference by going to Photoshop >> Edit >> Preferences >> Guides , Grid and Slices. Now, we have to set Gridline every 20px with subdivisions at 2.
1 point will be displayed by 2px line when designing for retina display on the screen. It is one of the most essential rules that you have to consider for scaling down an app.
Here, I am trying to develop design with high resolution; however, you have to try both methods to see suitable fit.
In this tutorial, we are using 640 x 960 pixels at 326ppi, so it is advisable to set it a custom preset, if you are using it regularly.
Developing With Template Elements
It’s time to use Photoshop for creating a pixel-perfect layout, however, it is recommended to use iPhone 4 GUI PSD by Teehan+Lax. You will find all of the design resources that you needed for developing any iPhone application layout.
Once download process gets complete, you have to unzip new file for getting the PSD files and open it with Photoshop.
It is one of the biggest file that contains many elements. In order to make it easier, you have to press ‘V’ in order to activate Move Tool.
After that, you have to click on the “Auto-Select” available on its option bar and after that, choose the “Layer” instead of “Group” .
Moreover, one can also have to click on any element and Photoshop that bring to its equivalent layer. Now, you just have to work around the mockup or you can also have to create your application’s prototype from the mockup.
Now, add a slew of features according to your application within the core. Among them, many of you could find in this PSD file.
It is essential to go with some elements’ layers and edit the gradient colors, fonts, and other design styles. However, you have to avoid resize anything as its UI elements and bars are set to default standard sizes.
Building Apps In Xcode
Xcode is the name of developer tools that used for iOS and Mac OS X programming. One can find Xcode and all applicable packages for free in the Mac App Store if he/she is running OS X Lion.
After the installation is completed, launch the Xcode and its welcome screen should come up. From here you can load an older project or choose to make a new one.
Now, one can have to click “Create a new Xcode project“, then you will find a new template window with some alternatives. In the next step, you have to click on iOS> Application and click on Single View Application and then “Next”.
After that, you can give the new application a new like Test and type some words like mycompany on the Company Identifier and lastly, choose a directory and click on “Save”. The file directory will be built by Xcode and send your into the latest window for working.
You should find many file options. However, your prime focus is the folder that named after your application.
You have two options for designing elements and front with this new Xcode 4.2. Here, you have the classic xib/nib format, which is the standard to Mac OS X and iOS apps that need for designing a new page.
But, if you are creating more views in a single application, you will find that the amount of nob files can become crushing.
Thus, all your nib views are hold by a new storyboard in a single editor pane. Now, you can easily remove and add UI elements and features with an ease.
Moreover, you will see .m and .h files in the same folder group, which is the short filenames for implementation and header code.
You will find the files where you write all the variables and Objective-C functions that needed for an application to run.
Additionally, it is an excellent idea to know how Xcode works with MVC. That is the second reason why we require 2 files for each controller.
MVC Programming Hierarchy
It is essential to understand how application is running and its programming architecture.
Xcode can have ability to divide all the displays and interface code from the processing and logic functions with Model, View, and Controller as a foundation. Moreover, you aren’t found any other option to select.
I know it is bit confusing, however, one can try to appreciate and start developing some basic application.
Thus, we can say that your model has all the information and functions that you needed for showing onscreen.
However, you cannot find models interacting with the screen, it can only views. Mostly, views are all visuals and it can catch data via a ViewController.
With the Controller, you can refine way of hiding back end data from the front end design. Like this, you can change your application design as many times as you want without losing the functionality.
Having such type of knowledge, it should not be difficult to start with application development process.
Design View with iOS Storyboards
Now, you have to spend some time on designing the interface when searched into the technical factors of an application. Suppose, we are keeping the “Storyboard” option that checked when developing the project that means you can search a single MainStoryboard_iPhone.storyboard file somewhere in the folder group that situated on the left side of the window. In the next step, you have to click the file to choose it and open the View.
After that, you can find a new sidebar that directly to the right of the folder group, which is considered as the Document Outline.
It is one of the best kinds of quick preview process for checking available views in the storyboard.
In the next step, you have to start by adding some pages elements into our view controllers. In such case, we need two different elements like a Tab Bar and a Navigation Bar.
Moreover, one can have to access to the Attributes Inspector by going through View >> Utilities >> Show Attributes Inspector on the right side of the window then check out for the Status Bar label.
One can have to Inferred by default that uses the standard iPhone status color. However, you have to select Translucent Black or Black for designing application that better fits.
The Objects Library
Now, you can enable it by access to View >> Utilities >> Show Utilities, if the Utilities pane at the right side of the window isn’t visible. You have to look at the bottom on the Utilities pane for a panel that called Object Library.
This can give you a drop-down menu with the “Objects” as the first item of the list. In case, you could not find it then go through View >> Utilities >> Show Object Library.
After that, you have to search and choose Windows & Bars from the drop-down menu of the Object Library.
In the next step, you have to click on the Navigation Bar and drag it into the view window to place it directly under the black Status Bar.
It’s time to customize the bar’s title description. For that, you have to click twice on the text that presently reads “Title” on the Utilities pane that you can change the title description to the “Test” from there and click on “Enter” to observer the change.
Now, you have to scroll down to search the Tab Bar again in the Windows & Bars panel and drag it into the view window to place it at the bottom of the application. You will surprise to find that 2 elements look incredible.
You must be thinking to match the tab bar at the bottom with the Navigation Bar’s gradient.
In order to do this, you have to click on the Navigation Bar and look to the right at the right at Attributes panel in Utilities pane.
You will find the first option, Style that is set to Default and you have to change from Default to Black Opaque.
Now, you have to add another tab button in the bottom bar of the application. Again, you have to move the mouse to the Windows & Bars panel and scroll down to Tab Bar directly under Tab Bar.
Lastly, you have to drag this into your application Window and put it in the middle of the existing Tab Bar buttons.
You can see some extra options in the Utilities pane if you double click on the new button for changing the item’s image and title.
Apart from, if you want to learn more elements then visit Apple’s iOS Development Resources for learning more resources.
Pre-Setup: Installing Xcode Packages
For pre-setting up, you need Xcode 4 on your computer as your tutorial is written particularly for Xcode 4. Moreover, if you are running the latest Mac OS X Lion then you don’t require anything else.
The iOS SDK & Simulator is included in Xcode 4 that used for building and running iPhone apps directly to the Mac.
It is advisable to checkout official Xcode page to download the software, if you don’t have the Xcode 4 in App Store. Or else, you will have to search the software in your developer account that you can able to register without paying fees in the Apple Developer site.
It would be great to check on Google to search the software. It is quite difficult for begin programming to get setup as Apple always tries to keep their developers more refined and privatized.
Coincidentally, Xcode is one-time install that comes with all the SDK stuff that you needed for iPhone application development.
Once installation process is completed, you will see your new software that enables you to build iPhone application.
Developing Your New Project
Now, you have to open Xcode 4 to see the startup screen with some default functionality. Now, from the given list, choose “Create a new Xcode project” in order to open the main window. Below given are new templates in which we are using the Tabbed Application.
Now, you have to click on ‘Next’ option and you have to enter the name for your project. It would be great to enter the Company Identifier, such as com.perceptionsystem, which is used for sorting the internal build directories of your application.
Ensure to choose “iPhone” from the Device Family and checked all alternatives that given below. Hit to the next option and choose the location to develop all project files.
You will notice the Project Navigator with a whole new set of files in the left pane. Now, you have to click on the “Converter” file to see all the files available inside the folder.
Alongside, the Project Navigator is also called Document Outline. You have to remember such names as we are going to use them all over the entire tutorial.
Now, you should notice three important files, i.e. FirstViewController.h, MainStoryboard.storyboard, and FirstViewController.m. We are using .h and .m files for header and implementation code that connects the back-end programming with text fields and front-end buttons.
You can also see some matching files like SecondViewController.m and SecondViewController.h for Second View. Originally, a .xib (pronounced nib) file is the storyboard files that ported from Interface Builder.
Moreover, the latest release of Xcode 4.2 connected this functionality into a type of flowchart for editing a bit easier.
At the time of developing a new project, you can have to un-check the storyboard option and have to see .xib files.
Moreover, if you are feeling more comfortable in the old file system then you can stay connected to the storyboard method.
Custom Tab Bar Icons
Now, we are going to begin with developing the interface components first and move onto Objective – C programming later.
In the tab bar, you have to start by replacing the label text with icons. Firstly, you have to head over and download the Glyphish icon set to the Desktop.
A pro set with 2X icons is offered by them for iPhone4 retina display that can work with the free standard icons for this tutorial.
After that, you have to right click on the first yellow folder in your Project Navigator that has your main views and select “Add files to Group…” Moreover, according to your project name, you should title the group for this case it’s Converter.
Now, you will find a new window to choose files to add into Xcode. In the next step, you have to choose the Glyphish Icon’s file that situated on the Desktop and inside the icons file, select the 61-brightness.png.
Now, you have to click “Add” so they can import into your project directory. Moreover, you have to repeat the same process for adding 07-map-marker.png into the project directory.
After that, you have to choose the MainStoryboard.storyboard for opening the visual editor in the center of the software.
You will notice that a new menu existed on the right side of the Project Navigator, which is better known as the Document Outline.
It is documented list of the all elements, views, pages and navigations in your application.
Right now, we need one other menu, i.e. Utilities before we add the icons. By default enables the Utilities pane but you can also enable the Utilities by select View >> Utilities >> Show Utilities on the top menu bar of the software.
One can notice how the First View and Second View have their scene box and view controller in the Document Outline.
After that, you have to click on the left arrow of the First View Controllers. In order to show more elements, you have to spot Tab Bar Item.
You have to Select it and in case, you haven’t see anything, then start scrolling over to the right in your storyboard viewer.
You can have to do all the edits in the Attributes Inspector that shows it by selecting View >> Utilities >> Show Attributes Inspector.
It’s time to look at the Utilities pane, which is available on the right side of the editor. You can also see the Title and Image property under the Tab Bar Item.
Now, choose the 61-brightness.png by clicking on the down arrow of the image option. The icon will be assigned to the Tab Bar Item of the First View.
Additionally, you can also remove the Title of the Tab Bar Item so there will be no text available below the icon.
You can also return to the Document Outline for the Second View and click on the down arrow of Second View Controller – Second to show the Tab Bar Item – Second.
After that, you have to click on the “Tab Bar Item – Second” and take a look at the Utilities pane available on the right side of the editor for the Title and Image property under the Tab Bar Item.
Next, you have to click on the down arrow of the image option and choose 07-map-marker.png. Here, you have will be assigned the icon to the Tab Bar Item of the Second View. It is advisable to remove the Title of the Tab Bar Item.
Designing Views with Objects
Here, we have completed importing and setting the images. It’s time to get into designing the views.
Generally, the First View will be designed by them then copy all the elements from the First View and paste them into the Second View with some additional changes for the Second View later.
In order to see the default view, you have to use a basic text header and description object. Now, you have to click twice on the “First View” text of the First View Controller and change it to the “Temp Converter”.
You have to repeat the process for the Second View Controller but have to change the name to “Distance Converter”.
Then, you have to choose the text and move onto your Attributes Inspector in the Utilities pane for changing the color, font, size, etc.
You can click twice on the description text for the description object under the text header of the First View Controller and provide a basic description of what you will be doing in each view like “Enter the value below to convert Fahrenheit into Celsius”.
Additionally, you can also repeat same procedure to provide a basic description for the description object of the Second View Controller, however, the description to “Enter the value below to convert Miles into Kilometers and Astronomical Units.”
In the next step, we have to create a text field for the value input. Now, you can see the Objects library in the bottom part of Utilities pane located at the right side of the software.
Moreover, you can enable it by selecting View >> Utilities >> Show Object Library. From its drop-down menu, you have to choose Controls and a Text Field then drag it into the First View Controllers.
further, you have to move the text field to the center and click to resize. You can also change the text color if you look over to our Attributes inspector in the Utilities pane.
Lastly, you have to add the text, “Enter temperature…”, into the Placeholder field. Avoid to add in the Text field.
Moving forward, we have to do some additional setting to make application more user-friendly. If you are looking into the Utilities pane until you have search the property.
Clear Button, then change from “Never appears” to “Appears while editing”. It enables you to delete the entire entry without tapping X button for several times.
After that, you have to look into the pane, until you have searched the Keyboard property with a drop-down menu. Here, I have changed from “Default” to “Number Pad” in order to input will be limited to only integers.
In our next step, we are going to create a button so we can click to convert the value.
Now, you have to drag a Round Rect Button from the Object Library, which is located at the bottom of the Utilities pane, and place it below the text field. You have to click twice to add text “Convert”.
After that, you have to spend some time in the Attributes inspector to add some spice in the style though it looks excellent by default.
Just we have to drag the Label object from the Object Library into the First View Controller for managing output text from the conversions.
Be default, when you drag the label into the view, there is some static text like “Label”. Moreover, you have to delete the text thus, nothing will be showing when the application releases.
Lastly, you have to resize the box to make it wider and place below the Convert button.
You have to enhance the design of the First View Controllers before moving to the Second View Controller.
It is suggested to enhance the design at present, so afterwards we don’t have to redesign the Second View Controller again when we duplicate the elements of the First View Controller to the Second View Controller.
Again you have to do the same process for the Second View controller. It would be great to copy everything from the First View to save time.
Moreover, you have to change certain things for matching the function of the Second View Controller.
Now, you have to click on the “View” of the Second View controller in your Document Outline, available inside the view drag to choose all the items and delete them. It only removes a text header and description object and thus, the second view is totally empty.
Its time choose all the items in First View and press cmd+c/cmd+v to copy/paste into the empty Second View. Check out below details to see changes of object required in Second View:
Text Field – Placeholder reads “Enter distance…” and set Keyboard property to “Number Pad”.
Text Header – Change to “Distance Converter”.
Labels – Add 1 more Label below the existing Label. The top Label will display Kilometers value, while the bottom Label will display Astronomical Units value.
Here, you will notice the outcome of the Second View seems like to the First View and this is what we can achieve in the end.
Programming In First View
That’s it for graphics part. Now, we have to move into some programming by building the backend functionality for our simpler first view. Now, you have to choose FirstViewController.h from your Project navigator.
It’s time for updating the code that provides instance names for each functions and properties that we are using. Firstly, you have to see the coding in the FirstViewController.h:
In the next step, you have to replace the code with below given. A subclass of UIViewController is created by the @interface keyword that is the default view in any iOS app.
Now, we have to declare IBOutlets (Interface Builder Outlets) for each of the elements in our app. Such thing is what @property is making, the latest outlet for Xcode to connect into the interface. Moreover, it also defines two actions where layman’s terms are blocks of code to perform whenever they are required called.
Additionally, degreeConvert will take the value in our text field and execute conversions from Fahrenheit to Celsius. Likewise, backgroundTouchedHideKeyboard is the small actions that will be added to hide the keyboard when the user touches any part of the background.
Here, we get into the difference from .m and .h files. Here, we are going to declared all of such function:
Now we get into the differences from .h and .m files. We’ve declared all of these functions and variables, but they don’t do anything or connect into anything right now.
We need to implement the functionality into our FirstViewController.m. Save any changes and click to open the FirstViewController.m in Project Navigator.
We need to create a synthesis accessing elements in the First View header. This is performed with @synthesize so now our actions can manipulate the different objects on-screen.
It is advisable to add the @synthesize tempTextBox and calcResul into the FirstViewController.m so the first few lines will look like below:
Such thing is declared on the single text field and results label, respectively. Moving further, you have to look at the two functions that I have pre-written.
It may seem a bit funky, if you are at rest new to Objective-C syntax. Now, you have to paste the below given that you have to use the structures over time.
Firstly, we have degreeConvert that takes in no parameters and returns void. Such method is better known when a user presses down on the convert button in the first view. Moreover, a variable fahren is set to place the value from whatever the user has entered.
We can next calculate another variable Celsius with some basic math. It’s time to call [tempTextBox resignFirstResponder], which is actually a method of calling resignFirstResponder on our keyboard. You can also see the code in the second function backgroundTouchedHideKeyboard.
Generally, the keyboard is hidden by it and deselects the text field once the user touches the background or hits the convert button.
A new string (NSString) is created by the rest of our degreeConvert function for storing the Celsius conversion and using dot syntax to add this into label field. Some of the teams like C-based programming (Java, PHP, C#/C++, Perl) are familiar for you.
It’s time to search for the code below:
I have some garbage collection for the variables at the bottom of our FirstViewController.m that we have created.
All the different subviews from memory should be released by us that include our text field and output label.
The variables from the memory will be automatically deallocated from Automatic Reference Counting (ARC) that saves much stress on iOS projects.
Connecting Actions And Outlets
It is the final step for the First View and we will have to connect our front-end elements with back-end code!
You have to complete 3 major segments when developing iOS applications, i.e. adding the physical UI elements, writing the program code, and finally connecting the two together.
All our First View’s components will be wired by this segment up to make it run and work excellently.
Now, you have to save FirstViewController.m, however, you have to ensure that everything is update perfectly.
After that, you have to click back onto the storyboard and look at the Document Outline. You will be notice an orange orb that should be named First View Controller – First.
Now, you have to click on the orb to choose it, and a blue outline should show on your First View scene.
After that, you have to press Ctrl and click the First View Controller. You have to first dray onto the text field and have to release it.
A list of Outlets appears after the action and now, you have to choose “tempTextBox” from the list. The text field will flash if the connection is successful.
After that, you have to press Ctrl and click the First View Controller. Again you have to drag onto the Label field and select “calcResult”.
Now, you will find that outlets are connected into these variables and we have to require connecting the actions.
Now, you have to click on the right arrow of the First View Controller, however, you have to first see a component named View and click to choose it.
Now, you have to open your Identity inspector in the Utilities pane that you can easily enable to moving onto the top menu bar of the software.
After that, you have to choose View >> Utilities >> Show Identity Inspector. Enter “UIControl” under Custom Class or choose it from the dropdown menu.
You have to recognize the background as a tappable object in order for the keyboard as it must be converted into a control.
Now, you have to activate the Connections inspector in the Utilities pane by moving onto the top menu bar of the software and select View >> Utilities >> Show Connections Inspector.
In such way, we connect a page event like swipe, hold, tap and so on to a single function call. You have to look through the list of events until you search Touch Down.
Moreover, you have to click in the small circle which is located at the right side of the Touch Down event and after that, drag and drop it onto the First View Controller.
Now, you will be given 2 actions to select from choosing backgroundTouchedHideKeyboard and you will get a confirmation flash.
Lastly, you have to click on the Convert button and ensure to have a blue highlight or same as the screenshot above without choosing the whole View Control.
Now, you have to drag the Touch Up Inside’s small circle in the Connections Inspector then drop it onto the First View Controller again.
After that, you have to choose the function that named degreeConvert that you will only trigger when the button is touched by the user and release within the set boundaries.
Porting Code Over To Second View
This is good time for saving a work and compiling/building the application. If you find everything working well, it’s time to enter some values into the text field and click to convert to see the result in Celsius.
It is assumed that you have created the layout for Second View in the earlier section. Now, rather than outputting 1 conversion, you have to put our Second View will output 2 values.
Thus, we have to do is migrate the Objective-C code from First View and reorganized everything to access properly for the Second View.
Lastly, you have to complete it by connecting the storyboard to our new actions and outlets.
Now, you have to start with the header code and have to move into implementation. Below, you have to find a full code from my SecondViewController.h file.
Basically, a clone of the First View Controller’s header, but with an extra property linked to the second UILabel element. One more time, you have to search for the following code in the SecondViewController.h:
Here, you have noticed that all the instance names for the actions and outlets are changed. Our text imput for distance will be hold by distTextBox while distResult is the 1st distance result label and auResult will hold our 2nd conversion label.
distanceConvert is one of the latest action that we enable easy conversion of the numeric value and backgroundTouchedHideKeyboard remains the same.
We are using the MVC hierarchy for breaking instead of the application functions from the controllers between storyboard objects.
Now you have to save changes and choose SecondViewController.m, if your SecondViewController.h is looking the same like mine.
Below given code is from the top portion of the SecondViewController.m. The @synthesize statement is added in this to develop setters and getters for each instance variable.
If you are finding the concept of synthesizing instance variables confusing then StackOverflow thread is highly recommended to you.
Check out below for the code in the SecondViewController.m:
Now, you have to add the new action distanceConvert will be called once the user taps the Convert button.
The number will be pulled by the Variable miles while km and au perform some basic mathematical conversions to get their data. Search below given code:
Lastly, you will find final bit of code of SecondViewController.m. After our view is finished compiling and displaying, viewDidUnload is called.
Here, we are going to set three properties that synthesized earlier to nil and release their instance from memory. Here, your app is almost completed, once we connect the storyboard to outlets and actions.
Second View Connections
You have to follow same process like below given for building views. You have to save both your SecondViewController.hand SecondViewController.m to ensure that everything is updated.
Afterwards, you have to click onto the storyboard and look at the Document Outline. In that, you will observe an orange orb that should be named as Second View Controller – Second.
Now, you have to click on the orb to select it, and you will see a blue outline on your Second View scene.
After that, you have to press Ctrl and click the Second View Controller – Second to drag onto the text field, lastly, release it.
A list of Outlets will be seen after the action. You just have to choose “distTextBox” from the list. The text field will flash, if the connection is successful
After that, you have to press Ctrl and click the Second View Controller – Second in order to drag onto the Label field and select “distResult”.
You have to repeat the process again for the 2nd Label that situated below the 1st Label; however, you have to choose the “auResult” for it.
You will find that both the outlets are connected into these variables; you just have to connect the actions.
Make right arrow click on the Second View Controller – Second and checkout a component named View – click to select it.
Now, you have to open your Identity inspector in the Utilities pane that can enable by moving onto the top menu bar of the software and choose View >> Utilities >> Show Identity Inspector. Enter “UIControl” or select it from the dropdown menu under Custom Class.
The keyboard must be converted into a control In order to recognize the background as a tappable object. Afterwards, activate the Connections inspector over in the Utilities pane by moving onto the top menu bar of the software and select View >> Utilities >> Show Connections Inspector .
Like this way, we connect a page event to the single function call. Checkout the given list until you will find Touch Down.
You have to click at the right side of the Touch Down event and after that, drag and drop it onto the Second View Controller. Choose backgroundTouchedHideKeyboard from two options and get flash confirmation.
Lastly, you have to choose the Convert button and ensure to have a blue highlight like a screen shot given above but without selecting the whole View Control.
Drag the Touch Up Inside’s small circle in the Connections Inspector after that drop it onto the Second View Controller again.
Choose distanceConvert function that only trigger when the user touches the button and releases within the chosen boundaries.
Now, you have to create and run to check out whether application succeeds in compiling or not.
If application doesn’t have any error then it works finely. You are free to change text and layout by adding your business logo.
Here, the tutorial ends. Hope you will find it helpful. If you have more easy ways to build iPhone app then let’s share through comment section. For more information, visit here.
Images & data source: Freepik, hongkiat