Aligning Image and Title in UiButton

Question

I wish to align title and image in UiButton in such a manner that the title appears on the left and the image to the extreme right. Please note that the button is stretched so as to fill the screen horizontally.

The button layout should look something like this:- [title .. ]

The title should have some left padding. The image should have some right padding.

CGFloat width = self.frame.size.width;
CGFloat imageWidth = [button currentImage].size.width;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; 
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 10, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, width - imageWidth - 10, 0, 0)];

However, though the title is left align, there is a lot of space on it's left. The image does not show up at all!

Please add the code you use to add the image to the UIButton — Stavash, Jul 26 '13 at 05:54
What about `[UIView] > [UILabel + UIImageView] + UITapGestureRecognizer` ? — TheTiger, Jul 26 '13 at 06:19
Good point. But I did not want to go via that route. I think setImageEdgeInsets and setLabelEdgeInsets should be enough to achieve what I want. — Ankit Agarwal, Jul 26 '13 at 06:47
have a look at this link using UIEdgeInsets too you can align them. http://doing-it-wrong.mikeweller.com/2012/07/youre-doing-it-wrong-2-sizing-labels.html — Leena, Jul 26 '13 at 06:50
I added an answer [here: http://stackoverflow.com/questions/2765024/how-to-set-the-title-as-left-alignment-in-the-uibutton] that explains how to so the image and text alignment with Interface Builder. — n8tr, Mar 29 '14 at 00:16

score 5 · Answer 1 · edited Jul 26 '13 at 15:36

Following Code will work

UIButton *sectionheader=[[UIButton alloc]initWithFrame:CGRectMake(0,0,320,44)];
[sectionheader setImageEdgeInsets:UIEdgeInsetsMake(0,6,0,0)];
sectionheader.userInteractionEnabled=NO;
[sectionheader setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];

// Now Create Label and addsubview to button

UILabel *lblkey=[[UILabel alloc] initWithFrame:CGRectMake(0,0,sectionheader.frame.size.width-10,sectionheader.frame.size.height)];

lblkey.accessibilityValue=@"Value";
lblkey.font=[UIFont fontWithName:themefont size:20];
lblkey.text=[creteria uppercaseString];
lblkey.backgroundColor=[UIColor clearColor];
lblkey.shadowColor = [UIColor blackColor];
lblkey.shadowOffset = CGSizeMake(0, 2);
lblkey.textAlignment=NSTextAlignmentRight;
lblkey.textColor=[UIColor whiteColor];
[sectionheader addSubview:lblkey];

And suppoce you value is going to change always and you want to make it perfect than Make UIButton class and than add above code in that category class than just call following method to change value of that label

+(void)settitle:(NSString *)value:(UIButton *)selfbutton
{
     for (UILabel *valuelabel in selfbutton.subviews)
     {
         if ([valuelabel.accessibilityValue isEqualToString:@"Value"])
         {
             valuelabel.text=value;
         }
     }   
}

privew

score 3 · Answer 2 · answered Jul 26 '13 at 06:15

I will go with alternative
What you can do is add three control in one view. lets say ParentView:

1) yourButton 
2) yourlable // don't use button title instead use this lable.
3) imageView

now make the ParentView autosize like below:

enter image description here

so as yourButton will stretched horizontally it will automatically resize ParentView. From here on you just want to take care about position.

set yourlable to extreme left in parentView after yourButton and set autosize property to:

enter image description here so it will always remain to extreme left of ParentView

And set imageView position to extreme right in parentView and set autosize property to:
so it will always remain to extreme right of ParentView
Hope it will help.

score 0 · Answer 3 · answered Jul 26 '13 at 06:17

0

if you have added button in xib and you want to set title and image then you can do it from Attribute inspector. in attributeinspector there is an property named Edge. By default it has set content. but there are other two options named as Title and Image. and exactly below Inset Property is there by which you can set title and image as you want. if you select title then you can set title (move left or right as u want) likewise for image also

answered Jul 26 '13 at 06:17

Mital

241
1
5

More detailed answer with images here: http://stackoverflow.com/questions/11717219/uibutton-image-text-ios – Andrei Konstantinov Apr 23 '15 at 09:56

Aligning Image and Title in UiButton

3 Answers3