{"id":10698,"date":"2011-11-08T21:03:07","date_gmt":"2011-11-08T13:03:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10698"},"modified":"2025-04-04T00:43:45","modified_gmt":"2025-04-03T16:43:45","slug":"ios-development-guide-part2-your-first-app","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ios-development-guide-part2-your-first-app\/","title":{"rendered":"iOS Development Guide: Creating Your First App (Part II)"},"content":{"rendered":"

In the first part of our iOS tutorial<\/a>, we took you through an introduction to iPhone app development. We explored Xcode 4 and covered a basic tutorial on building an iPhone app. This beginner tutorial was designed for anyone interested in learning how to program iOS apps.<\/p>\n

Today, we\u2019ll delve into the second segment of the topic, where we will be building a fully-functioning iPhone application<\/strong>. The app, with tabbed navigation, will convert temperature units and distance units<\/strong>. Don\u2019t worry if you\u2019re still new to Xcode. It doesn\u2019t take long to get comfortable with the interface. I\u2019ll explain each step in detail so you won\u2019t get lost!<\/p>\n

By the end of the tutorial, you will have an application that, while it can\u2019t be pushed to an iPhone without purchasing a developer program, can be run inside the iOS Simulator on a macOS system. I\u2019ve provided the project files for download, which you can refer to if you\u2019re unsure about any step. Ready to build an app? Let\u2019s get started!<\/p>\n

Note: You will need a computer with the Macintosh Operating System (macOS) for Xcode installation, application development, and app submission. There is no legal way to do this on Windows.<\/em><\/p>\n

Pre-Setup: Installing Xcode Packages<\/h2>\n

If you haven\u2019t done so already, you will need to get Xcode 4<\/strong> on your computer. You must use Xcode 4<\/strong> since this tutorial is written specifically for Xcode 4. If you\u2019re running the latest macOS Lion, a simple search in the App Store<\/strong> will provide everything you need. Xcode 4 includes the iOS SDK & Simulator for building and running iPhone apps directly on your Mac!<\/p>\n

\"Xcode<\/figure>\n

If you cannot find Xcode 4 in the App Store, you can also try accessing the official Xcode page<\/a> to download the software. Otherwise, you\u2019ll need to find the software in your developer account, which you can register for<\/a> without a fee on the Apple Developer site.<\/p>\n

You could also check on Google if you\u2019re having difficulty finding the software. Apple tries to keep their developers more private and refined, so it can be a struggle getting everything set up to begin programming. Luckily, Xcode is a one-time install<\/strong> that includes all the SDK components you\u2019ll need for iPhone app development.<\/p>\n

After the installation is completed, open your new software and let\u2019s build this iPhone app!<\/p>\n

Creating Your New Project<\/h2>\n

Open Xcode 4 and you should see a startup screen with a few default options. From the list, select \u201cCreate a new Xcode project\u201d<\/strong> to open the main window. Here, you have the choice to select which template to begin with. We\u2019re going to use the Tabbed Application<\/strong>.<\/p>\n

\"Tabbed<\/figure>\n

Click \u201cNext\u201d<\/strong> and you need to enter a name for your project<\/strong>. I\u2019ve chosen Converter<\/em>. Next, you need to enter the Company Identifier<\/strong>, such as com.hongkiat<\/em>, which is used to sort the internal build directories of your application. Make sure you select \u201ciPhone\u201d from the Device Family<\/strong>, and ensure all options below are checked<\/strong>. Click \u201cNext\u201d<\/strong> and choose a location to create<\/strong> all the project files.<\/p>\n

\"Project<\/figure>\n

In the left pane, you\u2019ll notice the Project Navigator<\/strong> with a whole new set of files. Click on the \u201cConverter\u201d file<\/strong> to view all files inside. Beside the Project Navigator is the Document Outline<\/strong>. Remember these names<\/strong> since we\u2019re going to use them throughout the entire tutorial.<\/p>\n

\"MainStoryboard<\/figure>\n

You should notice three very important files: MainStoryboard.storyboard<\/em><\/strong>, FirstViewController.h<\/em><\/strong>, and FirstViewController.m<\/em><\/strong>. The .h and .m files are used for header and implementation code, which essentially connects the back-end programming with our front-end buttons and text fields. You should see matching files, SecondViewController.h<\/em> and SecondViewController.m<\/em> for the Second View as well.<\/p>\n

The storyboard file was originally a .xib<\/em><\/strong> (pronounced nib<\/em>) file that 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 uncheck the storyboard option<\/strong> and you\u2019ll have individual .xib<\/em> files for each view. If you feel more comfortable with the old file system, you can use that, but for this tutorial, you must stick to the storyboard method<\/strong>.<\/p>\n

Custom Tab Bar Icons<\/h2>\n

We will start building the interface components first and move onto Objective-C programming later. To begin, let\u2019s replace the label text with icons in the tab bar<\/strong>. First, download the Glyphish icon set<\/a> to your Desktop<\/strong>. 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.<\/p>\n

\"Adding<\/figure>\n

Back in Xcode, in your Project Navigator, right-click on the first yellow folder<\/strong> which contains your main views and select \u201cAdd files to Group<\/em>\u2026\u201d<\/strong>. The Group<\/em> should be titled according to your project name; in this case, it\u2019s Converter<\/em>.<\/p>\n

\"Adding<\/figure>\n

A new window will open to select files to add to Xcode. Choose the Glyphish icon file located on your Desktop<\/strong> (or wherever you saved it) and inside the icons<\/em> folder<\/strong>, choose the 61-brightness.png<\/em><\/strong>. Click \u201cAdd\u201d<\/strong> so they\u2019ll be imported into your project directory. Repeat the same process to add 07-map-marker.png<\/em><\/strong> to the project directory.<\/p>\n

\"Document<\/figure>\n

Now, select MainStoryboard.storyboard<\/em><\/strong> to open the visual editor in the center of the software. To the left, you\u2019ll notice a new menu on the right side of the Project Navigator, called the Document Outline<\/strong>. This is a documented list of all the elements, pages, views, and navigation in your app.<\/p>\n

\"Utilities<\/figure>\n

Before we add the icons, we need another menu called the Utilities<\/strong>. The Utilities pane is enabled by default, but you can also enable it by selecting View > Utilities > Show Utilities<\/strong> on the top menu bar of the software.<\/p>\n

\"Tab<\/figure>\n

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 \u2013 First<\/strong> to display more elements, and you should see Tab Bar Item<\/strong>. Click to select it<\/strong>, and if you can\u2019t see anything, try scrolling to the right in your storyboard viewer. All the edits for the tabs will be done in the Attributes Inspector<\/strong>, which you can show by selecting View > Utilities > Show Attributes Inspector<\/strong>.<\/p>\n

\"Selecting<\/figure>\n

Now look at the Utilities pane on the right side of the editor, and you will see the Title<\/strong> and Image<\/strong> property under the Tab Bar Item. Click on the down arrow of the Image option<\/strong>, then select 61-brightness.png<\/em><\/strong>. The icon will be assigned to the Tab Bar Item of the First View. You can also remove the Title<\/strong> of the Tab Bar Item so there will be no text below the icon.<\/p>\n

For the Second View, return to the Document Outline and click on the down arrow of Second View Controller \u2013 Second<\/strong> to show the Tab Bar Item \u2013 Second. Click on \u201cTab Bar Item \u2013 Second\u201d<\/strong> and look at the Utilities pane on the right side of the editor for the Title<\/strong> and Image<\/strong> property under the Tab Bar Item. Click on the down arrow<\/strong> of the Image option, then select 07-map-marker.png<\/em><\/strong>. The icon will be assigned to the Tab Bar Item of the Second View. Remove the Title<\/strong> of the Tab Bar Item.<\/p>\n

Designing Views with Objects<\/h2>\n

We\u2019ve finished importing and setting the images. Now, let\u2019s move on to designing the views. We will design the First View first, then copy all elements from the First View and paste them into the Second View, making some additional changes for the Second View later.<\/p>\n

\"Changing<\/figure>\n

For each default view, we are given a basic text header<\/strong> and description object<\/strong>. Double-click on the \u201cFirst View\u201d text of the First View Controller in the visual editor<\/strong> and change it to \u201cTemp Converter\u201d<\/strong>. Repeat the process for the Second View Controller<\/strong> but change the name to \u201cDistance Converter\u201d<\/strong>. You can select the text and use the Attributes Inspector in the Utilities pane to change the font, color, size, etc.<\/p>\n

\"Changing<\/figure>\n

For the description object under the text header of the First View Controller, you can double-click on the description text<\/strong> and provide a basic description of what we\u2019ll be doing<\/strong> in each view, such as \u201cEnter the value below to convert Fahrenheit into Celsius<\/em>\u201c. You can repeat the process to give a basic description for the description object of the Second View Controller<\/strong>, but change the description to \u201cEnter the value below to convert Miles into Kilometers and Astronomical Units<\/em>\u201c.<\/p>\n

\"Adding<\/figure>\n

Now we need to create a text field for the value input. In the bottom part of the Utilities pane on the right side of the software, you should see the Objects library, which can also be enabled by selecting View > Utilities > Show Object Library<\/strong>. In its drop-down menu, choose Controls<\/strong> and select a Text Field<\/strong>, then drag it into the First View Controller<\/strong>.<\/p>\n

\"Adding<\/figure>\n

Move the text field to center it<\/strong> and resize the box to your preferred size<\/strong>. In the Attributes Inspector in the Utilities pane, you can also change the text color of the input field. Next, add the text \u201cEnter temperature\u2026\u201d into the Placeholder field (not the Text field)<\/strong>.<\/p>\n

\"Extra<\/figure>\n

Now let\u2019s do some extra settings to make the app more user-friendly. In the Utilities pane, find the property \u201cClear Button\u201d<\/strong>, then change it from \u201cNever appears\u201d to \u201cAppears while editing\u201d<\/strong>. This allows you to delete the entire entry at once without repeatedly tapping the x<\/span> button.<\/p>\n

Next, in the pane, find the \u201cKeyboard\u201d property<\/strong> with a drop-down menu. Change this from \u201cDefault\u201d to \u201cNumber Pad\u201d<\/strong> so the input will be limited to only numbers.<\/p>\n

\"Adding<\/figure>\n

Next, we will create a button to convert the value. Drag a Round Rect Button<\/strong> from the Object Library located at the bottom of the Utilities pane and place it below the text field<\/strong>. Double-click to add the text \u201cConvert!\u201d<\/strong>. Again, spend some time in the Attributes Inspector to customize the style, although it looks fine by default.<\/p>\n

\"Adding<\/figure>\n

We just need to drag the Label object from the Object Library into the First View Controller<\/strong> to handle output text from the conversions. When you drag the label into the view, by default it\u2019s given some static text, such as \u201cLabel\u201d. You should delete the text<\/strong> so nothing will be displayed when the app launches. Resize the box to make it wider<\/strong> and position it below the Convert button.<\/p>\n

\"Improved<\/figure>\n

Before we move to the Second View Controller, you can improve the design of the First View Controller<\/strong>. It\u2019s recommended to enhance the design now so later, when we duplicate the elements of the First View Controller to the Second View Controller, we don\u2019t need to redesign the Second View Controller again.<\/p>\n

Now let\u2019s 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.<\/p>\n

\"Selecting<\/figure>\n

Click on the \u201cView\u201d of the Second View Controller in your Document Outline, and drag to select all items and delete them<\/strong>. This should only remove a text header and description object so that the second view is completely empty. Now select all the items in the First View<\/strong> and press cmd+c\/cmd+v to copy\/paste them into the empty Second View. Below are the changes required for the Second View:<\/p>\n