iPhone Tutorial - Creating Basic Buttons

iPhone Tutorial - Creating Basic Buttonse

In our previous introductory tutorial on iPhone development, a question was asked about how to create a button and listen for its UIControlEventTouchUpInside event. I didn't want to put everything that was required into the comments of that post, so I created this tutorial as an answer. Much like the last tutorial, I'm still avoiding Interface Builder and am going to build the button using nothing but code.

I'm going to use the code created from the last tutorial as a starting point, so I would recommend checking that one out if you're new to iPhone development. Basically what we're starting with is a new Window-Based application with one UIViewController subclass. We've implement theloadView function, which basically gives us total control over populating the view controller with our views. Here's the code that's needed before we can begin with our button.

// Implement loadView to create a view hierarchy programmatically, 
// without using a nib.
- (void)loadView {
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
}

All we're doing here is creating the UIViewController's view object, setting its size to the entire screen, and making its background white. This is slightly different from the last tutorial since I no longer have to hardcode the size of the view. The UIScreen class has a class method, mainScreen, which we can use to get the screen of the device. We can then ask that object for its applicationFrame, which will be the total size of the iPhone's display.

All right, now let's get the basic stuff out of the way. Here's the code required to create the button and give it some text.

// Implement loadView to create a view hierarchy programmatically, 
// without using a nib.
- (void)loadView {
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
  
  //create the button
  UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        
  //set the position of the button
  button.frame = CGRectMake(100, 170, 100, 30);
  
  //set the button's title
  [button setTitle:@"Click Me!" forState:UIControlStateNormal];
  
  //add the button to the view
  [self.view addSubview:button];
}

The first thing we need to do is create a button. The UIButton object has a class method called buttonWithType that automatically creates buttons with various types. We just want a regular old button so I passed inUIButtonTypeRoundedRect. Next up, we need to position and size the button, so I set the frame property to my specified bounds. A button's not much use without text, and setTitle is used to set it. You can specify a different title for each state, and if a title is not set for a specific state, it will use whatever was set for UIControlStateNormal. That's why it's the only state we're setting a title for. All that's left now is to add it as a subview to the UIViewController's view object. If you were to compile and run the code you'd see a button in the center of the screen.

A button doesn't do us a lot of good unless we know when it's been pressed. The next thing we need to add is a hook to listen for when the user clicks it.

// Implement loadView to create a view hierarchy programmatically, 
// without using a nib.
- (void)loadView {
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
  
  //create the button
  UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        
  //set the position of the button
  button.frame = CGRectMake(100, 170, 100, 30);
  
  //set the button's title
  [button setTitle:@"Click Me!" forState:UIControlStateNormal];
  
  //listen for clicks
  [button addTarget:self action:@selector(buttonPressed) 
   forControlEvents:UIControlEventTouchUpInside];
  
  //add the button to the view
  [self.view addSubview:button];
}

-(void)buttonPressed {
  NSLog(@"Button Pressed!");
}

We use the addTarget function to hook into the UIControlEventTouchUpInside event. Basically, what we're saying here is to send that event to self and call the function buttonPressed. The @selector directive returns what's essentially a function pointer in the Objective C world. Lastly, if we're telling the button to send a message to a class, we had better implement a method for that message, so all we do is simply log a message to the console. You can view the console by selecting Run / Console on XCode's menu.

That's it! Now you've got a button and you know when the user has clicked it. If you've got questions or comments feel free to leave them below or check out the forums.

An Absolute Beginner's Guide to iPhone Development

So you've got a Mac, you've got an iPhone, and you really want to start writing some apps. There's tons of documentation available, but the best way to learn a ew language and framework is to simply dive right in. All of the documentation and tutorials I ran across when learning to program the iPhone depended a little too much on Interface Builder, which basically sticks a layer of magic between me and what I want to do. Frankly, I like to begin at the bottom and work my way up, which is why this tutorial is going to show you how to create a basic 'Hello World' application programmatically - without the help of a visual designer.

When I pick up any new framework that includes a designer, I like to start out building interfaces in code, because then I get an understanding of what the designer is doing behind the scenes. And honestly, I find Interface Builder about one of the most confusing designers I've ever used.

The first thing you're going to need to do is download and install the iPhone SDK. This is going to give you everything you need in order to build apps - XCode, iPhone Simulator, and Interface Builder. Downloading and installing the SDK is totally free. You'll have to pay $99 if you want to run the app on a real iPhone or distribute it to the app store. For the purposes of learning, though, the simulator works just fine.

After you've got all that stuff installed, you're ready to start. Start by launching XCode. By default it's installed in the Developer folder.

When you launch XCode you'll be presented with a welcome screen. You can either look through that or just dismiss it, none of it is particularly important. What we need is a new project. Select File > New Project to bring up the project templates.

The Window-Based Application is about as simple as it gets. What this template is going to give is a Window and an application delegate. An application delegate (UIApplicationDelegate) is an object that responds to messages from aUIApplication object. There can be only one UIApplication object, and the project template takes care of creating it for us. When you click Choose, you'll now be prompted for a project name. I named mine "HelloWorld".

Once the project is created, you'll be presented with the XCode interface and all of the files the project template has generated for you.

