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?

Solution 1

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

Solution 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

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

Solution 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

Solution 5

Try below code:

btn.contentHorizontalAlignment = .right

View more solutions

Comments

[Fonix]

possible duplicate of iPhone UIButton - image position

[Fonix]

if you are targeting iOS 9 you can do it like this

[soleil]

It's not a duplicate. I don't care about the title text. I just want the image to be right aligned to whatever the frame of the button is.

[soleil]

@Fonix I need to support iOS 8.

[soleil]

Thanks for the suggestion. This indents the image from the left. In other words, with all 4 values at 0, the image is left-aligned. If I increase the "left" inset value, the image moves away from the left edge. This doesn't help because I need the image pinned to the right edge, so that no matter how wide the button stretches, it stays right-aligned.

[soulshined]

@soleil right. As far as I know that can't be down with a system button, but what do I know really. I just used that because that's what you gave as an example as something you've tried. You are right, not a good workaround for various widths, but fine for static widths.

[soulshined]

Well actually. @soleil just make the left inset self.button.frame.size.width - widthOfImage or something.

[soulshined]

@soleil nope. Disregard. Wishful thinking. That will probably only work for left aligned content. Yours is most likely centered like everyone else.

[soulshined]

@soleil. Yeah try that. I'm bout to go to bed but try aligning the content to left in storyboard then set the left inset to the one mentioned above. Sounds right

[Ravi]

Thanks Man!! Working like a charm for me!!

[Glenn Posadas]

EZ. Thanks. Tried checking if the imageView of the UIButton has already constraints but found none. This is the last option if you want your imageView to stick on a certain side of your button without being depended on the title.

[Marios]

Nice idea simon

[Tharzeez]

*force right to left and by alignment space i meant some constant say 10.0 so it wont be hugging to the left corner of the view

[mehdok]

Nice and simple.

[agirault]

Is there a way to define a padding to complement the semanticContentAttribute property? Based on the text in my button, the image could be touching the text, or be far away from it.

[derickito]

It was down voted because the OP is asking how to have the image come after the text, that's what they mean by aligning the image to the right edge of the button. This only aligns the image and text towards the right, but it doesn't have the effect the OP wanted. If you look at the other answers you'll understand what they're trying to do

[Dhaval H. Nena]

@derickito If you see this answer has helped many users here. Though it isn't 100% relevant at the same it isn't 100% useless. Kindly suggest changes instead of downvoting!

[derickito]

While it is helpful and is something you could use, it’s out of place. Just because is a useful answer doesn’t mean it belongs in the answers of this question. People who are looking for an answer to the actual question will be misled thinking this will solve the issue when it won’t. Not sure if you understand that. There’s nothing I can suggest other than removing this answer.

[Dhaval H. Nena]

We may sometime not be clear on our exact requirement OR may be asking for related help which the question may not clearly speak for, based on experiences I can clearly say that new users might not be able to ask for the clear requirement and this answer would have helped them. Otherwise no one would have upvoted this answer and would have commented for better answer or reported for misleading.

[derickito]

I don't think you understand how StackOverflow works. Off topic answers are never valid. If you think this is an answer that would help people you should create it's own question and then put this answer there. Your answer doesn't help me fix the original problem. That's why you're getting downvoted.

[rmp]

Code did not work for me as is. Needed to add self.imageView?.contentMode = .right to prevent image from being stretched.

[Sihad Begovic]

Do not use this if you have support for accessibility, because this brakes the order of the elements spoken out by VoiceOver on the screen.