Question about extensiblity of Cocoa Touch Controls

Question

I'm new to programming for the iPhone and i'm wondering: how extensible are the various controls? Let's take the button as an example:

• can i change the background graphic?
• can i make it grow larger when i press on it?
• can i change the font?
• can i use a custom font?
• can i use a button graphic in place of text?

Answer 1

In general, yes to all your questions. You can subclass the various UI* classes that make up the Cocoa touch controls just like any other classes, and add your own custom functionality in the appropriate methods. The only tricky part is figuring out where exactly your code should go.

Let's look at your UIButton example, and walk through what you want to do with it.

Background image

The UIButton class already has a method setBackgroundImage:forState: that lets you change the UIImage the button displays when it's in one of several states, such as Normal, Highlighted, Disabled, and so on.

For example, to change the image the button displays as a normal background to "backgroundImage.png", which is an image file in your application's bundle:

//Presuming you have some UIButton *button:
UIImage *bgImage = [UIImage imageNamed:@"backgroundImage.png"];
[button setBackgroundImage:bgImage forState:UIControlStateNormal];

Growing larger

You can change the button's frame (an inherited property from UIView) by adding a method to do so in the view controller .m file that manages the button, then adding that method as an action for a control event on the button.

Let's say you want to double the size of the button. In viewDidLoad: or somewhere similar, add the following code:

[button addTarget:self action:@selector(growButton) 
             forControlEvents:UIControlEventTouchDown];

Then create a method growButton with the following code:

- (void)growButton {
    CGRect currentFrame = button.frame;
    CGRect newFrame = CGRectMake(currentFrame.origin.x - currentFrame.size.width / 2,
                                 currentFrame.origin.y - currentFrame.size.height / 2,
                                 currentFrame.size.width * 2,
                                 currentFrame.size.height * 2);
    button.frame = newFrame;
}

This doubles your button's size while keeping its center the same. (Be careful your button doesn't grow over the edge of your view when you do this.)

Changing the font

Simply change the font property of the UIButton - set it to a new instance of UIFont, like in this example:

button.font = [UIFont systemFontOfSize:16.0];

This changes the button's font to the system's font with size 16.

Custom font

This is a somewhat trickier question, as I'm pretty sure you can't load your own custom font files, even if you include them in your app bundle. You can, however, change the default font of a control by using UIFont's fontWithName:size: class method. All the font names are available through UIFont's familyNames and fontNamesForFamilyName: methods.

Button graphics instead of text

This is the simplest of the five - just don't set the text on the button, but instead set a background image for UIControlStateNormal (see above).

Answer 2

Yes.

1,3,4, and 5 can be accomplished with no code, using the attributes of the button in Interface Builder. To change the font, bring up the fonts panel (Command-T) with the button selected.

Making the button grow requires adding code that is executed when it is clicked. You can put a few lines like this in your view controller, and it should do the trick:

- (void)buttonClicked:(id)sender
{
   [UIView beginAnimations:nil context:nil];
   [UIView setAnimationDuration: 0.4];
   [sender setFrame:CGRectMake(--,--,--,--)]; //replace with slightly bigger button frame
   [UIView commitAnimations];
}