Setting different Fonts for the different states of UIButton

Question

How can one set different fonts for the different UIbutton states? Thanks for your help on this one.

Answer 1

This is a very cool question, which prompted me to make a subclass of UIButton that allows the setting of state fonts!

I also wrote some example code that shows how to set the font. If you are using Interface Builder, then set the class of the button to ConfigurableButton. In code, the button must also be declared as ConfigurableButton, since I've added new properties, and a setFont:forState: method.

Please leave a comment for any improvements that can be made!

View Controller implementation

#import "ViewController.h"
#import "ConfigurableButton.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet ConfigurableButton *toggleButton;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //Set the fonts for button's states
    _toggleButton.normalFont        = [UIFont fontWithName:@"BradleyHandITCTT-Bold" size:14];
    _toggleButton.highlightedFont   = [UIFont fontWithName:@"Chalkduster" size:14];
    _toggleButton.selectedFont      = [UIFont fontWithName:@"Zapfino" size:14];
    _toggleButton.disabledFont      = [UIFont fontWithName:@"Arial" size:14];
}

@end

ConfigurableButton.h

#import <UIKit/UIKit.h>

IB_DESIGNABLE

/**
 * A button that allows fonts to be assigned to each of the button's states.
 *
 * A state font can be specified using setFont:forState, or through one of the
 * four state Font properties.
 *
 * If a font is not specified for a given state, then
 * the System font will be displayed with a font size of 15.
 */
@interface ConfigurableButton : UIButton

@property (strong, nonatomic) UIFont *normalFont;
@property (strong, nonatomic) UIFont *highlightedFont;
@property (strong, nonatomic) UIFont *selectedFont;
@property (strong, nonatomic) UIFont *disabledFont;

/**
 * Set a font for a button state.
 *
 * @param font  the font
 * @param state a control state -- can be
 *      UIControlStateNormal
 *      UIControlStateHighlighted
 *      UIControlStateDisabled
 *      UIControlStateSelected
 */
- (void) setFont:(UIFont *)font forState:(NSUInteger)state;

@end

ConfigurableButton.m

#import "ConfigurableButton.h"

@implementation ConfigurableButton

//Sets one of the font properties, depending on which state was passed
- (void) setFont:(UIFont *)font forState:(NSUInteger)state
{
    switch (state) {
        case UIControlStateNormal:
        {
            self.normalFont = font;
            break;
        }

        case UIControlStateHighlighted:
        {
            self.highlightedFont = font;
            break;
        }

        case UIControlStateDisabled:
        {
            self.disabledFont = font;
            break;
        }

        case UIControlStateSelected:
        {
            self.selectedFont = font;
            break;
        }

        default:
        {
            self.normalFont = font;
            break;
        }
    }
}

/**
 * Overrides layoutSubviews in UIView, to set the font for the button's state,
 * before calling [super layoutSubviews].
 */
- (void) layoutSubviews
{
    NSUInteger state = self.state;

    switch (state) {
        case UIControlStateNormal:
        {
            [self setTitleFont:_normalFont];
            break;
        }

        case UIControlStateHighlighted:
        {
            [self setTitleFont:_highlightedFont];
            break;
        }

        case UIControlStateDisabled:
        {
            [self setTitleFont:_disabledFont];
            break;
        }

        case UIControlStateSelected:
        {
            [self setTitleFont:_selectedFont];
            break;
        }

        default:
        {
            [self setTitleFont:_normalFont];
            break;
        }

    }

    [super layoutSubviews];
}

/**
 * Private
 *
 * Convenience method that falls back to the System font,
 * if no font is configured.
 */
- (void) setTitleFont:(UIFont *)font
{
    if (!font) {
        font = [UIFont systemFontOfSize:15];
    }

    self.titleLabel.font = font;
}

@end

Answer 2

The easiest solution is to set an attributed title for each UIControl state:

var attributes = [String : AnyObject]()
attributes[NSForegroundColorAttributeName] = UIColor.redColor()
attributes[NSFontAttributeName] = UIFont.systemFontOfSize(15)

let normal = NSAttributedString(string: "normal", attributes: attributes)
button.setAttributedTitle(normal, forState: .Normal)

attributes[NSForegroundColorAttributeName] = UIColor.redColor()
attributes[NSFontAttributeName] = UIFont.boldSystemFontOfSize(15)

let selected = NSAttributedString(string: "selected", attributes: attributes)
button.setAttributedTitle(selected, forState: .Selected)