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

Swift 5 version with custom font:

todayButton.setAttributedTitle(NSAttributedString(string: "today", attributes: [.font: UIFont(name: "Font-Name", size: 16)!]), for: .normal)

todayButton.setAttributedTitle(NSAttributedString(string: "today", attributes: [.font: UIFont(name: "Font-Name", size: 24!]), for: .selected)

Don't forget to set button type Custom in Interface Builder if you use it

Answer 2

Usually, I code like this:

itemButton.setAttributedTitle(NSAttributedString(string: "title", attributes: [NSAttributedString.Key.font : UIFont.font(ofSize: 16.0, weight: .medium), NSAttributedString.Key.foregroundColor: UIColor.white.withAlphaComponent(0.5)]), for: .normal)
itemButton.setAttributedTitle(NSAttributedString(string: "title", attributes: [NSAttributedString.Key.font : UIFont.font(ofSize: 20.0, weight: .medium), NSAttributedString.Key.foregroundColor: UIColor.white]), for: .selected)

Answer 3

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)

Answer 4

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 5

Just create your custom button. Override layout subviews. Set your required fonts.

// Interface
@interface EezyButton : UIButton

@end
//Implementation
#import "EezyButton.h"

@implementation EezyButton

- (void)layoutSubviews{
    if (self.state == UIControlStateNormal) {
        [self.titleLabel setFont:[UIFont systemFontOfSize:12]];
    }
    else if (self.state == UIControlStateHighlighted){
        [self.titleLabel setFont:[UIFont systemFontOfSize:25]];

    }
    else if (self.state == UIControlStateDisabled){
        [self.titleLabel setFont:[UIFont systemFontOfSize:12]];
    }
    else if (self.state == UIControlStateSelected){
        [self.titleLabel setFont:[UIFont systemFontOfSize:28]];
    }
    [super layoutSubviews];
}

@end

Answer 6

Here is my working code block. IB_DESIGNABLE is just a tiny improvement to make the results visualizable on the Interface Builder :-)

@interface MyButton : UIButton
@end

IB_DESIGNABLE @implementation MyButton
// Here you can override the look & feel for each state
// Actually not only fontSize, but any writable properties ^_^
- (void)setEnabled:(BOOL)enabled {
    [super setEnabled:enabled];
    self.titleLabel.font = enabled ? [UIFont systemFontOfSize:14] : [UIFont systemFontOfSize:10];
}

- (void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    self.titleLabel.font = highlighted ? [UIFont systemFontOfSize:14] : [UIFont systemFontOfSize:12];
}

- (void)setSelected:(BOOL)selected {
    [super setSelected:selected];
    self.titleLabel.font = selected ? [UIFont boldSystemFontOfSize:14] : [UIFont systemFontOfSize:12];
}

@end

You can see designable MyButtons font reflected in the interface builder like this

Answer 7

You can set font on Design View on for more details:

You can set all this in Interface Builder itself. Unless you have very string reasons to do it in code. Here's how to do it in IB -

Open the right side bar & then click on "State Config", there you see the various states of the button, Default, Highlighted, Selected & Disabled. Now you can set different images for each state, different font type & font colors for each state. Hopr this helps...

Thanks..!