How to create a UIButton Programmatically

So, a lot of people starting with iOS development begin their creations using the Interface Builder a lot, but when time comes, a specific functionality will require you to create UIButton in the code instead of the Interface Builder.

That can happen when you have dynamic data coming from a web server or you need to create buttons depending on the action that the user is doing.

Don’t want to see the whole explanation? Click here and scroll to the full final code.

To start, create your UIButton and initialize it

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];

You can see that I initiated the button with the method buttonWithType.

This method defines what is the style of your button and you can choose from the following options:

UIButtonTypeContactAdd
UIButtonTypeCustom
UIButtonTypeDetailDisclosure
UIButtonTypeInfoDark
UIButtonTypeInfoLight
UIButtonTypeRoundedRect

The most common are the UIButtonTypeRoundedRect and the one I used, UIButtonTypeCustom.

UIButtonTypeRoundedRect is the default one, it has a white background with a thin light grey border and blue text in the middle (you can customize some of this attributes).

And the UIButtonTypeCustom is completely transparent with no style attributes, it just occupies the space in the screen. That’s the better way to create the button the way you want.
You can create an image and add that image as the button, or you can specify the background color, text color, etc…

I’m going to show you the simple way to add you custom image as the button. Right after the button you created and initialized, add this:

[myButton addTarget:self action:@selector(myCustomFunction:) forControlEvents:UIControlEventTouchUpInside];
[myButton setBackgroundImage:[UIImage imageNamed:@"yourImageName.png"] forState:UIControlStateNormal];
myButton.frame = CGRectMake(14.0, 10.0, 74.0, 46.0);

The first line of the code is where the magic happens, it tells what action the button should execute once it’s selected. And it does that by setting the method addTarget:action:forControlEvents.

First, the addTarget: specifies where the action is going to take place, in this case self as it will be in the current controller.
Second, the action: is what function should be called once the button is selected. In my example I used myCustomFunction:, so somewhere in my controller i need to have

- (void)myCustomFunction:(id)sender{
  NSLog(@"button was clicked");
}

Third, the forControlEvents: is what defines when my function is going to be executed. Since I used UIControlEventTouchUpInside, my function is only being called once the user let his finger off the screen.
If you require that the function be executed as soon as the user touches the button, you can use UIControlEventTouchDown.

The second line of this code set the background image of the button to your custom image, and to do that, it uses the method setBackgroundImage:forState:
The setBackgroundImage method instantiates an UIImage initializing with the image file “yourImageName.png” and then sets that image to be used for the state UIControlStateNormal.

The state UIControlStateNormal is the default state for the button and you can have different images for the other available states:

UIControlStateApplication
UIControlStateDisabled
UIControlStateHighlighted
UIControlStateNormal
UIControlStateReserved
UIControlStateSelected

If you’d like to add different images for different states, just copy the first line with the setBackgroundImage:forState: method and change the image name and the forState values.

The third line sets the button size and position in the screen using the .frame attribute. The frame attribute is set using the method CGRectMake that defines the size and position of the element in the screen.

In this case, the CGRectMake is receiving 4 different values, the first two are the X and Y position of the element and the last two are the Width and Height sizes of the element.

myButton.frame = CGRectMake(X, Y, Width, Height);

After setting the background image and the frame, all you need to do is add the element to your view with:

[self addSubview:myButton];

And that’s it. This is how the full code looks like:

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton addTarget:self action:@selector(myCustomFunction:) forControlEvents:UIControlEventTouchUpInside];
[myButton setBackgroundImage:[UIImage imageNamed:@"yourImageName.png"] forState:UIControlStateNormal];
myButton.frame = CGRectMake(14.0, 10.0, 74.0, 46.0);

[self addSubview:myButton];

Do you have any questions, comments, compliments? hit the comments below.

Thanks

.gm.