In the first part of our iOS tutorial I took you through a guided tour of the
iPhone app development. We got a deeper look at Xcode 4, and also took a very
short tutorial on building iPhone app. The beginner tutorial was written for
anyone who is looking to get into program ming
iOS apps.
 |
| Beginner’s Guide To IOS Development: Building Your First App – Part II |
Today, we’ll get into the second segment of the topic, where we will
be building a fully-functioning iPhone application. The app, with a tabbed
navigation, will convert temperature units and distance units. Don’t worry if
you’re still new to the Xcode. It does not take very long time to comfortably
adapt into the interface. I’ll be explaining each step in detail so you
shouldn’t get lost, either!
At the end of the tutorial you will get an application which can’t be pushed
into the iPhone since it will need you to purchase developer program, but we can
run it inside the iOS Simulator on a Mac OS X system. I’ve offered the project
files for download which you can also refer when you are not sure about certain
step. So you want an app, let’s get started!
Note: You will need a computer with Macintosh Operating System (Mac OS) for
Xcode installation, application development and app submission, there’s no way
you can do it on Windows legally.
Pre-Setup: Installing Xcode Packages
If you haven’t done so already you will need to get Xcode 4 on your computer.
You must use Xcode 4 since this tutorial is written specifically for Xcode 4. If
you’re running the latest Mac OS X Lion a simple search in the App Store can get
everything you’ll need. Xcode 4 includes the iOS SDK & Simulator for
building and running iPhone apps directly on your Mac!
[xcode]
If you cannot find the Xcode 4 in App Store, you can also try to
access official Xcode page to download the software. Otherwise you’ll need to
find the software in your developer account, which you can register without fee
in the Apple Developer site.
You could also check on Google if you’re having a difficult time finding the
software. Apple tries to keep their developers more privatized and refined, so
it can be a struggle getting everything setup to begin programming. Luckily
Xcode is a one-time install that includes all the SDK stuff you’ll need for
iPhone app development.
After the installation is completed, pop open your new software and let’s
build this iPhone app!
1. Creating Your New Project
Open Xcode 4 and you should get a startup screen with a few default options.
From the list select “Create a new Xcode project” to open up the main window.
Here you’re given a choice to select which new template to begin with. We’re
going to use the Tabbed Application.
[tabbed application]
Hit “Next” and you’ve got to enter a name for your project. I’ve
chosen Converter. You then need to enter the Company Identifier, such
as com.hongkiat, which is used to sort the internal build directories of your
application. Make sure you select “iPhone” from the Device Family, andall
options below are checked. Hit next and select a location to create all the
project files.
[project options]
In the left pane you’ll notice the Project Navigator with a whole new set of
files. Click on the “Converter” file to view all files inside. Beside the
Project Navigator is called Document Outline.Remember these names since we’re
going to use them throughout the entire tutorial.
[mainstoryboard storyboard]
You should notice 3 very important
files: MainStoryboard.storyboard, FirstViewController.h andFirstViewController.m.
The .h and .m files are used for header and implementation code which basically
connects the back-end programming with our front-end buttons and text fields.
You should see matching
files, SecondViewController.h and SecondViewController.m for Second View as
well.
The storyboard file was originally a .xib (pronounced nib) file which was
ported over from Interface Builder. The newest release of Xcode 4.2 actually
ties this functionality into a type of flowchart to make editing a bit easier.
When creating a new project you can un-check the storyboard optionand you’ll
have individual .xib files for each view. If you feel more comfortable in the
old file system you can use that, but for this tutorial you must stick to the
storyboard method.
2. Custom Tab Bar Icons
We will start building the interface components first and move onto
Objective-C programming later. To begin let’s replace the label text with icons
in the tab bar. First of all, head over anddownload the Glyphish icon set to the
Desktop. They offer a pro set with 2X icons for iPhone 4 retina display – but we
can work with the free standard icons for this tutorial.
[add files to group]
Back in Xcode, in your Project Navigator, right click on the first yellow
folder which contains your main views and select “Add files to Group…”.
The Group should be titled according to your project name, for this case
it’s Converter.
[add images to group]
A new window will open to select files to add into Xcode. Choose the Glyphish
Icon’s file located on the Desktop (or anywhere you saved it to) and inside
the icons file, choose the 61-brightness.png. Click “Add” so they’ll be imported
into your project directory. Repeat the same process to
add 07-map-marker.png into the project directory.
[document outline]
Now, select the MainStoryboard.storyboard to open the visual editor in the
center of the software. To the left you’ll notice a new menu existed on the
right side of the Project Navigator, called the Document Outline. This is a
documented list of all the elements, pages, views, and navigation in your
app.
[utilities]
Before we add the icons we also just need one other menu called
the Utilities. The Utilities pane is enabled by default, but you can also enable
the Utilities by select View > Utilities > Show Utilities on the top menu
bar of the software.
[tab bar item]
Back in the Document Outline you will notice how the First View and Second
View each have their scene box and view controller. Click on the left arrow of
First View Controller – First to display more elements and you should spot Tab
Bar Item. Click to select it, and if you can’t see anything try scrolling over
to the right in your storyboard viewer. All the edits for the tabs will be done
in theAttributes Inspector, which you can show it by select View > Utilities
> Show Attributes Inspector.
[select image for bar item]
Now look at the Utilities pane on the right side of the editor, and you will
see the Title and Imageproperty under the Tab Bar Item. Click on the down arrow
of the Image option, then select 61-brightness.png, the icon will be assigned to
the Tab Bar Item of the First View. You can alsoremove the Title of the Tab Bar
Item so there will be no text below the icon.
For the Second View, you can return to the Document Outline and click on the
down arrow of Second View Controller – Second to show the Tab Bar Item –
Second. Click on the “Tab Bar Item – Second” and look at the Utilities pane on
the right side of the editor for the Title andImage property under the Tab Bar
Item. Click on the down arrow of the Image option, thenselect 07-map-marker.png,
the icon will be assigned to the Tab Bar Item of the Second View.Remove the
Title of the Tab Bar Item.
3. Designing Views With Objects
We’ve finished importing and setting the images, now let’s get into designing
the views. Basically we will design the First View, then copy all elements from
the First View and paste them into the Second View, with some extra changes for
the Second View later.
[change text header]
For each default view we are given a basic text header and description
object. Double-click on the “First View” text of the First View Controller in
the visual editor and change it to “Temp Converter”. Repeat the process for the
Second View Controller but change the name to “Distance Converter”. You can
select the text and move onto your Attributes Inspector in the Utilities pane to
change the font, color, size, etc.
[change description text]
For the description object under the text header of the First View
Controller, you can double click on the description text and give it a basic
description of what we’ll be doing in each view, such as “Enter the value below
to convert Fahrenheit into Celsius“. You can repeat the process to give a basic
description for the description object of the Second View Controller, but change
the description to “Enter the value below to convert Miles into Kilometers and
Astronomical Units.”
[add text field]
Now we need to create a text field for the value input. In the bottom part of
Utilities pane located at the right side of the software, you should see the
Objects library, which can also be enabled byselect View > Utilities >
Show Object Library. In its drop-down menu choose Controls andselect a Text
Field, then drag it into the First View Controller.
[add placeholder]
Move around the text field to center it and click to resize the box to the
size you prefer. If you look over to our Attributes inspector in the Utilities
pane you can also change the text color of the input field. Next, add the text,
“Enter temperature…”, into the Placeholder field (not the Text field).
[extra settings]
Now let’s do some extra settings to make the app a bit more
user-friendly. Look into the Utilities pane until you find the property, Clear
Button, then change from “Never appears” to “Appears while editing”. This allows
you to delete the entire entry at once without tapping Xbutton for several
times.
Next, look into the pane again until you find the Keyboard property with a
drop-down menu. I’ve changed this from “Default” to “Number Pad” so the input
will be limited to only integers.
[add button]
Next we’re going to create a button so we can click it to convert the
value. Drag a Round Rect Button from the Object Library located at the bottom of
the Utilities pane, and place it below the text field. Double-click to add the
text “Convert!”. Again spend some time in the Attributes inspector to spice up
the style a bit, although it looks fine by default.
[add label]
We just need to drag the Label object from the Object Library into the First
View Controllerto handle output text from the conversions. When you drag the
label into the view, by default it’s given some static text, such as “Label”.
You should delete the text so nothing will be displaying when the app
launches. Resize the box to make it wider and position it below the Convert
button.
[improved design]
Before we move to the Second View Controller, you can improve the design of
the First View Controller. It’s recommended to improve the design now so later
when we duplicate the elements of the First View Controller to the Second View
Controller, we don’t need to re-design the Second View Controller again.
Now let’s do the same process for the Second View controller. We can save
time by copying everything from the First View, but we also need to change
certain things to match the function of the Second View Controller.
[select all elements]
Click on the “View” of the Second View controller in your Document Outline,
inside the view drag to select all items and delete them. This should only
remove a text header and description object so that second view is totally
empty. Now select all the items in First View and press cmd+c/cmd+v to
copy/paste into the empty Second View. Below are the changes of objects required
in Second View:
Text Header – Change to “Distance Converter”.
Text Field – Placeholder
reads “Enter distance…” and set Keyboard property to “Number Pad”.
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.
[second view controller design]
This is what you will achieve in the end, you can notice that the outcome of
the Second View is almost identical to the First View.
4. Programming In First View
Enough graphics for now, let’s move into some programming! We can start off
building the backend functionality for our simpler first
view. Select FirstViewController.h from your Project navigator.
[firstviewcontroller.h design]
We need to update the code to give instance names for each of the functions
and properties we’re using. First of all you will see the following code in
the FirstViewController.h:
view plaincopy to clipboardprint?
#import
@interface FirstViewController : UIViewController
@end
Now replace the code above with the code below. The @interface keyword is
creating a subclass of UIViewController, which is the default view in any iOS
app.
view plaincopy to clipboardprint?
#import
@interface FirstViewController : UIViewController {
UITextField *tempTextBox;
UILabel *calcResult;
}
@property (nonatomic, retain) IBOutlet UILabel *calcResult;
@property (nonatomic, retain) IBOutlet UITextField *tempTextBox;
- (IBAction)degreeConvert:(id)sender;
- (IBAction)backgroundTouchedHideKeyboard:(id)sender;
@end
We need to declare IBOutlets (Interface Builder Outlets) for each of the
elements in our app. This is what @property is creating – a new outlet for Xcode
to connect into the interface. I also defined two actions which in layman’s
terms are blocks of code to execute whenever they’re called.
About degreeConvert, it will take the value in our text field and perform
conversions from Fahrenheit to Celsius.
Similarly backgroundTouchedHideKeyboard is a small action I’ll be adding to hide
the keyboard when the user touches any part of the background.
[firstviewcontroller.m design]
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
theFirstViewController.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.
Add the @synthesize tempTextBox, calcResult; into
the FirstViewController.m so the first few lines will look like below:
view plaincopy to clipboardprint?
#import "FirstViewController.h"
@implementation FirstViewController
@synthesize tempTextBox, calcResult;
This is declared on the single text field and results label, respectively. To
go further let’s look at the two functions I’ve pre-written. If you are still
new to Objective-C syntax then it may seem a bit funky. But you’ll get used to
the structures over time, paste the code below into the file.
view plaincopy to clipboardprint?
- (void)degreeConvert:(id)sender
{
double fahren = [tempTextBox.text doubleValue];
double celsius = (fahren - 32) / 1.8;
[tempTextBox resignFirstResponder];
NSString *convertResult = [[NSString alloc] initWithFormat: @"Celsius: %f", celsius];
calcResult.text = convertResult;
}
- (void)backgroundTouchedHideKeyboard:(id)sender
{
[tempTextBox resignFirstResponder];
}
First we have degreeConvert which takes in no parameters and returns void.
This is the method called when a user presses down on the convert button in
first view. A variable fahren is set to pull the value from whatever the user
has entered. We can then calculate another variable celsius with basic math.
Now [tempTextBox resignFirstResponder] is actually calling a
method resignFirstResponderon our keyboard. This code is also seen in the second
functionbackgroundTouchedHideKeyboard. Basically it hides the keyboard and
deselects the text field after the user either touches the background or hits
the convert button.
The rest of our degreeConvert function creates a new string (NSString) to
store the Celsius conversion and using dot syntax adds this into our label
field. If you have any familiarity with C-based programming (Java, PHP, C#/C++,
Perl) some of these terms should be familiar.
Now, search for the code below:
view plaincopy to clipboardprint?
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
Replace the code above with the code below:
view plaincopy to clipboardprint?
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.tempTextBox = nil;
self.calcResult = nil;
}
At the bottom of our FirstViewController.m I’ve done some garbage
collection for the variables we synthesized. We should release all the different
subviews from memory which include our text field and output label. Automatic
Reference Counting (ARC) will automatically deallocate variables from memory
which will save so much stress on iOS projects.
5. Connecting Actions And Outlets
This is the final step for the First View and we will connect our front-end
elements with back-end code! When building iOS apps there are 3 major segments
to completion: adding the physical UI elements, writing the program code, and
finally connecting the two together. This segment will wire all our First View’s
components up to make it run and work perfectly!
Save both your FirstViewController.h and FirstViewController.m to make sure
everything is updated. Then, click back onto the storyboard and look at the
Document Outline. In there you’ll notice an orange orb which should be
named First View Controller – First.
[connect temptextbox]
Click on the orb to select it, and a blue outline should appear on your First
View scene. Nowpress Ctrl and click the First View Controller – First to drag
onto the text field, thenrelease it.
[select temptextbox]
After the action, a list of Outlets will come up. Select “tempTextBox” from
the list. If the connection is successful the text field will flash.
[connect label]
Now press Ctrl and click the First View Controller – First again to drag onto
the Label fieldand select “calcResult”. Both our outlets are now connected into
these variables and we just need to connect the actions.
[change custom class]
Click on the right arrow of the First View Controller – First and you will
see a component named View – click to select it. Open your Identity inspector in
the Utilities pane, which you can also enable it by move onto the top menu bar
of the software, and select View > Utilities > Show Identity Inspector.
Under Custom Class, enter “UIControl” or select it from the dropdown menu.
In order for the keyboard to recognize the background as a tappable object it
must be converted into a control. Now over in the Utilities pane activate the
Connections inspector by move onto the top menu bar of the software and select
View > Utilities > Show Connections Inspector.
[connect page event]
This is how we connect a page event (swipe, tap, hold, etc) to a single
function call. Look through the list of events until you find Touch Down. Click
in the small circle located at the right side of the Touch Down event, then drag
and drop it onto the First View Controller. You’ll be given 2 actions to select
from – choose backgroundTouchedHideKeyboard and you’ll get a confirmation
flash.
[connect button event]
Finally click to select the Convert button and make sure it has a blue
highlight, similar to the screenshot above but without selecting the whole View
Control. In the Connections Inspectordrag the Touch Up Inside’s small circle
then drop it onto the First View Controller again. Choose the function
named degreeConvert, which will only trigger when the user touches the button
and releases within the set boundaries.
6. Porting Code Over To Second View
Now this may be a good time to save your work and compile/build the
application so far. If everything is running smoothly you should be able to
enter some values into the text field and hit convert to see the result in
Celsius! If you’re getting any errors try downloading demo project at the last
section of this article to compare the differences and fix the errors.
I’ll assume you’ve already created the layout for Second View in the earlier
section. Instead of outputting 1 conversion (Fahrenheit > Celsius) our Second
View will output 2 values (Miles > Kilometers and Miles > Astronomical
Units). So all we need to do is migrate the Objective-C code from First
View and reorganize everything to work properly for our Second View, then finish
up by connecting the storyboard to our new actions and outlets.
We should start with the header code and move into implementation. Below I’ve
added the full code from my SecondViewController.h file. It’s basically a clone
of the First View Controller’s header, but with an additional property linked to
the second UILabel element.
Again you need to search for the following code in
the SecondViewController.h:
view plaincopy to clipboardprint?
#import
@interface SecondViewController : UIViewController
@end
Replace the code above with the code below:
view plaincopy to clipboardprint?
#import
@interface SecondViewController : UIViewController {
UITextField *distTextBox;
UILabel *distResult;
UILabel *auResult;
}
@property (nonatomic, retain) IBOutlet UILabel *distResult;
@property (nonatomic, retain) IBOutlet UILabel *auResult;
@property (nonatomic, retain) IBOutlet UITextField *distTextBox;
- (IBAction)distanceConvert:(id)sender;
- (IBAction)backgroundTouchedHideKeyboard:(id)sender;
@end
You can notice I’ve changed all the instance names for the actions and
outlets. distTextBoxwill now hold our text input for distance. distResult is the
1st distance result label (kilometers) andauResult will hold our 2nd conversion
label. distanceConvert is the new action we call to convert the numeric value,
and backgroundTouchedHideKeyboard remains the same.
As before we’re using the MVC hierarchy to break apart the app functions
(implementation) from the controller between storyboard objects. If your
SecondViewController.h is looking the same as mine above, save
changes and select SecondViewController.m. I will again break up my code into
two parts.
The code below is from the top portion of my SecondViewController.m. This
contains the@synthesize statement to create setters and getters for each
instance variable. I know this concept of synthesizing instance variables can be
very confusing initially. I recommend thisStackOverflow thread which may help to
clear things up.
Now, look for the code below in the SecondViewController.m:
view plaincopy to clipboardprint?
#import "SecondViewController.h"
@implementation SecondViewController
Replace the code above with the code below:
view plaincopy to clipboardprint?
#import "SecondViewController.h"
@implementation SecondViewController
@synthesize distResult, auResult, distTextBox;
- (void)distanceConvert:(id)sender
{
double miles = [distTextBox.text doubleValue];
double km = miles * 1.61; // multiply miles by ~1.609 kilometers
double au = miles / 92956000; // divide miles by 92,956,000AU
[distTextBox resignFirstResponder];
NSString *kiloResult = [[NSString alloc] initWithFormat: @"Kilometers: %f", km];
NSString *ausResult = [[NSString alloc] initWithFormat: @"AUs: %f", au];
distResult.text = kiloResult;
auResult.text = ausResult;
}
- (void)backgroundTouchedHideKeyboard:(id)sender
{
[distTextBox resignFirstResponder];
}
The new action distanceConvert will be called once the user taps the Convert
button. Variablemiles will pull the number from distTextBox
while km and au perform some basic mathematical conversions to achieve their data .
Afterwards using 2 lines we allocate memory for 2 NSString objects holding the
Kilometer and AU output info. Using dot syntax we call upon the .text
property to change UILabel text.
Now, search for the code below:
view plaincopy to clipboardprint?
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
Replace the code above with the code below:
view plaincopy to clipboardprint?
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
self.distResult = nil;
self.auResult = nil;
self.distTextBox = nil;
}
And now the final bit of code found at the very end of
SecondViewController.m. viewDidUnload is called after our view is finished
compiling and displaying. We set the three properties synthesized earlier
to nil (null in Objective-C) and release their instance from memory. The app is
almost complete after we finish connecting the storyboard to outlets and
actions.
7. Second View Connections
The process of building views is basically a repetition of the step 5, with
little extra steps. You can treat this as an exercise to strengthen your memory
on connecting the storyboard to outlets and actions, as they can be very
confusing in most times.
Again, save both your SecondViewController.h and SecondViewController.m to
make sure everything is updated. Then, click back onto the storyboard and look
at the Document Outline. In there you’ll notice an orange orb which should be
named Second View Controller – Second.
[connect disttextbox]
Click on the orb to select it, and a blue outline should appear on your
Second View scene. Nowpress Ctrl and click the Second View Controller – Second
to drag onto the text field, thenrelease it.
[select disttextbox]
After the action, a list of Outlets will come up. Select “distTextBox” from
the list. If the connection is successful the text field will flash.
[connect distresult]
Now press Ctrl and click the Second View Controller – Second again to drag
onto the Label field and select “distResult”. Repeat the process again for the
2nd Label located below the 1st Label, but choose the “auResult” for it. Both
our outlets are now connected into these variables and we just need to connect
the actions.
[second view: change custom class]
Click on the right arrow of the Second View Controller – Second and you will
see a component named View – click to select it. Open your Identity inspector in
the Utilities pane, which you can also enable it by move onto the top menu bar
of the software, and select View > Utilities > Show Identity Inspector.
Under Custom Class, enter “UIControl” or select it from the dropdown menu.
In order for the keyboard to recognize the background as a tappable object it
must be converted into a control. Now over in the Utilities pane activate
the Connections inspector by move onto the top menu bar of the software and
select View > Utilities > Show Connections Inspector.
[second view: connect page event]
This is how we connect a page event (swipe, tap, hold, etc) to a single
function call. Look through the list of events until you find Touch Down. Click
in the small circle located at the right side of the Touch Down event, then drag
and drop it onto the Second View Controller. You’ll be given 2 actions to select
from – choose backgroundTouchedHideKeyboard and you’ll get a confirmation
flash.
[second view: connect button event]
Finally click to select the Convert button and make sure it has a blue
highlight, similar to the screenshot above but without selecting the whole View
Control. In the Connections Inspectordrag the Touch Up Inside’s small circle
then drop it onto the Second View Controller again. Choose the function
named distanceConvert, which will only trigger when the user touches the button
and releases within the set boundaries.
Build and Run to see if your app succeeds in compiling. If there are no
errors everything should work properly. You could now spend time sprucing up the
text and layout, or maybe adding a custom logo PNG.
Thanks for following the tutorial and congrats, you’ve just made your first
working iPhone app!
Download Xcode Project
Can’t achieve certain step? Here is the result’s file for you to test and
compare the difference.
iPhone Application Tutorial Project File
Final Words
In closing it would be helpful to do an overview of the key points in this
tutorial. We started a new Xcode iPhone app project with a tabbed navigation.
This includes 2 UIViews which we added a text field, button, and labels. We
then wrote
some Objective-C code for defining Instance Variables (ivars) and Actions
(functions) to crunch the numbers for the conversions.
After all these, we finally connected Objects for each Instance Variable.
This allows the Objective-C backend implementation code to target an ID such as
tempTextBox and tie it into a storyboard object.
Hopefully you’ve digested many of the keywords and techniques for using
Xcode. You most likely won’t be an expert at building iOS apps after this
tutorial. In fact you may still be deeply confused on a lot of these topics! iOS
programming is about practice, so don’t feel sad if you cannot understand
everything right away. Try downloading the demo project file I’ve provided and
look through to familiarize yourself with this tutorial, and Xcode projects in
general. One last tip: never give up!
No comments:
Post a Comment