iOS - UIBarButtonItem Identifier - option to create "settings" cogwheel button

Question

I want to create a UIBarButtonItem to represent the app's settings (cogwheel). Presently I can only find an option to create UIBarButtonItem (Interface Builder > Attributes Inspector > identifier) such as "Add" (+), "Edit", "Done", "Cancel" etc

I can't find an option to create a settings (cogwheel) icon. Is there a way to do this in interface builder or through code?

Or do I have to create an image and then the image ?

Solution 1

Unicode has several notable examples you can simply copy and paste into a string declaration in Xcode, or use the standard Unicode String Escape (\uxxxx) and iOS is actually quite fluent when it comes to Unicode (I know some of the char's are fairly ugly, but that's Unicode for ya'):

Unicode Character 'GEAR WITHOUT HUB' (U+26ED): http://www.fileformat.info/info/unicode/char/26ed/index.htm

Unicode Character 'GEAR' (U+2699): http://www.fileformat.info/info/unicode/char/2699/index.htm

Or prepare an image and set the UIBarButtonItem's customView property accordingly.

Solution 2

Composing CodaFi and user1046037 answers:

Creating UIBarButtonItem with unicode character as a title.

You have to initialize UIBarButtonItem with title (initWithTitle:) not system item (initWithBarButtonSystemItem:).

You can set custom title with string (such as unicode character).

You can resize title.

UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithTitle:@"\u2699" style:UIBarButtonItemStylePlain target:self action:@selector(showSettings)];

UIFont *customFont = [UIFont fontWithName:@"Helvetica" size:24.0];
NSDictionary *fontDictionary = @{NSFontAttributeName : customFont};
[settingsButton setTitleTextAttributes:fontDictionary forState:UIControlStateNormal];

Solution 3

This works in Swift 5 and iOS 14.4...

    let settingsButton = UIBarButtonItem(title: NSString(string: "\u{2699}\u{0000FE0E}") as String, style: .plain, target: self, action: #selector(self.settingsBtn(_:)))
    let font = UIFont.systemFont(ofSize: 28) // adjust the size as required
    let attributes = [NSAttributedString.Key.font : font]
    settingsButton.setTitleTextAttributes(attributes, for: .normal)
    self.navigationItem.rightBarButtonItem = settingsButton

See @hazelnut's comment in the accepted answer. Without adding \u{0000FE0E} to the string it shows up as an emoji and is immune to any appearance settings. Adding that string fixes that.

Solution 4

To get the cogwheel icon using Swift, do the following in viewDidLoad(), assuming you have wired up your button from your view into your controller. (Ex: @IBOutlet var settingsButton: UIBarButtonItem!)

self.settingsButton.title = NSString(string: "\u{2699}") as String
if let font = UIFont(name: "Helvetica", size: 18.0) {
    self.settingsButton.setTitleTextAttributes([NSFontAttributeName: font], forState: UIControlState.Normal)
}

View more solutions

Comments

[scord]

you have to create the imgae.

[user1046037]

@scordova88 thanks a lot for confirming that, I just saw an article that teaches to draw a cogwheel artwork coreldraw.com/forums/t/25477.aspx

[user1046037]

awesome !! thanks a ton!! I was spending a lot of time trying to build the image (am not so familiar with drawing softwares) to match the gradient of the toolbar

[user1046037]

uicode looks good and definitely a big time saver !!. One small doubt how do I increase the font size of the uibarbuttonitem.

[user1046037]

as CodaFi had pointed out, it works like a charm!! self.settingsBarButton.title = @"\u2699"; UIFont *f1 = [UIFont fontWithName:@"Helvetica" size:24.0]; NSDictionary *dict = [[NSDictionary alloc] initWithObjectsAndKeys:f1, UITextAttributeFont, nil]; [self.settingsBarButton setTitleTextAttributes:dict forState:UIControlStateNormal];

[matthewpalmer]

For anyone looking to do this in Swift/iOS 8, I had to do self.settingsBarButton.title = NSString(string: "\u{2699}"), if let font = UIFont(name: "Helvetica", size: 18.0) ... self.settingsBarButton.setTitleTextAttributes([NSFontAttribu‌​teName: font], forState: UIControlState.Normal)

[human4]

There is a small problem, the "image" appears aligned with the top of the frame, I had a "+" button in the other side of a UINavigationBar and and it is very noticeable that the alignment is not the same. Do you have any solution for that?

[Gus]

As of iOS9.1, the unicode character now gets converted into an emoji, which looks really strange on the navigation bar. Is there any way to use the old symbol?

[hazelnut]

@Gus to prevent the emoji conversion you have to add \u0000FE0E after your unicode character. For Objective-C it would be self.settingsBarButton.title = @"\u2699\u0000FE0E";. In Swift NSString(string: "\u{2699}\u{0000FE0E}")

[Jeff Muir]

It has not been mentioned yet that it is possible to use Interface Builder directly to enter the Unicode characters. Have a look at stackoverflow.com/questions/11070428/…. I used this technique to find the gear and copy it to the field in the UI

[algrid]

It's let attributes = [NSAttributedStringKey.font: font] in Swift 4