UIButton with title under the imageview

Question

I want to creat an UIButton programmatically with the title under the imageView.

Size of the button : 170 * 120 Size of the imge : 50 * 50 Size of the title : depend of the text.

I know I'have to use but I don't know how :

[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, 0.f, 0.f)];
[_button setImageEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, 0.f, 0.f)];

I think I should calculate the size of the title and then Use the EdgeInsets.

Thank you.

Driftage

Answer 1

The ultimate and stable solution is to use frame, not EdgeInset solution like this:

@interface UIButton (UIButtonExt)
(void)centerImageAndTitleEx;
@end

@implementation UIButton (UIButtonExt)

(void)centerImageAndTitleEx
{
CGRect frame = self.imageView.frame;

frame = CGRectMake(truncf((self.bounds.size.width - frame.size.width) / 2), 10.0f, frame.size.width, frame.size.height);

self.imageView.frame = frame;

frame = self.titleLabel.frame;

frame = CGRectMake(truncf((self.bounds.size.width - frame.size.width) / 2), self.bounds.size.height - frame.size.height - 5.0, frame.size.width, frame.size.height);

self.titleLabel.frame = frame;
}

@end

Hindquarter

It seems that if the title text is too long, it trunc it in the middle even if the UIButton frame has space to display it. Every time I tried to expend the title frame width, the title come back to the image itself. Any idea? – Nurserymaid

Answer 2

Hope this can help you.

@interface UIButton (UIButtonExt)  

- (void)centerImageAndTitle:(float)space;  
- (void)centerImageAndTitle;  

@end  

@implementation UIButton (UIButtonExt)  

- (void)centerImageAndTitle:(float)spacing  
{      
    // get the size of the elements here for readability  
    CGSize imageSize = self.imageView.frame.size;  
    CGSize titleSize = self.titleLabel.frame.size;  

    // get the height they will take up as a unit  
    CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);  

    // raise the image and push it right to center it  
    self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width);  

    // lower the text and push it left to center it  
    self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (totalHeight - titleSize.height),0.0);      
}  

- (void)centerImageAndTitle  
{  
    const int DEFAULT_SPACING = 6.0f;  
    [self centerImageAndTitle:DEFAULT_SPACING];  
}  

@end   

Passe

That's a very good answer! But I had some problems and changing how you define titleSize solved it: CGSize titleSize = [self.titleLabel.text sizeWithFont:self.titleLabel.font constrainedToSize:CGSizeMake(self.frame.size.width, MAXFLOAT) lineBreakMode:self.titleLabel.lineBreakMode]; – Usually

@NatanR., as sizeWithFont is deprecated now, one can use this to support iOS7+ CGSize titleSize = [self.titleLabel.text sizeWithAttributes: @{NSFontAttributeName:self.titleLabel.font}]; by @chadkouse – Hazzard

is there a way to do this in storyboard ? – Blowgun