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]
