Changing Size of Text on a UIButton ...

Question

Hi Everyone ,

Client wants me to do something, i have just checked and i m quite sure its not possible. He asked to put a text on a Button ( UIButton ). (Default State Configuration) And when the user clicks it the text should enlarge. (Highligted State Configuration) I have checked by selecting Highligted State Configuration and then changed the size of text in the Interface Builder but i didnt work . The text changed for Default State Configuration as well. Please tell me if there is any way to do it.

Thanks!

Taimur

Answer 1

You might not be able to do it in IB, but you can certainly do it with a pair of actions. I'm assuming that the highlighted state will only be active while the button is pressed. You can modify this code if that's not the case (to toggle the state back to normal when the highlighted state ends).

- (IBAction)buttonDown:(id)sender {
    UIButton *button = (UIButton *)sender;
    button.titleLabel.font = [UIFont boldSystemFontOfSize:18.0];
}

- (IBAction)buttonUp:(id)sender {
    UIButton *button = (UIButton *)sender;
    button.titleLabel.font = [UIFont boldSystemFontOfSize:15.0];
}

Answer 2

This actually isn't too hard to do. You need to create two IBActions in your class, onTouchDown and onTouchUp. Create an IBOutlet for your button too. Then, go to Interface Builder and wire up the button to the IBOutlet and wire up the action for "Touch Down" to "onTouchDown" and the actions for "Touch Up Inside" and "Touch Up Outside" to "onTouchUp."

onTouchDown is where you'll set your highlighted font. onTouchUp is where you'll reset your button.

Your header file will end up looking something like this:

@interface TestViewController : UIViewController {
    UIButton *testButton;
}


@property (nonatomic, retain) IBOutlet UIButton *testButton;
- (IBAction)onTouchDown;
- (IBAction)onTouchUp;

Now, inside the "onTouchDown" function here's what you're gonna do:

1) Store the current dimensions of the button

2) Change the font size

3) Tell the button to auto-resize (THIS IS THE KEY)

4) Center the button based on the old size

You should have a function that ends up looking something like this:

- (IBAction)onTouchDown:(id)sender
{
    CGRect oldBtnRect = testButton.frame;
    testButton.titleLabel.font = [UIFont systemFontOfSize:36];
    [testButton sizeToFit];
    testButton.frame = CGRectMake(testButton.frame.origin.x - ((testButton.frame.size.width - oldBtnRect.size.width)/2), testButton.frame.origin.y - ((testButton.frame.size.height - oldBtnRect.size.height)/2), testButton.frame.size.width, testButton.frame.size.height);
}

Note, the font size is 36.

In your touch up function, it'll look something like this:

- (IBAction)onTouchUp:(id)sender
{
    CGRect oldBtnRect = testButton.frame;
    testButton.titleLabel.font = [UIFont systemFontOfSize:15];
    [testButton sizeToFit];
    testButton.frame = CGRectMake(testButton.frame.origin.x - ((testButton.frame.size.width - oldBtnRect.size.width)/2), testButton.frame.origin.y - ((testButton.frame.size.height - oldBtnRect.size.height)/2), testButton.frame.size.width, testButton.frame.size.height);
}

The font size should be whatever your default font is. In this case, I made it 15.

This should get you a button that resizes from the center instead of just resizing.

Now, the code isn't intended to be perfect. It's just a general IDEA of what you're doing here. I think this is a great candidate for some code reuse by combining these into one function and passing in what size you want the text to be. I just didn't feel like doing it myself ;)