UIButton - Lead Text with Icon - ios

Question

I am trying to figure out a solution to creating a UIButton, with centred text which has a UIImage (icon) leading the text, so its sites just in front of the button title.
I, however am struggling to think up a way of doing this as you cannot retrieve the position of the text. Any thoughts? This must be a fairly common thing to do.

Answer 1

Use this code
UIButton *scoreButton=[UIButton buttonWithType:UIButtonTypeCustom];
scoreButton.frame=CGRectMake(0,0,100, 100);
//scoreButton.contentEdgeInsets=UIEdgeInsetsMake(0, 0, 0, 2);
scoreButton.contentHorizontalAlignment=UIControlContentHorizontalAlignmentLeft;
scoreButton.titleLabel.font=[UIFont boldSystemFontOfSize:13];
[scoreButton setTitleColor:[UIColor colorWithRed:0.9411 green:0.5647 blue:.2916 alpha:YES] forState:UIControlStateNormal];
[scoreButton addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
UIImageView *scoreButtonImageView=[[UIImageView alloc]init];
scoreButtonImageView.frame=CGRectMake(0,35,30 ,30);
scoreButtonImageView.image=[UIImage imageNamed:#"leaderboard_score_button.png"];
[scoreButton addSubview:scoreButtonImageView];
Use UIEdgeInsetsMake to set your text start and end points.
In this way your image will be on the extreme left hand side and you can write text after the image

Answer 2

Create a UIView subclass that has a UIImageView and UILabel. Position the label to the right of the image view within this view. Add this view to your button and position it horizontally and vertically centred.

Answer 3

I think , it will help you. Always careful with setImage: and setBackgroundImage:
UIButton *yourBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setBackgroundImage:bgImage forState:UIControlStateNormal];
[yourBtn setBackgroundImage:bgImage forState:UIControlStateHighlighted];
[yourBtn setTitle:titleString forState:UIControlStateNormal];

Answer 4

Use following method :
UIImageView *yourPlusSign = [UIImageView alloc]initWithImage:[UIImage imageNamed:#"yourPlusSignImageTitle"];
yourPlusSign.frame = CGRectMake(x, y, width, height);//choose values that fit properly inside the frame of your baseButton
//or grab the width and height of yourBaseButton and change accordingly
yourPlusButton.contentMode=UIViewContentModeScaleAspectFill;//or whichever mode works best for you
[yourBaseButton addSubview:yourPlusSign];
Here is Ref : Add an image inside UIButton as an accesory

Answer 5

you can also subclass UIButton it is a better way to do it.

Answer 6

If you use font images like me you can do it with a NSParagraphStyle
NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
[style setAlignment:NSTextAlignmentCenter];
UIFont *font1 = [UIFont fontWithName:#"Avenir-Roman" size:14.0];
UIFont *font2 = [UIFont fontWithName:#"Icon-Moon" size:12.0];
NSDictionary *fontSyle1 = #{NSUnderlineStyleAttributeName:#(NSUnderlineStyleNone),
NSFontAttributeName:font1,
NSParagraphStyleAttributeName:style};
NSDictionary *fontStyle2 = #{NSUnderlineStyleAttributeName:#(NSUnderlineStyleNone),
NSFontAttributeName:font2,
NSParagraphStyleAttributeName:style};
NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] init];
[attString appendAttributedString:[[NSAttributedString alloc] initWithString:[IcoMoon iconString:k12_ADD_NOTE] attributes:fontStyle2]];
[attString appendAttributedString:[[NSAttributedString alloc] initWithString:#" Add Note" attributes:fontStyle1]];
[_addNewBtn setAttributedTitle:attString forState:UIControlStateNormal];
[[_addNewBtn titleLabel] setNumberOfLines:0];
_addNewBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
_addNewBtn.layer.borderWidth = 1;
[_addNewBtn setBackgroundColor:[UIColor whiteColor]];
[_addNewBtn setTintColor:[UIColor darkGrayColor]];
This where you can get icon fonts https://icomoon.io/
This part is part of a way to convert char's to strings
[IcoMoon iconString:k12_ADD_NOTE]
you can find out more by going to https://github.com/sebastienwindal/IOSIcoMoon