Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

Question

I would like to place an icon left of the two lines of text such that there s about 2-3 pixels of space between the image and the start of text  The control itself is Center aligned horizontally  set through Interface Builder   The button would resemble something like this                          Image  Add To               Favorites     I m trying to configure this with contentEdgeInset  imageEdgeInsets and titleEdgeInsets to no avail  I understand that a negative value expands the edge while a positive value shrinks it to move it closer to the center   I tried    button setTitleEdgeInsets UIEdgeInsetsMake 0  -image size width  0  0     button setImageEdgeInsets UIEdgeInsetsMake 0  button titleLabel bounds size width  0  0      but this doesn t display it correctly  I ve been tweaking the values but going from say -5 to -10 on the left inset value doesn t appear to move it in expected manner  -10 will scoot the text all the way to the left so I expected -5 to scoot it half way from the left side but it doesn t    What s the logic behind insets  I m not familiar with image placements and related terminology   I used this SO question as a reference but something about my values isn t right  UIButton  how to center an image and a text using imageEdgeInsets and titleEdgeInsets

User · Answer

I m a little late to this party too  but I think I have something useful to add  o    I created a UIButton subclass whose purpose is to be able to choose where the button s image is layout  either vertically or horizontally   It means that you can make this kind of buttons     Here the details about how to create these buttons with my class    func makeButton  imageVerticalAlignment LayoutableButton VerticalAlignment  imageHorizontalAlignment LayoutableButton HorizontalAlignment  title String  - gt  LayoutableButton       let button   LayoutableButton         button imageVerticalAlignment   imageVerticalAlignment     button imageHorizontalAlignment   imageHorizontalAlignment      button setTitle title  for   normal          add image  border           return button    let button1   makeButton imageVerticalAlignment   center  imageHorizontalAlignment   left  title   button1   let button2   makeButton imageVerticalAlignment   center  imageHorizontalAlignment   right  title   button2   let button3   makeButton imageVerticalAlignment   top  imageHorizontalAlignment   center  title   button3   let button4   makeButton imageVerticalAlignment   bottom  imageHorizontalAlignment   center  title   button4   let button5   makeButton imageVerticalAlignment   bottom  imageHorizontalAlignment   center  title   button5   button5 contentEdgeInsets   UIEdgeInsets top  10  left  10  bottom  10  right  10    To do that  I added 2 attributes   imageVerticalAlignment and imageHorizontalAlignment  Off course  If your button only have an image or a title     don t use this class at all    I also added an attribute named imageToTitleSpacing which allow you to adjust space between title and image   This class try his best to be compatible if you want to use imageEdgeInsets  titleEdgeInsets and contentEdgeInsets directly or in combinaison with the new layout attributes   As  ravron explains us  I try my best to make the button content edge correct  as you can see with the red borders    You can also use it in Interface Builder      Create a UIButton Change the button class Adjust Layoutable Attributes using  center    top    bottom    left  or  right     Here the code  gist      IBDesignable class LayoutableButton  UIButton        enum VerticalAlignment   String           case center  top  bottom  unset             enum HorizontalAlignment   String           case center  left  right  unset              IBInspectable     var imageToTitleSpacing  CGFloat   8 0           didSet               setNeedsLayout                         var imageVerticalAlignment  VerticalAlignment    unset           didSet               setNeedsLayout                        var imageHorizontalAlignment  HorizontalAlignment    unset           didSet               setNeedsLayout                         available    unavailable  message   This property is reserved for Interface Builder  Use  imageVerticalAlignment  instead         IBInspectable     var imageVerticalAlignmentName  String           get               return imageVerticalAlignment rawValue                   set               if let value   VerticalAlignment rawValue  newValue                    imageVerticalAlignment   value               else                   imageVerticalAlignment    unset                                     available    unavailable  message   This property is reserved for Interface Builder  Use  imageHorizontalAlignment  instead         IBInspectable     var imageHorizontalAlignmentName  String           get               return imageHorizontalAlignment rawValue                   set               if let value   HorizontalAlignment rawValue  newValue                    imageHorizontalAlignment   value               else                   imageHorizontalAlignment    unset                                    var extraContentEdgeInsets UIEdgeInsets   UIEdgeInsets zero      override var contentEdgeInsets  UIEdgeInsets           get               return super contentEdgeInsets                   set               super contentEdgeInsets   newValue             self extraContentEdgeInsets   newValue                      var extraImageEdgeInsets UIEdgeInsets   UIEdgeInsets zero      override var imageEdgeInsets  UIEdgeInsets           get               return super imageEdgeInsets                   set               super imageEdgeInsets   newValue             self extraImageEdgeInsets   newValue                      var extraTitleEdgeInsets UIEdgeInsets   UIEdgeInsets zero      override var titleEdgeInsets  UIEdgeInsets           get               return super titleEdgeInsets                   set               super titleEdgeInsets   newValue             self extraTitleEdgeInsets   newValue                        Needed to avoid IB crash during autolayout     override init frame  CGRect            super init frame  frame              required init  coder aDecoder  NSCoder            super init coder  aDecoder           self imageEdgeInsets   super imageEdgeInsets         self titleEdgeInsets   super titleEdgeInsets         self contentEdgeInsets   super contentEdgeInsets            override func layoutSubviews             if let imageSize   self imageView  image  size              let font   self titleLabel  font              let textSize   self titleLabel  attributedText  size      self titleLabel  text  size attributes   NSFontAttributeName  font                  var  imageEdgeInsets   UIEdgeInsets zero             var  titleEdgeInsets   UIEdgeInsets zero             var  contentEdgeInsets   UIEdgeInsets zero              let halfImageToTitleSpacing   imageToTitleSpacing   2 0              switch imageVerticalAlignment               case  bottom                   imageEdgeInsets top    textSize height   imageToTitleSpacing    2 0                  imageEdgeInsets bottom    -textSize height - imageToTitleSpacing    2 0                  titleEdgeInsets top    -imageSize height - imageToTitleSpacing    2 0                  titleEdgeInsets bottom    imageSize height   imageToTitleSpacing    2 0                  contentEdgeInsets top    min  imageSize height  textSize height    imageToTitleSpacing    2 0                  contentEdgeInsets bottom    min  imageSize height  textSize height    imageToTitleSpacing    2 0                   only works with contentVerticalAlignment    center                 contentVerticalAlignment    center             case  top                   imageEdgeInsets top    -textSize height - imageToTitleSpacing    2 0                  imageEdgeInsets bottom    textSize height   imageToTitleSpacing    2 0                  titleEdgeInsets top    imageSize height   imageToTitleSpacing    2 0                  titleEdgeInsets bottom    -imageSize height - imageToTitleSpacing    2 0                  contentEdgeInsets top    min  imageSize height  textSize height    imageToTitleSpacing    2 0                  contentEdgeInsets bottom    min  imageSize height  textSize height    imageToTitleSpacing    2 0                   only works with contentVerticalAlignment    center                 contentVerticalAlignment    center             case  center                    only works with contentVerticalAlignment    center                 contentVerticalAlignment    center                 break             case  unset                  break                            switch imageHorizontalAlignment               case  left                   imageEdgeInsets left   -halfImageToTitleSpacing                  imageEdgeInsets right   halfImageToTitleSpacing                  titleEdgeInsets left   halfImageToTitleSpacing                  titleEdgeInsets right   -halfImageToTitleSpacing                  contentEdgeInsets left   halfImageToTitleSpacing                  contentEdgeInsets right   halfImageToTitleSpacing             case  right                   imageEdgeInsets left   textSize width   halfImageToTitleSpacing                  imageEdgeInsets right   -textSize width - halfImageToTitleSpacing                  titleEdgeInsets left   -imageSize width - halfImageToTitleSpacing                  titleEdgeInsets right   imageSize width   halfImageToTitleSpacing                  contentEdgeInsets left   halfImageToTitleSpacing                  contentEdgeInsets right   halfImageToTitleSpacing             case  center                   imageEdgeInsets left   textSize width   2 0                  imageEdgeInsets right   -textSize width   2 0                  titleEdgeInsets left   -imageSize width   2 0                  titleEdgeInsets right   imageSize width   2 0                  contentEdgeInsets left   -  imageSize width   textSize width  - max  imageSize width  textSize width     2 0                  contentEdgeInsets right   -  imageSize width   textSize width  - max  imageSize width  textSize width     2 0             case  unset                  break                             contentEdgeInsets top    extraContentEdgeInsets top              contentEdgeInsets bottom    extraContentEdgeInsets bottom              contentEdgeInsets left    extraContentEdgeInsets left              contentEdgeInsets right    extraContentEdgeInsets right               imageEdgeInsets top    extraImageEdgeInsets top              imageEdgeInsets bottom    extraImageEdgeInsets bottom              imageEdgeInsets left    extraImageEdgeInsets left              imageEdgeInsets right    extraImageEdgeInsets right               titleEdgeInsets top    extraTitleEdgeInsets top              titleEdgeInsets bottom    extraTitleEdgeInsets bottom              titleEdgeInsets left    extraTitleEdgeInsets left              titleEdgeInsets right    extraTitleEdgeInsets right              super imageEdgeInsets    imageEdgeInsets             super titleEdgeInsets    titleEdgeInsets             super contentEdgeInsets    contentEdgeInsets            else               super imageEdgeInsets   extraImageEdgeInsets             super titleEdgeInsets   extraTitleEdgeInsets             super contentEdgeInsets   extraContentEdgeInsets                    super layoutSubviews

