How to apply borders and corner radius to UIBarButtonItem?

Question

I have programatically created a toolbar to which I have added a UIBarButtonItem.

This is what is currently looks like:

I want the the button to have a border and a corner radius(curved corners). How will the same be implemented?

UIBarButtonItem Implementation code:

let okBarBtn = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "donePressed:")

Answer 1

If you can find the UIView associated with the UIBarButtonItem, you can modify the UIView.layer. But, finding the UIView is not made easy. I used the technique from Figure out UIBarButtonItem frame in window? . Starting with the navigationController.navigationBar, which itself is a UIView, I recursed through the subviews, one of which will be the button I wanted. Which one? Pick your own criteria! Here's my code:

func recurseViews(view:UIView) {
    print("recurseViews: \(view)") // helpful for sorting out which view is which
    if view.frame.origin.x > 700 { // find _my_ button
        view.layer.cornerRadius = 5
        view.layer.borderColor = UIColor.redColor().CGColor
        view.layer.borderWidth = 2
    }
    for v in view.subviews { recurseViews(v) }
}

then in viewDidAppear (or similar)

recurseViews((navigationController?.navigationBar)!)

which is a bit of a hack but does the job:

Answer 2

There's no built-in automatic way to do this, unfortunately. You have two choices:

• You could make this a bar button item with a custom view, make that view a UIButton, and then do the usual stuff to that UIButton (which you can do because it's a view), by way of its layer (give it a border and corner radius).

• You could just draw (in code) a background image with a curved border and use that as the bar button item's image.