373

I don't want to use a subview if I can avoid it. I want a UIButton with a background image, text, and an image in it. Right now, when I do that, the image is on the left side of the text. The background image, text, and image all have different highlight states.

1
  • To add another "hack" to the growing list here: you could set the attributedTitle of the button to an attributed string containing your button title + a space + the image (as an NSTextAttachment). You might need to tweak the attachment's bounds to get it to align as you want (see stackoverflow.com/questions/26105803/…).
    – Manav
    May 2, 2019 at 11:15

34 Answers 34

640

Simplest solution:

iOS 10 & up, Swift:

button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

Before iOS 10, Swift/Obj-C:

button.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.titleLabel.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.imageView.transform = CGAffineTransformMakeScale(-1.0, 1.0);

iOS 9 & up, Swift: (Recommended)

button.semanticContentAttribute = .forceRightToLeft
15
  • 11
    I used this for the navigation bar title view and there was a glitch. It's fine when it's first loaded, but when you push a view controller and pop it, the title gets flipped.
    – funct7
    Oct 28, 2015 at 3:21
  • 1
    I found if this is causing complaints about autolayout constraint conflicts at runtime it may be fixed by adding this in layoutSubviews()
    – Vlad
    Sep 28, 2016 at 5:42
  • 1
    How can I put more space in between the text and the image?
    – rohinb
    Jan 8, 2017 at 2:04
  • 2
    @rohinb @jose920405 Try setting ImageEdgeInsets and ContentEdgeInsets for padding (keeping in mind they've been reversed). For example button.ImageEdgeInsets = new UIEdgeInsets(0, -leftPadding, 0, leftPadding); button.ContentEdgeInsets = new UIEdgeInsets(0, 0, 0, leftPadding);. That's in Xamarin, but should translate to Swift/Obj-C easily enough. Feb 27, 2017 at 16:37
  • 4
    the fatal flaw with setting semanticContentAttribute is that it WILL break voiceover navigation. voiceover navigation uses the semantic content attribute to determine the direction to navigate through elements and force flipping the semantic means the user will reach the button, then their VO navigation is flipped around and they go back to the element they just visited from instead of the next one.
    – timzilla
    Jan 6, 2022 at 20:15
345

Despite some of the suggested answers being very creative and extremely clever, the simplest solution is as follows:

button.semanticContentAttribute = UIApplication.shared
    .userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft

As simple as that. As a bonus, the image will be at the left side in right-to-left locales.

EDIT: as the question has been asked a few times, this is iOS 9 +.

20
  • 133
    I can't believe this answer was the accepted one. Nobody does localisations for their applications?
    – Zoltán
    Sep 4, 2017 at 11:32
  • 10
    @pallzoltan: this answers the question (ie. "How do I put the image on the right side of the text in a UIButton?"). What has localisation got to do with this?
    – Benjamin
    Sep 4, 2017 at 11:59
  • 30
    There are not many situations when you don't want your layout to be "flipped" in RTL languages. Directly setting semanticContentAttribute is just a hack/workaround, not a real solution.
    – Zoltán
    Sep 4, 2017 at 20:49
  • 8
    My approach is that you don't know what the person asking the question is building, so it's always better count with flexibility for the layout.
    – Zoltán
    Sep 4, 2017 at 20:51
  • 10
    How is this the accepted answer? It's not the simplest or even remotely close to being the correct anser. Apples documentation for UIUserInterfaceLayoutDirection.rightToLeft states: "The layout direction right to left. This value is appropriate when running with localizations such as Arabic or Hebrew that should have the user interface layout origin on the right edge of the coordinate system." UIButton has an imageEdgeInsets property that can be set in code, or IB. Designated specifically for this. That is the correct way to reposition a button's image.
    – Alex Chase
    Aug 1, 2019 at 22:35
334

UPDATED FOR XCODE 9 (Via Interface Builder)

There's an easier way from the Interface Builder.

Select the UIButton and select this option in the View Utilities > Semantic:

left-to-right enter image description here That's it! Nice and simple!

OPTIONAL - 2nd step:

If you want to adjust the spacing between the image and the title you can change the Image Inset here:

enter image description here

2
  • 2
    In Xcode 9.0 beta 5 (9M202q), you unfortunately only see the result at runtime—in the storyboard it still shows the image to the left. Also note that because of this it takes some trial and error to set the correct insets.
    – PDK
    Aug 16, 2017 at 12:36
  • 20
    Please don't do it this way - this breaks localization for right-to-left languages.
    – jsadler
    Jun 10, 2019 at 20:03
179

Subclassing UIButton is completely unnecessary. Instead you can simply set a high left inset value for the image insets, and a small right inset for the title. Something like this:

button.imageEdgeInsets = UIEdgeInsetsMake(0., button.frame.size.width - (image.size.width + 15.), 0., 0.);
button.titleEdgeInsets = UIEdgeInsetsMake(0., 0., 0., image.size.width);
1
  • 3
    It worked, but just remember that today with autolayout you have to do it on viewDidAppear and not on viewDidLoad Aug 5, 2015 at 14:35
95

I'm giving Inspire48 the credit for this one. Based on his suggestion and looking at that other question I came up with this. Subclass UIButton and override these methods.

@implementation UIButtonSubclass

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGRect frame = [super imageRectForContentRect:contentRect];
    frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) -  self.imageEdgeInsets.right + self.imageEdgeInsets.left;
    return frame;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGRect frame = [super titleRectForContentRect:contentRect];
    frame.origin.x = CGRectGetMinX(frame) - CGRectGetWidth([self imageRectForContentRect:contentRect]);
    return frame;
}