User · Answer

In interface Builder  Select the UIButton -  Attributes Inspector -  Edge Title and modify the edge insets

User · Answer

In swift 5 3 and Inspired by  ravron answer  extension UIButton           Fits the image and text content with a given spacing         - Parameters            - spacing  Spacing between the Image and the text           - contentXInset  The spacing between the view to the left image and the right text to the view     func setHorizontalMargins imageTextSpacing  CGFloat  contentXInset  CGFloat   0            let imageTextSpacing   imageTextSpacing   2                  contentEdgeInsets   UIEdgeInsets top  0  left   imageTextSpacing   contentXInset   bottom  0  right   imageTextSpacing   contentXInset           imageEdgeInsets   UIEdgeInsets top  0  left  -imageTextSpacing  bottom  0  right  imageTextSpacing          titleEdgeInsets   UIEdgeInsets top  0  left  imageTextSpacing  bottom  0  right  -imageTextSpacing           It adds an extra horizontal margin from the View to the Image and from the Label to the View

User · Answer

Here is a simple example of how to use imageEdgeInsets This will make a 30x30 button with a hittable area 10 pixels bigger all the way around  50x50               var expandHittableAreaAmt   CGFloat   10     var buttonWidth   CGFloat   30     var button   UIButton buttonWithType UIButtonType Custom  as UIButton     button frame   CGRectMake 0  0  buttonWidth expandHittableAreaAmt  buttonWidth expandHittableAreaAmt      button imageEdgeInsets   UIEdgeInsetsMake expandHittableAreaAmt  expandHittableAreaAmt  expandHittableAreaAmt  expandHittableAreaAmt      button setImage UIImage named   buttonImage    forState   Normal      button addTarget self  action   didTouchButton    forControlEvents  TouchUpInside

