UIButton: How to set image and text using imageEdgeInsets and titleEdgeInsets?

Question

I had an application in which I am using a UIButton with a title and UIImage. Their alignment seems to be first title then after that the UIImage.

I had tried this:

[dropdownbutton setImage: [UIImage imageNamed:@"down_sml_arrow.png"] 
                                     forState:UIControlStateNormal];
CGFloat spacing = 10; // the amount of spacing to appear between image and title
dropdownbutton.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
dropdownbutton.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
[dropdownbutton setTitle:@"Your text" forState:UIControlStateNormal];

but here the UIImage is coming before the title. Can anybody point me in where I am going wrong?

http://stackoverflow.com/questions/4564621/aligning-text-and-image-on-uibutton-with-imageedgeinsets-and-titleedgeinsets and http://stackoverflow.com/questions/2451223/uibutton-how-to-center-an-image-and-a-text-using-imageedgeinsets-and-titleedgei — iPatel, Jun 20 '13 at 11:35
@iPatel its different.pls read the question before jumping in to conclusion.. — hacker, Jun 20 '13 at 11:42
I just gave u some link which might be helpful in your case nothing anymore oaky :) — iPatel, Jun 20 '13 at 11:45

score 1 · Answer 1 · answered Jun 20 '13 at 11:58

Alternate

UIImageView *imageView1=[[UIImageView alloc]init];
UIButton *dropdownbutton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
dropdownbutton.frame=CGRectMake(50, 50, 120, 50);
imageView1.image=[UIImage imageNamed:@"arrows.png"];
imageView1.frame=CGRectMake(85, 12, 25, 25);
dropdownbutton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[dropdownbutton addSubview:imageView1];
CGFloat spacing = 10; // the amount of spacing to appear between image and title
dropdownbutton.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
[dropdownbutton setTitle:@"Your text" forState:UIControlStateNormal];
[self.view addSubview:dropdownbutton];

score 0 · Answer 2 · answered Jun 20 '13 at 11:54

Sometimes creating a subclass of IUButton makes things easier, because the aligntments of the image and text are dependant of each other. Create a subclass of UIButton:

@interface DropDownButton : UIButton

and override layoutSubviews method in the implementation (.m) file:

@implementation DropDownButton

- (void)layoutSubviews {

[super layoutSubviews];

//Use the lines below if you have a specific image for the button
//float imageWidth = 67; 
//float imageHeight = 25;

UIImageView *imageView = [self imageView];
UILabel *label = [self titleLabel];

CGRect imageFrame = imageView.frame;
CGRect labelFrame = label.frame;

labelFrame.origin.x = (self.frame.size.width * 1) / 3;
labelFrame.size.width = self.frame.size.width;


imageFrame.origin.x = 10;

[label setShadowOffset:CGSizeMake(0, -0.5)];
[label setFont:[UIFont fontWithName:@"Helvetica" size:22.0]];
[label setTextAlignment:UITextAlignmentLeft];

imageView.frame = imageFrame;
label.frame = labelFrame;

}

If you insist on using edge insets try to use

dropdownbutton.contentMode = UIViewContentModeLeft;

before giving the insets; it might help.

UIButton: How to set image and text using imageEdgeInsets and titleEdgeInsets?

2 Answers2