Question

I have a UIImage resizing perfectly using resizableImageWithCapInsets to make a badge containing a text label. I’m interested to know is there a way to do this in a storyboard, or in a view created with a nib?

There’s no technical reason to require this. Most of the UI is done in the nib and I would like to keep as much there as possible rather than loading the image, making it resizable, finding the text dimensions, resizing the UIImageView and then applying the label in code.

I can’t make this project iOS6-only yet (deployment target ios5+) so using layout constraints isn’t an option.

Answer 1

Yes, there is.

The trick is to override -initWithCoder: and the image setters (setImage:forState: and setBackgroundImage:forState:) to create the resizable versions of the same image you set in the xib. Obviously, they still won’t resize properly in xib itself, but it will be resized properly after initialization. Don’t forget to set NAResizableButton as the custom class of UIButton.

Sure beats doing it programmatically. 🙂

Interface:

#import <UIKit/UIKit.h>

@interface NAResizableButton : UIButton

@end

Implementation:

#import "NAResizableButton.h"

@implementation NAResizableButton

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self)
    {
        [self setImage:[self imageForState:UIControlStateNormal] forState:UIControlStateNormal];
        [self setImage:[self imageForState:UIControlStateHighlighted] forState:UIControlStateHighlighted];
        [self setImage:[self imageForState:UIControlStateSelected] forState:UIControlStateSelected];
        [self setImage:[self imageForState:UIControlStateDisabled] forState:UIControlStateDisabled];

        [self setBackgroundImage:[self backgroundImageForState:UIControlStateNormal] forState:UIControlStateNormal];
        [self setBackgroundImage:[self backgroundImageForState:UIControlStateHighlighted] forState:UIControlStateHighlighted];
        [self setBackgroundImage:[self backgroundImageForState:UIControlStateSelected] forState:UIControlStateSelected];
        [self setBackgroundImage:[self backgroundImageForState:UIControlStateDisabled] forState:UIControlStateDisabled];
    }
    return self;
}

- (void)setImage:(UIImage *)inImage forState:(UIControlState)inState
{
    UIEdgeInsets edgeInsets = UIEdgeInsetsMake(ceilf(inImage.size.height / 2), ceilf(inImage.size.width / 2), ceilf(inImage.size.height / 2), ceilf(inImage.size.width / 2));
    if ([inImage respondsToSelector:@selector(resizableImageWithCapInsets:)])
    {
        // iOS 5
        inImage = [inImage resizableImageWithCapInsets:edgeInsets];
    }
    else
        inImage = [inImage stretchableImageWithLeftCapWidth:edgeInsets.left topCapHeight:edgeInsets.top];

    [super setImage:inImage forState:inState];
}

- (void)setBackgroundImage:(UIImage *)inImage forState:(UIControlState)inState
{
    UIEdgeInsets edgeInsets = UIEdgeInsetsMake(ceilf(inImage.size.height / 2), ceilf(inImage.size.width / 2), ceilf(inImage.size.height / 2), ceilf(inImage.size.width / 2));
    if ([inImage respondsToSelector:@selector(resizableImageWithCapInsets:)])
    {
        // iOS 5
        inImage = [inImage resizableImageWithCapInsets:edgeInsets];
    }
    else
        inImage = [inImage stretchableImageWithLeftCapWidth:edgeInsets.left topCapHeight:edgeInsets.top];

    [super setBackgroundImage:inImage forState:inState];
}

@end