User · Answer

Swift 4 x  extension UIButton       func centerTextAndImage spacing  CGFloat            let insetAmount   spacing   2         let writingDirection   UIApplication shared userInterfaceLayoutDirection         let factor  CGFloat   writingDirection     leftToRight   1   -1          self imageEdgeInsets   UIEdgeInsets top  0  left  -insetAmount factor  bottom  0  right  insetAmount factor          self titleEdgeInsets   UIEdgeInsets top  0  left  insetAmount factor  bottom  0  right  -insetAmount factor          self contentEdgeInsets   UIEdgeInsets top  0  left  insetAmount  bottom  0  right  insetAmount            Usage   button centerTextAndImage spacing  10 0

User · Answer

In Xcode 8 0 you can simply do it by changing insets in size inspector   Select the UIButton -   Attributes Inspector -  go to size inspector and modify the content  image and title insets     And if you want to change image on right side you can simply change the semantic property to Force Right-to-left in Attribute inspector

User · Answer

A small addition to Riley Avron answer to account locale changes   extension UIButton       func centerTextAndImage spacing  CGFloat            let insetAmount   spacing   2         let writingDirection   UIApplication sharedApplication   userInterfaceLayoutDirection         let factor  CGFloat   writingDirection     LeftToRight   1   -1          self imageEdgeInsets   UIEdgeInsets top  0  left  -insetAmount factor  bottom  0  right  insetAmount factor          self titleEdgeInsets   UIEdgeInsets top  0  left  insetAmount factor  bottom  0  right  -insetAmount factor          self contentEdgeInsets   UIEdgeInsets top  0  left  insetAmount  bottom  0  right  insetAmount

User · Answer

