Swift: Set UIView as the background of UIBarButton/UIButton - ios

Question

How can I set a UIView as the background of a UIBarButton? UIBarButton/UIButton should contain its title and background image.
I tried with overriding UIButton class, but it doesn't work. If someone has a solution please advise me.

Answer 1

// For UIBarButtonItem (just set customView parameter)
let frame = CGRect(x: 0, y: 0, width: 100, height: 40)
let customView = UIView(frame: frame)
customView.backgroundColor = .red
let barButtonItem = UIBarButtonItem(customView: customView)
// for UIButton
// 1. Subview case (add subview on your target UIButton, send to back so that it does not cover title)
let button0 = UIButton(frame: frame)
button0.addSubview(customView)
button0.sendSubviewToBack(customView)
button0.setTitle("Button", for: UIControl.State())
// 2. Rendered image case (as an alternative render your view to an image and add as a background image)
// Extension for capturing a UIVIew as an image:
extension UIImage {
convenience init?(view: UIView) {
UIGraphicsBeginImageContext(view.frame.size)
guard let ctx = UIGraphicsGetCurrentContext() else {
return nil
}
view.layer.render(in: ctx)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
guard let cgImage = image?.cgImage else {
return nil
}
self.init(cgImage: cgImage)
}
}
let button1 = UIButton(frame: frame)
let customViewImage = UIImage.init(view: customView)
button1.setBackgroundImage(customViewImage, for: UIControl.State())
button1.setTitle("Button", for: UIControl.State())

Answer 2

You can add view as subView of button:
extension UIButton {
func setBackgroundView(view: UIView) {
view.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height)
view.isUserInteractionEnabled = false
self.addSubview(view)
}
}

Answer 3

You can use CustomButton which inherits from UIControl. By using xib you canmanage your UI as per your requirements. You can add n number of UI elements in it. You will get default event handler with this like UIButton (like touchupinside, touchupoutside, valuechange). You can provide IBActions for same. For reference attaching some screen shots. Let me know if you face any while implementing this. Keep coding.

Answer 4

Maybe you should use UIImageView.image instead of the UIView itself to set the bottom background image.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var myButton: UIButton!
#IBOutlet weak var myView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
myButton.setBackgroundImage(myView.image, for: .normal)
}
}