CODEWITHSUNDEEP
iosicons
Mike Flynn
Mike Flynn

Reputation: 24325

Add iOS Close Button Icon Without Custom Image

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

Upvotes: 21

Views: 23991

Answers (8)

SimeonRumy
SimeonRumy

Reputation: 403

iOS 13 +

We can use multiple inbuilt types, including close:

UIButton(type: .close)

For more information on button types please view: https://developer.apple.com/documentation/uikit/uibutton/buttontype

Upvotes: 1

Dave Levy
Dave Levy

Reputation: 1172

I ended up liking a lower cased "x" in Gill Sans at 40.0. It's not perfect but it does the trick. enter image description here

There is also a circled x in Xcode>Edit>Emojis if you search for "X" that could work. enter image description here

Upvotes: 0

mxcl
mxcl

Reputation: 26883

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

Upvotes: 5

Dan Korkelia
Dan Korkelia

Reputation: 104

This a tricky subject. Ideally you might want to get an icon generated from The Noun Project to get a more pixel perfect version.

What I have used myself is a "Add Contact" button type and then used this code to initialise it at load time to rotate it 45 degrees:

yourUILabel.transform = CGAffineTransform(rotationAngle: CGFloat.pi / 4)

It's not an ideal solution in my option though.

Hope this helps!

Upvotes: 1

Koen.
Koen.

Reputation: 26949

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)

enter image description here

Upvotes: 7

Kaihua
Kaihua

Reputation: 336

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.

x button

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.

Upvotes: 13

Sam Spencer
Sam Spencer

Reputation: 8609

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):

UIBarButtonItemSystemStop

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.

Upvotes: 25

johnMa
johnMa

Reputation: 3311

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.

Upvotes: 5

Related Questions