An elegant way in Swift 3 and better to understand   override func imageRect forContentRect contentRect  CGRect  - gt  CGRect       let leftMargin CGFloat   40     let imgWidth CGFloat   24     let imgHeight CGFloat   24     return CGRect x  leftMargin  y   contentRect size height-imgHeight    0 5  width  imgWidth  height  imgHeight     override func titleRect forContentRect contentRect  CGRect  - gt  CGRect       let leftMargin CGFloat   80     let rightMargin CGFloat   80     return CGRect x  leftMargin  y  0  width  contentRect size width-leftMargin-rightMargin  height  contentRect size height    override func backgroundRect forBounds bounds  CGRect  - gt  CGRect       let leftMargin CGFloat   10     let rightMargin CGFloat   10     let topMargin CGFloat   10     let bottomMargin CGFloat   10     return CGRect x  leftMargin  y  topMargin  width  bounds size width-leftMargin-rightMargin  height  bounds size height-topMargin-bottomMargin    override func contentRect forBounds bounds  CGRect  - gt  CGRect       let leftMargin CGFloat   5     let rightMargin CGFloat   5     let topMargin CGFloat   5     let bottomMargin CGFloat   5     return CGRect x  leftMargin  y  topMargin  width  bounds size width-leftMargin-rightMargin  height  bounds size height-topMargin-bottomMargin

User · Answer

I write code bewlow  It works well in product version  Supprot Swift 4 2    extension UIButton   enum ImageTitleRelativeLocation       case imageUpTitleDown     case imageDownTitleUp     case imageLeftTitleRight     case imageRightTitleLeft    func centerContentRelativeLocation   relativeLocation                                         ImageTitleRelativeLocation                                     spacing  CGFloat   0        assert contentVerticalAlignment     center              only works with contentVerticalAlignment    center            guard  title for   normal     nil      attributedTitle for   normal     nil  else           assert false   TITLE IS NIL  SET TITTLE FIRST            return            guard let imageSize   self currentImage  size else           assert false   IMGAGE IS NIL  SET IMAGE FIRST              return           guard let titleSize   titleLabel           systemLayoutSizeFitting UIView layoutFittingCompressedSize  else               assert false   TITLELABEL IS NIL                return            let horizontalResistent  CGFloat        extend contenArea in case of title is shrink     if frame width  lt  titleSize width   imageSize width           horizontalResistent   titleSize width   imageSize width - frame width         print  horizontalResistent   horizontalResistent        else           horizontalResistent   0            var adjustImageEdgeInsets  UIEdgeInsets    zero     var adjustTitleEdgeInsets  UIEdgeInsets    zero     var adjustContentEdgeInsets  UIEdgeInsets    zero      let verticalImageAbsOffset   abs  titleSize height   spacing    2      let verticalTitleAbsOffset   abs  imageSize height   spacing    2       switch relativeLocation       case  imageUpTitleDown           adjustImageEdgeInsets top   -verticalImageAbsOffset         adjustImageEdgeInsets bottom   verticalImageAbsOffset         adjustImageEdgeInsets left   titleSize width   2   horizontalResistent   2         adjustImageEdgeInsets right   -titleSize width   2 - horizontalResistent   2          adjustTitleEdgeInsets top   verticalTitleAbsOffset         adjustTitleEdgeInsets bottom   -verticalTitleAbsOffset         adjustTitleEdgeInsets left   -imageSize width   2   horizontalResistent   2         adjustTitleEdgeInsets right   imageSize width   2 - horizontalResistent   2          adjustContentEdgeInsets top   spacing         adjustContentEdgeInsets bottom   spacing         adjustContentEdgeInsets left   -horizontalResistent         adjustContentEdgeInsets right   -horizontalResistent     case  imageDownTitleUp          adjustImageEdgeInsets top   verticalImageAbsOffset         adjustImageEdgeInsets bottom   -verticalImageAbsOffset         adjustImageEdgeInsets left   titleSize width   2   horizontalResistent   2         adjustImageEdgeInsets right   -titleSize width   2 - horizontalResistent   2          adjustTitleEdgeInsets top   -verticalTitleAbsOffset         adjustTitleEdgeInsets bottom   verticalTitleAbsOffset         adjustTitleEdgeInsets left   -imageSize width   2   horizontalResistent   2         adjustTitleEdgeInsets right   imageSize width   2 - horizontalResistent   2          adjustContentEdgeInsets top   spacing         adjustContentEdgeInsets bottom   spacing         adjustContentEdgeInsets left   -horizontalResistent         adjustContentEdgeInsets right   -horizontalResistent     case  imageLeftTitleRight          adjustImageEdgeInsets left   -spacing   2         adjustImageEdgeInsets right   spacing   2          adjustTitleEdgeInsets left   spacing   2         adjustTitleEdgeInsets right   -spacing   2          adjustContentEdgeInsets left   spacing         adjustContentEdgeInsets right   spacing     case  imageRightTitleLeft          adjustImageEdgeInsets left   titleSize width   spacing   2         adjustImageEdgeInsets right   -titleSize width - spacing   2          adjustTitleEdgeInsets left   -imageSize width - spacing   2         adjustTitleEdgeInsets right   imageSize width   spacing   2          adjustContentEdgeInsets left   spacing         adjustContentEdgeInsets right   spacing            imageEdgeInsets   adjustImageEdgeInsets     titleEdgeInsets   adjustTitleEdgeInsets     contentEdgeInsets   adjustContentEdgeInsets      setNeedsLayout