The important files are main.m, HelloWorldAppDelegate.h, and HelloWorldAppDelegate.m. The main function is where the single UIApplication object is created. The function call UIApplicationMain() takes care of that. You might be wondering, though, how in the world is HelloWorldAppDelegate hooked up to the UIApplication object? Well, unfortunately there's still a little magic we can't avoid. The template created a nib file for us (MainWindow.xib) that takes care of forming this relationship. You'll just have to take it for granted that the messages will be passed into our delegate.

Now let's check out the implementation of the delegate, HelloWorldAppDelegate.m. There are several messages we can get from the UIApplication object, however the template has already created the one we care about -applicationDidFinishLaunching

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
    [window makeKeyAndVisible];
}

This function is where we'll be creating our view controller, which will eventually hold our 'Hello World' label object. In order to create a view controller, we need to add another class to our project that subclasses UIViewController. Fortunately, since creating view controllers is a common task, XCode has a template for it. Right mouse click on the Classes folder and choose Add > New File.

When you click Next, you'll be presented with some options. The only thing you should have to set is the filename. I named mine HelloWorldViewController. You might notice that the new implementation file (HelloWorldViewController.m) is full of commented out functions. View controllers are meant to be used by overriding the base implementation of various methods. In our case, we want to override loadView, which is used to manually populate a view controller.

// Implement loadView to create a view hierarchy programmatically, 
// without using a nib.
- (void)loadView {
        
}

We're getting there. We're almost ready to starting putting something on the screen. You don't add controls directly to the view controller. They're added to a UIView, which is a property of the view controller. The view, however, is not allocated yet, so we're going to start there. We need to create a UIView object that is the size of our display and set it to the view controllers view property.

- (void)loadView {
        
  //create a frame that sets the bounds of the view
  CGRect frame = CGRectMake(0, 0, 320, 480);
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:frame];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
}

The first thing I do is create a CGRect object that will act as the bounds for our view. Basically I want the view positioned at (0, 0) and be the total size of the iPhone display (320, 480). View controllers have a view property that needs to be set to our new UIView object. The last thing I do is simply set the background color property to white.

All right, now we can actually create a label to hold our "Hello World" text.

- (void)loadView {
        
  //create a frame that sets the bounds of the view
  CGRect frame = CGRectMake(0, 0, 320, 480);
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:frame];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
        
  //set the position of the label
  frame = CGRectMake(100, 170, 100, 50);
  
  //allocate the label
  UILabel *label = [[UILabel alloc] initWithFrame:frame];
  
  //set the label's text
  label.text = @"Hello World!";
  
  //add the label to the view
  [self.view addSubview:label];
  
  //release the label
  [label release];
}

Again, I need to specify where I'd like the label to be, so I create another CGRect object. I then allocate the label and initialize it with the bounds I just created. Next up I set the text to "Hello World!" and add the label to the view. Objective-C uses reference counting to automatically delete objects, so whenever you're done with a reference, you need to call release.

We now have a view controller with a label that will display the text, "Hello World". Now we need to create an instance of this view controller and add it to our application. Remember that function,applicationDidFinishLaunching that I mentioned earlier. That's where we'll be creating our view controller.

The first thing you're going to have to do it add an import statement at the top of that file (HelloWorldAppDelegate.m) so the compiler can find the declaration of that object.

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"

Just add it right under the existing import statement. Now we're ready to create the view controller.

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
  //allocate the view controller
  self.viewController = [HelloWorldViewController alloc];
  
  //add the view controller's view to the window
  [window addSubview:self.viewController.view];
  
  [window makeKeyAndVisible];
}

Just like before, we simply allocate a new HelloWorldViewController. We don't add the view controller directly to the window, rather we add it's view property to the window. Technically we could create the view controller locally, but doing so would cause a memory leak. We need to save a reference to it somewhere so we can clean up the memory at a later time. I created a property called viewController to store the view controller.

Properties are defined in the .h file. Here's my modified HelloWorldAppDelegate.h file.

#import <UIKit/UIKit.h>

@class HelloWorldViewController;

@interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
  
  HelloWorldViewController *viewController;
  
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) HelloWorldViewController *viewController;

@end

The @class HelloWorldViewController is a forward declaration. Basically we're telling the compiler a class with this name exists, but you don't need to worry about its definition right now. In the @interface section, we declare a member variable to hold our view controller. Lastly, we use @property to wrap our member variable with implicitget and set functions.

We're almost done. We now need to tell the compiler to actually create the get and set functions for our new property. We do that back in the .m file with @synthesize.

@synthesize window;
@synthesize viewController;

You should already see one for the window property. Just stick this one right underneath it. The very last thing we need to do is release our reference to the view controller when the dealloc is called. There should already be a dealloc function in the .m file. We just need to add a little to it.

- (void)dealloc {
  [viewController release];
  [window release];
  [super dealloc];
}

And there you have it. The final HelloWorldAppDelegate implementation file should look like this:

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"

@implementation HelloWorldAppDelegate

@synthesize window;
@synthesize viewController;


- (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
  //allocate the view controller
  self.viewController = [HelloWorldViewController alloc];
  
  //add the view controller's view to the window
  [window addSubview:self.viewController.view];
  
  [window makeKeyAndVisible];
}


- (void)dealloc {
  [viewController release];
  [window release];
  [super dealloc];
}

@end

We're done. If you build and run the app (Build > Build and Go), you should see something that looks like the image below.

And there you have it. You've learned how to build a simple iPhone application entirely in code. The iPhone is a new platform for us, so as we learn we'll continue to post new tutorials. If you've got questions, feel free to post them below or leave them in our Forums.