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:
Clicking next brings you to another screen to fill in all the necessary options for your project.
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.
The AppDelegate.h header file is shown below.
AppDelegate.h
|
1 2 3 4 5 6 |
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @end |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#import "AppDelegate.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. return YES; } - (void)applicationWillResignActive:(UIApplication *)application { // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game. } - (void)applicationDidEnterBackground:(UIApplication *)application { // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits. } - (void)applicationWillEnterForeground:(UIApplication *)application { // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background. } - (void)applicationDidBecomeActive:(UIApplication *)application { // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface. } - (void)applicationWillTerminate:(UIApplication *)application { // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:. } @end |
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
|
1 2 3 4 5 6 7 8 |
#import <UIKit/UIKit.h> @interface ViewController : UIViewController{ IBOutlet UILabel *label; } -(IBAction)showLabel; @end |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } -(IBAction)showLabel{ label.text = @"Hello World"; } @end |
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.
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.
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:
The output of the application in action is given below.
So we’ve just build our first iOS Application. You can download the XCode Hello World Project from the link given below.