To show image and title on UIButton in swift - swift

Question

In my UIButton i want to show both the image and text. when i am adding the following code, only the image is showing but not the text. Can anyone help me to resolve the issue?
override func layoutSubviews() {
super.layoutSubviews()
guard imageView != nil else {
return
}
imageView?.frame.size.width = 25
imageView?.frame.size.height = 25
imageEdgeInsets.left = 0
titleEdgeInsets = UIEdgeInsets(top: 10, left: 25, bottom: 5, right: 0)
In the image 4 buttons are there. But here only the images are showing, not the text.
2- when i am trying the following code the output is
imageEdgeInsets = UIEdgeInsets(top: 5, left: (bounds.width - 25), bottom: 5, right: 0)
titleEdgeInsets = UIEdgeInsets(top: 10, left: 0, bottom: 5, right: (imageView?.frame.width)!)
But here i want the image should be on left side and the text will be on right side

Answer 1

You can subclass the UIButton and override imageRect(forContentRect, titleRect(forContentRect and intrinsicContentSize to get the desired effect
class MyButton: UIButton {
var titleFont: UIFont! = nil
var textSize: CGFloat = 0
override init(frame: CGRect) {
super.init(frame: frame)
self.titleFont = titleLabel?.font ?? .none
}
required init?(coder: NSCoder) {
super.init(coder: coder)
self.titleFont = titleLabel?.font ?? .none
}
override var intrinsicContentSize: CGSize {
CGSize(width: textSize + 40, height: 30)
//why height is 30? You want your imageView to be of height 25 and want top and bottom insets to be 5 each so 25 + 5 + 5 = 30
//Why textSize + 40? You want your button to take appropriate size of text + 5 left inset of image + 25 of imageView + 5 left inset of title + 5 right inset of title
}
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
return CGRect(x: 5, y: 2.5, width: 25, height: 25)
//why x is 5 because you want your image to have left inset of 5
//why y is 2.5 ? Your button height is 30, image height is 25 so (30 - 25) / 2 = 2.5
}
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
if let string = self.title(for: .normal) {
textSize = string.widthOfString(usingFont: titleLabel!.font)
return CGRect(origin: CGPoint(x: 35, y: 0), size: CGSize(width: textSize + 35, height: 30))
//same explanation why x is 35 ? 5 (left inset of image) + 25 (image width) + 5 (left inset of text) = 35
}
return CGRect.zero
}
}
extension String {
func widthOfString(usingFont font: UIFont) -> CGFloat {
let fontAttributes = [NSAttributedString.Key.font: font]
let size = self.size(withAttributes: fontAttributes)
return size.width
}
}
How to use it?
Use it just like normal UIButton here is how I would use it in code
let myButton = MyButton()
myButton.backgroundColor = UIColor.red
myButton.setImage(.checkmark, for: .normal)
myButton.setTitle("Checked", for: .normal)
myButton.setTitleColor(.blue, for: .normal)
self.view.addSubview(myButton)
myButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([myButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
myButton.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50)])
Output:
Though it seems like x and y coordinates are kind of hardcoded, they are not, they are relative values and will work with any kind of text (as long as button image width and height is 25)