@end
9
  • 3
    UIButton is a class cluster and should not be subclassed. May 24, 2013 at 0:18
  • 52
    That is not true, the documentation explicitly mentions subclassing and provides methods you should override for custom layout behaviour.
    – Tark
    May 31, 2013 at 15:06
  • 2
    developer.apple.com/library/ios/documentation/uikit/reference/… buttonWithType If you subclass UIButton, this method does not return an instance of your subclass. If you want to create an instance of a specific subclass, you must alloc/init the button directly and backgroundRectForBounds Subclasses that provide custom background adornments can override this method and return a modified bounds rectangle to prevent the button from drawing over any custom content.` Neither mentions those specific methods, but I assume they don't mind subclasses. Oct 28, 2013 at 21:26
  • 1
    Looks like this formula is better for mirroring image frame: frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) - self.imageEdgeInsets.right + self.imageEdgeInsets.left - frame.origin.x; It works better for UIControlContentHorizontalAlignmentCenter and others...
    – k06a
    May 22, 2015 at 7:29
  • @GwendalRoué Just because it's shorter doesn't mean it's better. It's a hackier way, and it makes the button ignore actual insets, and might break in right-to-left languages. With this answer you have full control of the layout
    – Accatyyc
    Aug 26, 2015 at 12:14
80

Just update the insets when the title is changed. You need to compensate for the inset with an equal and opposite inset on the other side.

[thebutton setTitle:title forState:UIControlStateNormal];
thebutton.titleEdgeInsets = UIEdgeInsetsMake(0, -thebutton.imageView.frame.size.width, 0, thebutton.imageView.frame.size.width);
thebutton.imageEdgeInsets = UIEdgeInsetsMake(0, thebutton.titleLabel.frame.size.width, 0, -thebutton.titleLabel.frame.size.width);
4
  • 4
    You might want to add [thebutton.titleLabel sizeToFit]; before. The width may be zero if you have't triggered a layout. Same goes for the image size (just use the UIImage.size instead of the imageView size)
    – scosman
    May 22, 2015 at 19:30
  • @delrox good point. Can use titleWidth = [self.titleLabel sizeThatFits:CGSizeMake(CGFLOAT_MAX, self.bounds.size.height)].width; (or if you're concerned about the button frame not yet being established, use CGFLOAT_MAX for the height as well) and imageWidth = self.currentImage.size.width; Aug 7, 2015 at 21:35
  • 1
    Works perfectly on viewDidLayoutSubviews Aug 19, 2015 at 15:37
  • I had to place this in layoutSubviews in my UITableViewCell subclass but its working good. Thanks!
    – RyanG
    Oct 7, 2015 at 18:02
57

All of these answers, as of January 2016, are unnecessary. In Interface Builder, set the View Semantic to Force Right-to-Left, or if you prefer programmatic way, semanticContentAttribute = .forceRightToLeft That will cause the image to appear on the right of your text.

5
  • 5
    Sadly it doesn't support ios older than 9. Still nice answer, tho.
    – Eddie
    Jan 26, 2016 at 15:06
  • 1
    I am sad to report, that setting this on a UIButton that is then used for UIBarButtonItem did not result in any change.
    – Amelia
    Feb 21, 2017 at 22:32
  • As @Amelia mentioned, it doesn't work if you call UIBarButtonItem(customView: button), but will work if you wrap button inside some empty view
    – tt.Kilew
    Apr 12, 2017 at 8:22
  • @tt.Kilew , using XCode 8.1 you get it work. I set the uiButton.semanticContentAttribute = .forceRightToLeft and provide let nextButton = UIBarButtonItem(customView: uiButton) Apr 19, 2017 at 8:34
  • 1
    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. May 31, 2022 at 11:16
54

In interface builder you can configure options Edge Insets for UIButton, separately each of three parts: content, image, title

enter image description here enter image description here

Xcode 8:

enter image description here

1
29

I decided not to use the standard button image view because the proposed solutions to move it around felt hacky. This got me the desired aesthetic, and it is intuitive to reposition the button by changing the constraints:

extension UIButton {
    func addRightIcon(image: UIImage) {
        let imageView = UIImageView(image: image)
        imageView.translatesAutoresizingMaskIntoConstraints = false

        addSubview(imageView)

        let length = CGFloat(15)
        titleEdgeInsets.right += length

        NSLayoutConstraint.activate([
            imageView.leadingAnchor.constraint(equalTo: self.titleLabel!.trailingAnchor, constant: 10),
            imageView.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
            imageView.widthAnchor.constraint(equalToConstant: length),
            imageView.heightAnchor.constraint(equalToConstant: length)
        ])
    }
}

button with right arrow

2
  • This does not response to taps, the text dims but the image does not
    – Teddy K
    Jun 11, 2020 at 14:55
  • Check your extension on small devices as well. Aug 11, 2021 at 11:53
26

Update: Swift 3

class ButtonIconRight: UIButton {
    override func imageRect(forContentRect contentRect:CGRect) -> CGRect {
        var imageFrame = super.imageRect(forContentRect: contentRect)
        imageFrame.origin.x = super.titleRect(forContentRect: contentRect).maxX - imageFrame.width
        return imageFrame
    }

    override func titleRect(forContentRect contentRect:CGRect) -> CGRect {
        var titleFrame = super.titleRect(forContentRect: contentRect)
        if (self.currentImage != nil) {
            titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX
        }
        return titleFrame
    }
}

Original answer for Swift 2:

A solution that handles all horizontal alignments, with a Swift implementation example. Just translate to Objective-C if needed.

class ButtonIconRight: UIButton {
    override func imageRectForContentRect(contentRect:CGRect) -> CGRect {
        var imageFrame = super.imageRectForContentRect(contentRect)
        imageFrame.origin.x = CGRectGetMaxX(super.titleRectForContentRect(contentRect)) - CGRectGetWidth(imageFrame)
        return imageFrame
    }

    override func titleRectForContentRect(contentRect:CGRect) -> CGRect {
        var titleFrame = super.titleRectForContentRect(contentRect)
        if (self.currentImage != nil) {
            titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect))
        }
        return titleFrame
    }
}

Also worth noting that it handles quite well image & title insets.

Inspired from jasongregori answer ;)

3
  • 1
    This solution worked for me, however my image needed some space around it so I added the following code: self.contentEdgeInsets = UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0) Aug 13, 2015 at 13:14
  • 1
    I like this way because you can add @IBDesignable to the class and see it flipped at design time. Nov 16, 2017 at 16:30
  • I prefer this solution because it even works when put in navigation bar. Dec 13, 2018 at 8:46
15

If this need to be done in UIBarButtonItem, additional wrapping in view should be used
This will work

let view = UIView()
let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
view.addSubview(button)
view.frame = button.bounds
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: view)

This won't work

let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
1
  • The issue with UIBarButtonItem literally drove me crazy for hours until I found this answer. Kudos to you.
    – nayem
    Aug 3, 2021 at 15:46
12

Do Yourself. Xcode10, swift4,

For programmatically UI design

enter image description here

 lazy var buttonFilter : ButtonRightImageLeftTitle = {
    var button = ButtonRightImageLeftTitle()
    button.setTitle("Playfir", for: UIControl.State.normal)
    button.setImage(UIImage(named: "filter"), for: UIControl.State.normal)
    button.backgroundColor = UIColor.red
    button.contentHorizontalAlignment = .left
    button.titleLabel?.font = UIFont.systemFont(ofSize: 16)
    return button
}()

Edge inset values are applied to a rectangle to shrink or expand the area represented by that rectangle. Typically, edge insets are used during view layout to modify the view’s frame. Positive values cause the frame to be inset (or shrunk) by the specified amount. Negative values cause the frame to be outset (or expanded) by the specified amount.

class ButtonRightImageLeftTitle: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        guard imageView != nil else { return }

        imageEdgeInsets = UIEdgeInsets(top: 5, left: (bounds.width - 35), bottom: 5, right: 5)
        titleEdgeInsets = UIEdgeInsets(top: 0, left: -((imageView?.bounds.width)! + 10), bottom: 0, right: 0 )

    }
}

for StoryBoard UI design

enter image description here enter image description here

2
12

iOS 15 brought an update where you can now handle image placements in buttons in a simpler non messier way, ie. without insets.

In XIB/Storyboards: Modify button image placement in editor Simply set the button 'placement' property to leading/training/top/bottom after adding an image property to button. Since it's leading/training, there is an added advantage of it supporting RTL

**In code (Programmatically): ** Use Button Configuration property programmatically Button configuration, programatically

This is not a backward compatible feature, and will work only in iOS15+ as was demonstrated in WWDC '21 - https://developer.apple.com/videos/play/wwdc2021/10064/?time=236

Developer documentation: https://developer.apple.com/documentation/uikit/uibutton/configuration?changes=_4

2
7

Here is solution for UIButton with center aligned content. This code make image right aligned and allows to use imageEdgeInsets and titleEdgeInsets for precious positioning.

enter image description here

Subclass UIButton with your custom class and add:

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    CGRect frame = [super imageRectForContentRect:contentRect];
    CGFloat imageWidth = frame.size.width;
    CGRect titleRect = CGRectZero;
    titleRect.size = [[self titleForState:self.state] sizeWithAttributes:@{NSFontAttributeName: self.titleLabel.font}];
    titleRect.origin.x = (self.frame.size.width - (titleRect.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    frame.origin.x = titleRect.origin.x + titleRect.size.width - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
    return frame;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    CGFloat imageWidth = [self imageForState:self.state].size.width;
    CGRect frame = [super titleRectForContentRect:contentRect];
    frame.origin.x = (self.frame.size.width - (frame.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    return frame;
}
1
6

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

Being that the transform solution doesn't work in iOS 11 I decided to write a new approach.

Adjusting the buttons semanticContentAttribute gives us the image nicely to the right without having to relayout if the text changes. Because of this it's the ideal solution. However I still need RTL support. The fact that an app can not change it's layout direction in the same session resolves this issue easily.

With that said, it's pretty straight forward.

extension UIButton {
    func alignImageRight() {
        if UIApplication.shared.userInterfaceLayoutDirection == .leftToRight {
            semanticContentAttribute = .forceRightToLeft
        }
        else {
            semanticContentAttribute = .forceLeftToRight
        }
    }
}
3
  • This breaks VoiceOver, so that when the the user focuses the UIButton swiping right becomes swiping left, and visa-versa. Which is very confusing.
    – Ian Dundas
    Aug 4, 2022 at 11:56
  • "Most applications don't use VoiceOver" - well that's just incorrect, VoiceOver is enabled for the whole phone, not per-app, and should therefore be supported as an accessibility feature in a well behaved app. Note: VoiceOver support works correctly by default in native controls. Which is why hacks like this (this is not the purpose of this semanticContentAttribute API, don't pretend it is..) are a plain bad idea. Well worth the downvote IMO.
    – Ian Dundas
    Aug 10, 2022 at 7:56
  • You clearly misunderstood. Obviously the OS provides the functionality. Accessibility features such as labels, etc, need to be provided by the devs. When you have an app which is say, highly graphical and unable to use for the blind even with accessibility (as a single example among many), then this contributes as a valid solution for those apps. As no one will be expecting to use accessibility with them. "should therefore be supported as an accessibility feature" is absurd given the reason above. As an example, how many apps have you built that support app-wide XXXL dynamic type? Aug 10, 2022 at 8:23
4

Swift -Extend the UiButton and put these lines

    if let imageWidth = self.imageView?.frame.width {
        self.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth);
    }

    if let titleWidth = self.titleLabel?.frame.width {
        let spacing = titleWidth + 20
        self.imageEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, -spacing);
    }
4

With Xcode 13.3 I solved in the following few steps and as well adding padding to the image.

After creating the button then do this as listed below:

  1. First define the image:
    let symbol = UIImage(named: "put name of your symbol here")
    
  2. Then in viewDidLoad where you created the button, initialise the above defined image in 1, to add the image to the button & set the properties:
    button.setImage(symbol, for: .normal)
    button.semanticContentAttribute = .forceRightToLeft
    button.configuration?.imagePadding = 2
    

And don't forget to add your button to the view.

1
  • 1
    This breaks VoiceOver, so that when the the user focuses the UIButton swiping right becomes swiping left, and visa-versa. Which is very confusing.
    – Ian Dundas
    Aug 4, 2022 at 11:56
3

Building on Piotr Tomasik's elegant solution: if you want to have a bit of spacing between the button label and image as well, then include that in your edge insets as follows (copying my code here that works perfectly for me):

    CGFloat spacing          = 3;
    CGFloat insetAmount      = 0.5 * spacing;

    // First set overall size of the button:
    button.contentEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, insetAmount);
    [button sizeToFit];

    // Then adjust title and image insets so image is flipped to the right and there is spacing between title and image:
    button.titleEdgeInsets   = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - insetAmount, 0,  button.imageView.frame.size.width  + insetAmount);
    button.imageEdgeInsets   = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width + insetAmount, 0, -button.titleLabel.frame.size.width - insetAmount);

Thanks Piotr for your solution!

Erik

2
  • @lulian: I have been using Liau Jian Jie's solution instead recently (the accepted answer here), and that works brilliantly and is a very elegant solution. Oct 27, 2016 at 1:47
  • That doesn't work for me either as it changes the text's alignment. Oct 27, 2016 at 8:21
3

Took @Piotr's answer and made it into a Swift extension. Make sure to set the image and title before calling this, so that the button sizes properly.

 extension UIButton {
    
    /// Makes the ``imageView`` appear just to the right of the ``titleLabel``.
    func alignImageRight() {
        if let titleLabel = self.titleLabel, imageView = self.imageView {
            // Force the label and image to resize.
            titleLabel.sizeToFit()
            imageView.sizeToFit()
            imageView.contentMode = .ScaleAspectFit
            
            // Set the insets so that the title appears to the left and the image appears to the right. 
            // Make the image appear slightly off the top/bottom edges of the button.
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -1 * imageView.frame.size.width,
                bottom: 0, right: imageView.frame.size.width)
            self.imageEdgeInsets = UIEdgeInsets(top: 4, left: titleLabel.frame.size.width,
                bottom: 4, right: -1 * titleLabel.frame.size.width)
          }
        }
     }
2

Subclassing and over-riding layoutSubviews is probably your best way to go.

Referenced from: iPhone UIButton - image position

1
  • 3
    There are absolutely no problems to subclass UIButton.
    – nonamelive
    Oct 17, 2013 at 5:54
2

A swift option that does what you want without playing with any insets:

class RightImageButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        if let  textSize = titleLabel?.intrinsicContentSize(),
                imageSize = imageView?.intrinsicContentSize() {
            let wholeWidth = textSize.width + K.textImageGap + imageSize.width
            titleLabel?.frame = CGRect(
                x: round(bounds.width/2 - wholeWidth/2),
                y: 0,
                width: ceil(textSize.width),
                height: bounds.height)
            imageView?.frame = CGRect(
                x: round(bounds.width/2 + wholeWidth/2 - imageSize.width),
                y: RoundRetina(bounds.height/2 - imageSize.height/2),
                width: imageSize.width,
                height: imageSize.height)
        }
    }

    struct K {
        static let textImageGap: CGFloat = 5
    }

}
1
  • What is RoundRetina and this code is outdated. Sep 2, 2022 at 23:03
1

Solutions mentioned here stopped working, once I enabled Auto Layout. I had to come up with my own:

Subclass UIButton and override layoutSubviews method:

//
//  MIThemeButtonImageAtRight.m
//  Created by Lukasz Margielewski on 7/9/13.
//

#import "MIThemeButtonImageAtRight.h"

static CGRect CGRectByApplyingUIEdgeInsets(CGRect frame, UIEdgeInsets insets);

@implementation MIThemeButtonImageAtRight

- (void)layoutSubviews
{
    [super layoutSubviews];

    CGRect contentFrame = CGRectByApplyingUIEdgeInsets(self.bounds, self.contentEdgeInsets);

    CGRect frameIcon = self.imageView.frame;
    CGRect frameText = self.titleLabel.frame;

    frameText.origin.x = CGRectGetMinX(contentFrame) + self.titleEdgeInsets.left;
    frameIcon.origin.x = CGRectGetMaxX(contentFrame) - CGRectGetWidth(frameIcon);

    self.imageView.frame = frameIcon;
    self.titleLabel.frame = frameText;
}

@end

static CGRect CGRectByApplyingUIEdgeInsets(CGRect frame, UIEdgeInsets insets){

    CGRect f = frame;

    f.origin.x += insets.left;
    f.size.width -= (insets.left + insets.right);
    f.origin.y += (insets.top);
    f.size.height -= (insets.top + insets.bottom);

    return f;

}

Result:

enter image description here

0
1

swift 3.0 Migration solution given by jasongregori

class ButtonIconRight: UIButton {
        override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
            var imageFrame = super.imageRect(forContentRect: contentRect)
           imageFrame.origin.x = super.titleRect(forContentRect: contentRect).maxX - imageFrame.width
        return imageFrame
        }

        override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
            var titleFrame = super.titleRect(forContentRect: contentRect)
            if (self.currentImage != nil) {
                titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX
            }
            return titleFrame
        }
1

Xcode 11.4 Swift 5.2

For anyone trying to mirror the Back button style with the chevron like this:

enter image description here

import UIKit

class NextBarButton: UIBarButtonItem {

    convenience init(target: Any, selector: Selector) {

        // Create UIButton
        let button = UIButton(frame: .zero)

        // Set Title
        button.setTitle("Next", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 17)

        // Configure Symbol
        let config = UIImage.SymbolConfiguration(pointSize: 19.0, weight: .semibold, scale: .large)
        let image = UIImage(systemName: "chevron.right", withConfiguration: config)
        button.setImage(image, for: .normal)

        // Add Target
        button.addTarget(target, action: selector, for: .touchUpInside)

        // Put the Image on the right hand side of the button
        // Credit to liau-jian-jie for this part
        button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

        // Customise spacing to match system Back button
        button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -18.0, bottom: 0.0, right: 0.0)
        button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -12.0, bottom: 0.0, right: 0.0)

        self.init(customView: button)
    }
}

Implementation:

override func viewDidLoad() {
    super.viewDidLoad()
    let nextButton = NextBarButton(target: self, selector: #selector(nextTapped))
    navigationItem.rightBarButtonItem = nextButton
}

@objc func nextTapped() {
    // your code
}
1

This work for me on swift 5.2

let sizeOfTitle: CGFloat = 80
let sizeOfImage: CGFloat = 20
yourButton.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -sizeOfImage , bottom: 0.0, right: sizeOfImage)
yourButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: sizeOfTitle, bottom: 0.0, right: -sizeOfTitle)
0

Swift 3:

open override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
    var frame = super.imageRect(forContentRect: contentRect)
    let  imageWidth = frame.size.width
    var titleRect = CGRect.zero
    titleRect.size = self.title(for: self.state)!.size(attributes: [NSFontAttributeName: self.titleLabel!.font])
    titleRect.origin.x = (self.frame.size.width - (titleRect.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    frame.origin.x = titleRect.origin.x + titleRect.size.width - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
    return frame
}

open override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
    var frame = super.titleRect(forContentRect: contentRect)
    if let imageWidth = self.image(for: self.state)?.size.width {
        frame.origin.x = (self.frame.size.width - (frame.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
    }
    return frame
}
0

How about Constraints? Unlike semanticContentAttribute, they don't change semantics. Something like this perhaps:

 button.rightAnchorconstraint(equalTo: button.rightAnchor).isActive = true

or in Objective-C:

[button.imageView.rightAnchor constraintEqualToAnchor:button.rightAnchor].isActive = YES;

Caveats: Untested, iOS 9+

0

After trying multiple solutions from around the internet, I was not achieving the exact requirement. So I ended up writing custom utility code. Posting to help someone in future. Tested on swift 4.2

// This function should be called in/after viewDidAppear to let view render
    func addArrowImageToButton(button: UIButton, arrowImage:UIImage = #imageLiteral(resourceName: "my_image_name") ) {
        let btnSize:CGFloat = 32
        let imageView = UIImageView(image: arrowImage)
        let btnFrame = button.frame
        imageView.frame = CGRect(x: btnFrame.width-btnSize-8, y: btnFrame.height/2 - btnSize/2, width: btnSize, height: btnSize)
        button.addSubview(imageView)
        //Imageview on Top of View
        button.bringSubviewToFront(imageView)
    }
0

for this issue you can create UIView inside "label with UIImage view" and set UIView class as a UIControl and create IBAction as tuch up in side

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.