User · Answer

I agree the documentation on imageEdgeInsets and titleEdgeInsets should be better  but I figured out how to get the correct positioning without resorting to trial and error   The general idea is here at this question  but that was if you wanted both text and image centered   We don t want the image and text to be centered individually  we want the image and the text to be centered together as a single entity   This is in fact what UIButton already does so we simply need to adjust the spacing   CGFloat spacing   10     the amount of spacing to appear between image and title tabBtn imageEdgeInsets   UIEdgeInsetsMake 0  0  0  spacing   tabBtn titleEdgeInsets   UIEdgeInsetsMake 0  spacing  0  0     I also turned this into a category for UIButton so it will be easy to use   UIButton Position h   interface UIButton ImageTitleCentering   - void  centerButtonAndImageWithSpacing  CGFloat spacing    end   UIButton Position m   implementation UIButton ImageTitleCentering   - void  centerButtonAndImageWithSpacing  CGFloat spacing       self imageEdgeInsets   UIEdgeInsetsMake 0  0  0  spacing       self titleEdgeInsets   UIEdgeInsetsMake 0  spacing  0  0       end   So now all I have to do is    button centerButtonAndImageWithSpacing 10     And I get what I need every time   No more messing with the edge insets manually   EDIT  Swapping Image and Text  In response to  Javal in comments  Using this same mechanism  we can swap the image and the text  To accomplish the swap  simply use a negative spacing but also include the width of the text and the image  This will require frames to be known and layout performed already    self view layoutIfNeeded   CGFloat flippedSpacing   - desiredSpacing   button currentImage size width   button titleLabel frame size width    button centerButtonAndImageWithSpacing flippedSpacing     Of course you will probably want to make a nice method for this  potentially adding a second category method  this is left as an exercise to the reader

User · Answer

I m a little late to this party  but I think I have something useful to add    Kekoa s answer is great but  as RonLugge mentions  it can make the button no longer respect sizeToFit or  more importantly  can cause the button to clip its content when it is intrinsically sized  Yikes   First  though    A brief explanation of how I believe imageEdgeInsets and titleEdgeInsets work   The docs for imageEdgeInsets have the following to say  in part      Use this property to resize and reposition the effective drawing rectangle for the button image  You can specify a different value for each of the four insets  top  left  bottom  right   A positive value shrinks  or insets  that edge   moving it closer to the center of the button  A negative value expands  or outsets  that edge    I believe that this documentation was written imagining that the button has no title  just an image  It makes a lot more sense thought of this way  and behaves how UIEdgeInsets usually do  Basically  the frame of the image  or the title  with titleEdgeInsets  is moved inwards for positive insets and outwards for negative insets    OK  so what   I m getting there  Here s what you have by default  setting an image and a title  the button border is green just to show where it is       When you want spacing between an image and a title  without causing either to be crushed  you need to set four different insets  two on each of the image and title  That s because you don t want to change the sizes of those elements  frames  but just their positions  When you start thinking this way  the needed change to Kekoa s excellent category becomes clear    implementation UIButton ImageTitleCentering   -  void centerButtonAndImageWithSpacing  CGFloat spacing       CGFloat insetAmount   spacing   2 0      self imageEdgeInsets   UIEdgeInsetsMake 0  -insetAmount  0  insetAmount       self titleEdgeInsets   UIEdgeInsetsMake 0  insetAmount  0  -insetAmount       end   But wait  you say  when I do that  I get this     Oh yeah  I forgot  the docs warned me about this  They say  in part      This property is used only for positioning the image during layout  The button does not use this property to determine intrinsicContentSize and sizeThatFits     But there is a property that can help  and that s contentEdgeInsets  The docs for that say  in part      The button uses this property to determine intrinsicContentSize and sizeThatFits     That sounds good  So let s tweak the category once more    implementation UIButton ImageTitleCentering   -  void centerButtonAndImageWithSpacing  CGFloat spacing       CGFloat insetAmount   spacing   2 0      self imageEdgeInsets   UIEdgeInsetsMake 0  -insetAmount  0  insetAmount       self titleEdgeInsets   UIEdgeInsetsMake 0  insetAmount  0  -insetAmount       self contentEdgeInsets   UIEdgeInsetsMake 0  insetAmount  0  insetAmount       end   And what do you get     Looks like a winner to me      Working in Swift and don t want to do any thinking at all  Here s the final version of the extension in Swift   extension UIButton       func centerTextAndImage spacing  CGFloat            let insetAmount   spacing   2         imageEdgeInsets   UIEdgeInsets top  0  left  -insetAmount  bottom  0  right  insetAmount          titleEdgeInsets   UIEdgeInsets top  0  left  insetAmount  bottom  0  right  -insetAmount          contentEdgeInsets   UIEdgeInsets top  0  left  insetAmount  bottom  0  right  insetAmount

