Add iOS Close Button Icon Without Custom Image

Question

Is there a custom X or close button icon builtin to iOS7 that can be used for a close button?

Solution 1

The closest built-in icon / image that looks like an X or a Close Button on iOS 7 is the UIBarButtonItemSystemStop image. Here is a link to the documentation from Apple. Below is the system image (which I image can be tinted using the iOS 7 tint parameter):

You can also create your own - graphically in Photoshop or simply using text (which would fit the iOS 7 design). Just a fancied up X will do! Even a UIBarButtonItem with an "X" and then set the style to Done will give a bolded X.

Another (private) real-iOS example is from UIKit's private resources - the iAd close button. Try using an app like iOS Artwork Extractor to search for and download UIKit images. The images in UIKit are owned by Apple; so you'll need to create your own. You can use the images provided there for inspiration, and then create your own thing in Photoshop.

Solution 2

Of course it is possible.

UIBarButtonItem *closeButton = [[UIBarButtonItem alloc] 
    initWithBarButtonSystemItem:(UIBarButtonSystemItemStop) 
                         target:self 
                         action:@selector(doneButtonTapped:)];

self.navigationItem.rightBarButtonItem = closeButton;

It gives you a built-in 'X' button as the image shows.

Successful tested under Xcode 5 and iOS 7.

QUOTE FROM Sam:

Even a UIBarButtonItem with an "X" and then set the style to Done will give a bolded X.

Although it works, the visual effect is ugly and users will feel it.

Solution 3

The letter X is not visually appealing but the symbol × should work pretty well.

let buttonItem = UIBarButtonItem(title: "×", style: UIBarButtonItemStyle.Plain, target: nil, action: Selector(""))
let font = UIFont.systemFontOfSize(40)
buttonItem.setTitleTextAttributes([NSFontAttributeName: font], forState: .Normal)

Only I can't get the vertical alignment right.. Not even with:

buttonItem.setTitlePositionAdjustment(UIOffsetMake(0, 10), forBarMetrics: .Default)

Solution 4

use UIBarButtonItem and set it's style UIBarButtonSystemItemStop can give you an X button. but i'm not sure if this is what you want.

Solution 5

The unicode ╳ character is close (in situations where you must use UIButton rather than UIBarButtonItem and thus cannot use the other solutions listed here).

View more solutions

Comments

[Vinay Jain]

No, there is not any control in iOS 7.

[Vinay Jain]

But you can create your own using the character "x" and set the borders and corners to look like a button.

[Mike Flynn]

I dont see UIBarButtonItemSystemStop?

[Sam Spencer]

@MikeFlynn it looks like it will only show up on a UIToolbar when you set the UIBarButtonItem type to UIBarButtonItemSystemStop. And Apple may not offer the stop item directly from Xcode IB, you may have to set it as refresh and then change it in the code.

[Zorayr]

It's a bad idea to use a "stop" button as an "X" button; you're coupling two different use cases since by coincidence they look alike — what happens when Apple changes their asset to a "stop playing" string? Then all your "X" buttons all of a sudden will be updated to an unrelated string.

[Lucas van Dongen]

Goed zo Koen. Gewoon simpel houden. The problem with this approach is that if you change the font height it will no longer align with the regular buttons. I couldn't change this neither. Interesting problem on itself. However the × symbol works perfect in a UIButton.

[Kof]

I use the emoji ✕ , looks even closer.

[n13]

Good point @Zorayr - they could change the stop icon any iOS update so a few years from now the app might suddenly look bad. Better to avoid that.