In this tutorial we’ll develop our first iPhone Application which displays a Hello World Label on the screen. We’re going to create a single view application that will display a string on screen.

Getting Started

First launch XCode (you need to download it from the Mac App Store) from your launchpad. Click on create a new XCode project from the welcome screen. The following screen would appear:

ios-hello-world-project-view-1

Clicking next brings you to another screen to fill in all the necessary options for your project.

ios-hello-world-project-view-2-1

Leave the unit tests and Core Data as unchecked since we’re not using them in this application.

Clicking Next, XCode asks you to save the Hello World! project. Pick any folder on your mac. On clicking confirm the next screen looks like this :

In the above screen, you will be able to select the supported orientations, build and release settings. On the left pane, it’s the project navigator. You can find all your project files under this area.

ios-hello-world-project-view-4

The AppDelegate.h header file is shown below.
AppDelegate.h

Some important inferences drawn from the above snippet are listed below.

  • The header file UIKit provides all the UI related items
  • AppDelegate inherits from UIResponder that handles all the iOS events
  • Implements the delegate methods of UIApplicationDelegate, which provides key application events like finished launching, about to terminate and so on
  • UIWindow object to manage and co-ordinate the various views on the iOS device screen. It’s like the base view over which all other views are loaded. Generally there is only one window for an application
  • UIViewController to handle the screen flow

AppDelegate.m

UIApplication delegates are defined here. All the methods defined above are UI application delegates and contains no user defined methods. These methods can be overridden according to our needs.

The ViewController.h class inherits the UIViewController, which provides the fundamental view management model for the iOS applications. We’ll declare the label variable and define the method that’s invoked on button click in this header file as shown below.

ViewController.h

Note : IBAction and IBOutlet are macros defined to denote methods and variables that can be referred to in Interface Builder.

The ViewController.m contains the basic methods.

  • viewDidLoad
  • didReceiveMemoryWarning

Along with that we implement our own instance methods that we’d declared in the
ViewController.h file. The ViewController.m file is given below.

ViewController.m

In the above code we’ve implemented the Button Action such that the label text is changed when it’s clicked.

Linking the UI to the Code

Now, we’ll move on to our user interface. We need to give our users a way to interact with all of the awesome code we just wrote. Click on Main.storyboard and you’ll see something similar to the image given below.

ios-hello-world-project-view-5

Label and buttons will be available in Object Library that’s present in the bottom right pane of the screen. Drag and drop them on the view and modify the text of the label/button from the attributes inspector that’s in the right pane of the view as shown below.

ios-hello-world-project-view-6

As you can see above, that the button text does not display full text. To wrap the width to the text press Cmd and + together. Something like this would be seen then.

Select the button and hold control and drag it to the golden button (View Controller) at the top and choose showLabel method. This registers that method with the current button in the view.

To link the Label with the code click on the connections inspector and press control and drag it on the label text. Choose the label variable (or the equivalent name that you’d defined in the header file.

Note: The button can be linked in this way too.

So we’re ready now to build our first iOS application. Choose the type of simulator and build the project from the top left toolbar as shown below.

The output of the application is given below.

OOPS! We see that the view is out of the screen. The reason is we have the Use Size Classes enabled in the File inspector as shown below.

Align the label center vertical and the button as center horizontal and vertical. The alignment of the label can be changed from the alignment option in the attributes inspector. Your final view controller should look something like this:

ios-hello-world-project-view-12

The output of the application in action is given below.
ios-hello-world-output-2

So we’ve just build our first iOS Application. You can download the XCode Hello World Project from the link given below.

By admin

Leave a Reply