Your First iOS App: 100% Programmatically

Part 2

This tutorial is for Xcode 4.6, and was written in 2013. Check out my updated version (in Swift!), using Xcode 7.3/iOS 9.3.

The next step is to add elements to the user interface — a text field, a button, and a label.

1. The Text Field

Go back to your MainViewController.m file. Similar to the app delegate, this comes with some helpful methods to handle different points in the life cycle of the UIViewController class.

First we need to create class properties for the text field and the label. Creating a property allows instances of an object to be accessed anywhere in the class, as opposed to just within the scope of one function. We’ll need to do this to pass a string from the text field to the label.

Private properties can be declared between the lines below in the MainViewController.m file.

@interface MainViewController()
@end

So we can add in the lines:

@interface MainViewController()
@property (nonatomic, strong) UITextField *textField;
@property (nonatomic, strong) UILabel *label;
@end

You might be wondering what the “nonatomic, strong” means — the short answer is that it has to do with memory management. You can read more about it here.

Now find the “viewDidLoad” method, which is executed immediately after the view is created and loaded on screen — right now it should look like this:

- (void)viewDidLoad
{
 [super viewDidLoad];
 // Do any additional setup after loading the view.
}

Time to create the text field. Using the “self.” prefix references the class property we created above. You can find more about class properties and the “self dot” syntax here.

- (void)viewDidLoad
{
 [super viewDidLoad];
 // Do any additional setup after loading the view.
 
 /*
 this creates the text field and sets the frame
 “CGRectMake” creates the frame with (x,y,width,height)
 where x and y are are pixel distances from the top left
 of the screen
 */
 self.textField = [[UITextField alloc]
 initWithFrame:
 CGRectMake(10.0f, 30.0f, 
 300.0f, 30.0f)];
 
 //changes the border style so the text field appears on screen
 self.textField.borderStyle = UITextBorderStyleRoundedRect;
 
 /*
 add the text field to the main view.
 Note: UITextField (along with a number of
 other UI classes are subclasses of
 UIView, which means they can be
 added onto the view hierarchy
 */
 [self.view addSubview:self.textField];
 
}

If you run the app, you should now see the text field at the top of the screen. Clicking inside will bring up the keyboard and allow you to type. While the keyboard appears automatically, we have to add to code make it disappear ourselves.

The key is implementing a “delegate method” of the UITextField. Delegate methods are like helper functions for the objects in your application, and can sometimes help pass data between two classes. The delegate method we need to dismiss the keyboard is called “textFieldShouldReturn”, a function that is called every time the user presses the “return” button on the keyboard.

Information about a class’s delegate methods is in Apple’s documentation. You can find the “textFieldShouldReturn” method in the UITextFieldDelegate reference article.

Add it below your viewDidLoad method:

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
} 

Dismiss the text field programmatically by adding the following lines:

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
 //this tells the operating system to remove
 //the keyboard from the forefront
 [textField resignFirstResponder];
 //returns NO. Instead of adding a line break,
 //the text field resigns
 return NO;
}

We need to do a few more things before this works. Go back to the viewDidLoad method where you created the text field. Right below the alloc, init line, add

self.textField.delegate = self;

This lets the application know where to look for the implementation of the delegate methods, which in this case is inside Self — a reference to our MainViewController class.

The last thing we need to do is update the MainViewController.h file. In the .h file, you’ll find the line:

@interface MainViewController : UIViewController

Change it to:

@interface MainViewController : UIViewController <UITextFieldDelegate>

This tells the MainViewController that it implements delegate methods of a UITextField object. Run the app — pressing the return button should now dismiss the text field.

2. The Button

We’ll create the label in the viewDidLoad method as well. Start below the line

[self.view addSubview:self.textField];

You can initialize a button the same way the text field was initialized (with the alloc, initWithFrame methods), but because we’re just using a default button I do it a bit differently here with a UIButton class method. Note that if you try the alloc/init way, you have to set the button’s background for it to appear.

//initialize the button with the default, rounded rect type
UIButton *button = 
 [UIButton buttonWithType:UIButtonTypeRoundedRect];
//set the button’s frame
button.frame = CGRectMake(110.0f, 200.0f, 100.0f, 30.0f);
//set the target, action, and control event.
//more about this in the paragraph below
[button addTarget:self 
 action:@selector(buttonPressed) 
 forControlEvents:UIControlEventTouchUpInside];
//set the title
[button setTitle:@”Press Me!” forState:UIControlStateNormal];
//add the button to the main view
[self.view addSubview:button];

This takes care of most of the button’s properties. The addTarget, action, forControlEvents method allows you to specify a function that’s called when the button is pressed. The target is the object to which the action message is sent — in this case, self. The action after the button is pressed is identical to what would happen if you called

[self buttonPressed];

Wrapped in the @selector() block is the name of the function to be called when the button is pressed — we still need to implement this.

The control event specifies the type of interaction required to trigger the button. Apple’s “UIControlEventTouchUpInside” is the way to specify just a simple tap.

Now we can create the shell of the buttonPressed function. We need to create the label before we can implement the full thing.

In between viewDidLoad and textFieldShouldReturn, create the buttonPressed method:

- (void)buttonPressed {
 
}

We’ll come back to this after we create the label.

3. The Label

I’ve saved the easiest for last. We’ll create the label below the line

[self.view addSubview:button]

The label is initialized much like the textfield, and is ready to go with just three lines:

self.label = [[UILabel alloc] 
 initWithFrame:CGRectMake(115.0f, 150.0f, 200.0f, 30.0f)];
self.label.text = @”Hello World!”;
[self.view addSubview:self.label];

Run the app, and you should see the familiar “Hello World!” above your button.

4. Changing the Label Text

Only one thing left to do. Since you’ve already created the shell of the button pressed method, we just have to add a line that sets the label text equal to the string in the text field. This is done with one line inside buttonPressed:

- (void)buttonPressed {
 self.label.text = self.textField.text;
}

That’s it! Run the app and try it out.