User · Answer

Also if you want to make something similar to     You need  1 Set horizontal and vertical alignment for button to     Find all required values and set UIImageEdgeInsets          CGSize buttonSize   button frame size          NSString  buttonTitle   button titleLabel text          CGSize titleSize    buttonTitle sizeWithAttributes    NSFontAttributeName    UIFont camFontZonaProBoldWithSize 12 f              UIImage  buttonImage   button imageView image          CGSize buttonImageSize   buttonImage size           CGFloat offsetBetweenImageAndText   10    vertical space between image and text           button setImageEdgeInsets UIEdgeInsetsMake  buttonSize height -  titleSize height   buttonImageSize height     2 - offsetBetweenImageAndText                                                       buttonSize width - buttonImageSize width    2                                                      0 0                             button setTitleEdgeInsets UIEdgeInsetsMake  buttonSize height -  titleSize height   buttonImageSize height     2   buttonImageSize height   offsetBetweenImageAndText                                                      titleSize width    button imageEdgeInsets  left  gt  buttonSize width   -buttonImage size width      buttonSize width - titleSize width    2    buttonSize width - titleSize width    2 - buttonImage size width                                                      0 0       This will arrange your title and image on button   Also please note update this on each relayout    Swift  import UIKit  extension UIButton          MARK  - UIButton Aligment      func alignContentVerticallyByCenter offset CGFloat   10            let buttonSize   frame size          if let titleLabel   titleLabel              let imageView   imageView                if let buttonTitle   titleLabel text                  let image   imageView image                   let titleString NSString   NSString string  buttonTitle                  let titleSize   titleString sizeWithAttributes                       NSFontAttributeName   titleLabel font                                        let buttonImageSize   image size                  let topImageOffset    buttonSize height -  titleSize height   buttonImageSize height   offset     2                 let leftImageOffset    buttonSize width - buttonImageSize width    2                 imageEdgeInsets   UIEdgeInsetsMake topImageOffset                                                     leftImageOffset                                                     0 0                   let titleTopOffset   topImageOffset   offset   buttonImageSize height                 let leftTitleOffset    buttonSize width - titleSize width    2 - image size width                  titleEdgeInsets   UIEdgeInsetsMake titleTopOffset                                                     leftTitleOffset                                                     0 0

User · Answer

You can avoid much trouble by using this --  myButton contentHorizontalAlignment   UIControlContentHorizontalAlignmentLeft     myButton contentVerticalAlignment   UIControlContentVerticalAlignmentCenter    This will align all your content automatically to left  or wherever you want it   Swift 3   myButton contentHorizontalAlignment   UIControlContentHorizontalAlignment left     myButton contentVerticalAlignment   UIControlContentVerticalAlignment center

User · Answer

The swift 4 2 version of solution would be the following   let spacing  CGFloat   10    the amount of spacing to appear between image and title self button  imageEdgeInsets   UIEdgeInsets top  0  left  0  bottom  0  right  spacing  self button  titleEdgeInsets   UIEdgeInsets top  0  left  spacing  bottom  0  right  0

[iphone] Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

Examples related to iphone

Examples related to ios

Examples related to uibutton

Examples related to uikit