UIButton title and image alignment query - iphone

Question

I have a UIButton and I am trying to set a title and an image on it.
I would like to align the title for a UIButton to the left side and place an image aligned to the right. I am trying to get the look and feel of the button in Timer in Clocks app (the one which says "When Timer Ends").
I fiddled with contentHorizontalAlignment, contentEdgeInsets, titleEdgeInsets and imageEdgeInsets to achieve my goal, but to no avail. The documentation is also quite sparse for the same.
How can I achieve the same?
Also related questions, Timer in Clocks app has two set of Text, one aligned to the left and other aligned right with the image? How can that be done in a UIButton? ( I do not need that functionality though at the moment).

Answer 1

Here is the code I use for that:
//Right-align the button image
CGSize size = [[myButton titleForState:UIControlStateNormal] sizeWithFont:myButton.titleLabel.font];
[myButton setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -size.width)];
[myButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, myButton.imageView.image.size.width + 5)];

Answer 2

Change the imageEdgeInsets property on the UIButton and then just use setImage:forState:

Answer 3

The following code works:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonRect;
[button setTitle:#"A title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

Answer 4

Remember that UIButton inherits from UIView, and so you can add subviews to it just like any other view. In your situation, you would create a button, then add a UILabel on the left side and a UIImage on the right:
// Create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
// Now load the image and create the image view
UIImage *image = [UIImage imageNamed:#"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];
// Create the label and set its text
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:#"Your title"];
// Put it all together
[button addSubview:label];
[button addSubview:imageView];

Answer 5

You can also override the titleRectForContentRect: and imageRectForContentRect: methods of the UIButton in order position your text and image anywhere you want.

Answer 6

In Swift for anyone that cares (with a 10pt spacing):
let size = (self.titleForState(UIControlState.Normal)! as NSString).sizeWithAttributes([NSFontAttributeName:self.titleLabel!.font])
let offset = (size.width + 10)
self.imageEdgeInsets = UIEdgeInsetsMake(0, offset, 0, -offset)
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, self.imageView!.frame.size.width + 10)

Answer 7

For using on iOS 9, i tried many answers in this thread but none of them suitable for me. I found answer for myself as follow:
class MyButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
if self.imageView?.image != nil {
// Move icon to right side
self.imageEdgeInsets = UIEdgeInsets(
top: 0,
left: self.bounds.size.width - self.imageView!.image!.size.width,
bottom: 0,
right: 0)
// Move title to left side
self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)
}
}
}
SWIFT 3:
class MyButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left
if self.imageView?.image != nil {
// Move icon to right side
self.imageEdgeInsets = UIEdgeInsets(
top: 0,
left: self.bounds.size.width - self.imageView!.image!.size.width,
bottom: 0,
right: 0)
// Move title to left side
self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)
}
}
}
I hope it will help somebody in the case as me!

Answer 8

Here's a subclass of UIButton in Swift that aligns the image on the left and the text in the centre. Set imageLeftInset to your desired value.
class LeftImageAlignedButton : UIButton {
var imageLeftInset : CGFloat = 10.0
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = .Left
if let font = titleLabel?.font {
let textWidth = ((titleForState(state) ?? "") as NSString).sizeWithAttributes([NSFontAttributeName:font]).width
let imageWidth = imageForState(state)?.size.width ?? 0.0
imageEdgeInsets = UIEdgeInsets(top: 0, left: imageLeftInset, bottom: 0, right: 0)
titleEdgeInsets = UIEdgeInsets(top: 0, left: bounds.width/2 - textWidth/2.0 - imageWidth, bottom: 0, right: 0)
}
}
}

Answer 9

Create a UIButton subclass and override its layoutSubviews method to align your text & image programmatically. Or use something like https://github.com/stevestreza/BlockKit/blob/master/Source/UIView-BKAdditions.h so you can implement layoutSubviews using a block.