Custom UIBarButtonItem with quartz

Question

How can I draw a button with quartz that has exactly the same style as a UIBarButtonItem. The button should be able to show different colors. I downloaded the Three20 project, but this project is really complex, you'd need a lot of time to overlook the whole framework. I just want to draw a custom UIBarButtonItem.

Thanks for help.

Answer 1

If you are using the Three20 library, I guess TTButton's "toolbarButton" style is what you want. TTButton is a sub-class of UIButton, but it allows you to apply styles just like using css while creating a webpage.

To create a button like a UIBarButtonItem, just call

[TTButton buttonWithStyle:@"toolbarButton:" title:@"Title"]

You may need to retain it since the button is an auto-release object.

Answer 2

Try a UISegmentedControl with only one segment and momentary selection. It supports tintColor and might be close enough for your purposes.

Answer 3

In Swift 4.1

You can add your own custom view with your own designs/animations/colors/etc using Quartz2D as follows.

• Create your custom view with your custom Quartz stuff
• Add your UIBarButtonItem with a customView
• Add a protocol (you will need it, because the UIBarButtonItem initialized wit a customView expects the view to handle user interactions and thus does not provide a way to set a target/selector)

The bar button item created by this method does not call the action method of its target in response to user interactions. Instead, the bar button item expects the specified custom view to handle any user interactions and provide an appropriate response.

Don't forget to add that your view has to conform to the protocol (CameraButtonDelegate in this case) and also to add the method cameraButtonChanged(to:) to capture the user interactions

func setupButton() {
   customView = CameraButton()
   customView.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
   customView.delegate = self
   let barButtonItem = UIBarButtonItem(customView:customView)
   self.navigationItem.rightBarButtonItem = torchItem
}

protocol CameraButtonDelegate {
    func cameraButtonChanged(to state:Bool)
}
class CameraButton: UIView {
    var delegate: CameraButtonDelegate?
    var active: Bool = false    
    var strokeColor = UIColor.gray
    init() {
        self.init()
        self.backgroundColor = .clear
    }
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.active = self.active ? false : true
        self.strokeColor = self.active ? UIColor.blue : UIColor.gray
        setNeedsDisplay()
    }
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.delegate?.cameraButtonChanged(to: self.active)
    }
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setStrokeColor(strokeColor.cgColor)
        context?.setLineWidth(1.0)
        // Add your Quartz stuff here
        context?.strokePath()
    }
}