There are plenty of threads about aligning a button image according to the title text, but I can't find anything about just aligning the image to the right side of the button.
This has no effect:
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50);
How can one right-align the image for a button? Can it be done in the Storyboard?
Semantic: Force Right-to-Left on View works for me 
I found a tricky way
Update the constrains for the UIImageView of the Button
try this
button.imageView?.trailingAnchor.constraint(equalTo: button.trailingAnchor, constant: -8.0).isActive = true
button.imageView?.centerYAnchor.constraint(equalTo: button.centerYAnchor, constant: 0.0).isActive = true
but don't forget to add this to make the constrains effective
button.translatesAutoresizingMaskIntoConstraints = false
button.imageView?.translatesAutoresizingMaskIntoConstraints = false
There are several different options to do it.
Use semanticContentAttribute
button.semanticContentAttribute = .forceRightToLeft
You can set semantic attribute from interface (storyboard) layout also.
or
Use UIView containing UIButton and UIImage, as shown in this snapshot.
This will make easy to handle button action, properties and customise image position & size according to your requirement. Try this.
Storyboard:
Attributes Tab > Ensure your Content Edge tab is selected for 'image':
Then you alter the 'Left' property not right, which is what your doing programatically. So in other words, your padding it n from the left
UIEdgeInsetsMake = TOP | LEFT | BOTTOM | RIGHT
Programmatically :
button.imageEdgeInsets = UIEdgeInsetsMake(0, 100, 0, 0);
Note: you might have to also alter your titles inset, depending on where it is in reference to your image
Try below code:
btn.contentHorizontalAlignment = .right
Clean way to do this in Swift
button.semanticContentAttribute = .forceRightToLeft
Hope this helps
Simple way
Using extension to set image on the right side with custom offset
extension UIButton {
func addRightImage(image: UIImage, offset: CGFloat) {
self.setImage(image, for: .normal)
self.imageView?.translatesAutoresizingMaskIntoConstraints = false
self.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
self.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -offset).isActive = true
}
}
make it as default semantic i.e unspecified or force left to right
and in button.imageEdgeInsets set it as
UIEdgeInsets(top: 0, left: self.view.frame.size.width - (the image size + the alignment space ) , bottom: 0, right: 0)
this will make ensure that no matter what the view size is ,it will always align the image from right side of the button
It's working for me:
self.acceptButton.setImage(UIImage(named: image), for: UIControl.State.normal)
self.acceptButton.semanticContentAttribute = .forceRightToLeft
self.acceptButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 9, bottom: 0, right: 0)
Using UIButton Extension for image to right side
extension UIButton {
func imageToRight() {
transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
}
}
How to Use
yourButton.imageToRight()
In iOS 15.0 you can simply use the new configuration API to specify the image placement, in this case: trailing. If you need to support earlier versions, another way of doing this could be by appending an NSTextAttachment (available since iOS 7.0) to an NSMutableAttributedString and use that as the button's title.
It is a bad idea to use the semantic content attribute for this, as suggested in other responses, and force it to right-to-left. That API is not meant for that use-case and can have unintended consequences. In this case, it breaks accessibility, especially navigation using VoiceOver. The reason is that if you are swiping to the right to get to the next element in the screen, and that element is forced to be right-to-left, VoiceOver will also reverse and if you swipe right again it will go to the previous element instead of the next one. If you swipe right again, you are back to the right-to-left element. And so on, and so on. The user gets stuck in a focus trap and it can be very confusing.
So the code could look something like this:
if #available(iOS 15.0, *) {
var configuration = UIButton.Configuration.plain()
let image = UIImage(systemName: "applelogo")
configuration.image = image
configuration.imagePadding = 8.0
configuration.imagePlacement = .trailing
button.configuration = configuration
button.setTitle("Apple", for: .normal)
} else {
let buttonTitle = "Apple"
let titleAttributedString = NSMutableAttributedString(string: buttonTitle + " ")
let textAttachment = NSTextAttachment(image: UIImage(systemName: "applelogo")!)
let textAttachmentAttributedString = NSAttributedString(attachment: textAttachment)
titleAttributedString.append(textAttachmentAttributedString)
button.setAttributedTitle(titleAttributedString, for: .normal)
// When using NSTextAttachment, configure an accessibility label manually either
// replacing it for something meaningful or removing the attachment from it
// (whatever makes sense), otherwise, VoiceOver will announce the name of the
// SF symbol or "Atachement.png, File" when using an image
button.accessibilityLabel = buttonTitle
}
Just like this:
btn.imageView?.translatesAutoresizingMaskIntoConstraints = false
btn.imageView?.centerYAnchor.constraint(equalTo: btn.centerYAnchor, constant: 0.0).isActive = true
btn.imageView?.trailingAnchor.constraint(equalTo: btn.trailingAnchor, constant: 0.0).isActive = true
btn.imageView?.contentMode = .right
To align an image to right, the 'Semantic' option seems the best, 'Force Right-to-Left'.
Furthermore, I want to add one more thing. You can keep the shape of the button's image by this option.
iOS 15: imageEdgeInsets and titleEdgeInsets are deprecated, and also ignored, we have to adjust by our own.
For example, I want to set the title at the beginning of the button and image at the end.
extension UIButton {
func adjust() {
guard let imageView = self.imageView else { return }
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0).isActive = true
guard let titleLabel = self.titleLabel else { return }
titleLabel.translatesAutoresizingMaskIntoConstraints = false
titleLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0).isActive = true
titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
}
}
You can also put the code in layoutSubviews if subclass UIButton.
A button has 2 subviews (this is not true, It has more but whatever, we can consider only 2): the first one is the image; after the image there is a title label. So the image is on the left and the title on the right.
First at all I'm going to show what I'm trying to get: a button with a text on the left side and an image on the right side. I'm trying to switch the button's subviews positions.
The following image is what I'd like to obtain:
This is how I reach the goal:
1 - Add the title and image to the button:
self.myButton.setTitle("My Button Title", for: .normal)
self.myButton.setImage(UIImage(systemName: "chevron.right"), for: .normal)
2 - Set horizontal content aligment to left:
self.myButton.contentHorizontalAlignment = .left
3 - Set semantic content attribute from right to left: This means that the leading is going to be the right side of the button and the trailing is going to be the left side of the button. So the image (that's the first view of the button) is going to be at the right side of the button.
self.myButton.semanticContentAttribute = .forceRightToLeft
4 - Add the Button's image constraints in order to repositionate it to the right side (In this case near the leading side, remember that we switch sides when setting the semantic content attribute from right to left):
self.myButton.imageView?.translatesAutoresizingMaskIntoConstraints = false
self.myButton.imageView?.centerYAnchor.constraint(equalTo: self.myButton.centerYAnchor, constant: 0).isActive = true
self.myButton.imageView?.trailingAnchor.constraint(equalTo: self.myButton.leadingAnchor, constant: 24).isActive = true
That's all folks!
This worked for me by setting:
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
Then for the inner image I set the right inset to 0.
button.imageEdgeInsets = UIEdgeInsetsMake(10.0, 10.0, 10.0, 0);
SWIFT 5
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: (bounds.width - 16), bottom: 0, right: 0)
With new UIButton.Configuration you can use custom background view
extension UIButton {
class BackgroundImageView: UIView {
private let imageView = UIImageView()
private let imagePlacement: NSDirectionalRectEdge
init(icon: UIImage? = nil, imagePlacement iconPlacement: NSDirectionalRectEdge = .leading) {
imagePlacement = iconPlacement
super.init(frame: .zero)
imageView.image = icon
addSubview(imageView)
layout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func layout() {
imageView.snp.remakeConstraints { make in
make.size.equalTo(24)
make.centerY.equalToSuperview()
if imagePlacement == .trailing {
make.trailing.equalToSuperview().offset(-CGFloat.spacing6)
} else {
make.leading.equalToSuperview().offset(CGFloat.spacing6)
}
}
}
}
}
In this example I am using SnapKit but you can go for regular auto layout constraints.
usage:
extension UIButton.Configuration {
static func config(
title: String? = nil,
icon: UIImage? = nil,
baseBackgroundColor: UIColor,
baseForegroundColor: UIColor,
pinIconToEdge: Bool = true
) -> Self {
var config = UIButton.Configuration.filled()
config.title = title
if pinIconToEdge {
config.background.customView = UIButton.BackgroundImageView(
icon: icon?.withRenderingMode(.alwaysTemplate)
)
} else {
config.image = icon
config.imagePlacement = .trailing
config.imagePadding = .spacing8
}
config.background.customView?.tintColor = .red
config.cornerStyle = .capsule
config.baseForegroundColor = baseForegroundColor
return config
}
}
