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

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 3

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 4

Clean way to do this in Swift

button.semanticContentAttribute = .forceRightToLeft

Hope this helps

Answer 5

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 6

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

Try below code:

btn.contentHorizontalAlignment = .right

Answer 9

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 10

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

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