Align button image to right edge of UIButton

问题

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?

回答1:

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

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

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

回答4:

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.

回答5:

Clean way to do this in Swift

button.semanticContentAttribute = .forceRightToLeft

Hope this helps

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

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

回答8:

Try below code:

btn.contentHorizontalAlignment = .right

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

回答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)

回答11:

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

回答12:

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.

来源：https://stackoverflow.com/questions/32365521/align-button-image-to-right-edge-of-uibutton

标签

ios

xcode

uibutton

uiimage

uiedgeinsets