Align button image to right edge of UIButton

Question

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?

Answer 1

Semantic: Force Right-to-Left on View works for me

Answer 2

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

Answer 3

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.

• Set Image right side in UIView and disable user interaction, so user action/tap will be passed to button.
• Add button with size same as UIView, in UIView, with transparent background color and covering Image.
• Set content offset for button 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.

Answer 4

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

Answer 5

Try below code:

btn.contentHorizontalAlignment = .right

Answer 6

Clean way to do this in Swift

button.semanticContentAttribute = .forceRightToLeft

Hope this helps

Answer 7

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
    }
}

Answer 8

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

Answer 9

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)

Answer 10

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

Answer 11

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.

Answer 12

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.

Answer 13

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);

Answer 14

SWIFT 5

button.imageEdgeInsets = UIEdgeInsets(top: 0, left: (bounds.width - 16), bottom: 0, right: 0)

Answer 15

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()

Answer 16

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
}