将 UIButton 标题右侧的图像与 imageEdgeInsets 和 titleEdgeInsets 对齐

Question

I would like to add an image on the right side of the title something like this

|Button  [image]|
|title          |

And I am able to achieve this by this code

button.titleEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0)
button.imageEdgeInsets = UIEdgeInsetsMake(0, 135, 0, 5)

But when the title is large, the title label and image intersect with each other. How can I break the title label?

Answer 1

try this, it will never intersect title and image with each other. and i created a button in storyboard in centre. @IBOutlet weak var myButton: UIButton!

  let somespace: CGFloat = 10

  self.myButton.setImage(UIImage(named: "cross"), forState: UIControlState.Normal)

  self.myButton.imageEdgeInsets = UIEdgeInsetsMake(0, self.myButton.frame.size.width - somespace , 0, 0)

  print(self.myButton.imageView?.frame)

  self.myButton.titleEdgeInsets = UIEdgeInsetsMake(0, (self.myButton.imageView?.frame.width)! + somespace, 0, 10 )

and if you want multiline title for button change line break mode for button's title

self.myButton.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping

Swift 3.0

In swift 3.0 you can easily do it in interface builder.

Select the UIButton -> Attributes Inspector -> go to size inspector and modify the image or title insets. and if you want image on button's right side simply select the force Right-to-left in semantic view utilities

.

Answer 2

This extension works for me:

Extension:

extension UIButton {
  func imageToRight() {
      transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
  }
}

Usage:

button.imageToRight()