No Round Rect Button in Xcode 5?

Question

Is drag and drop of round rect button no longer available in Xcode 5? I can't seem to find it in the Interface Builder. I was guessing that this is one of the changes in iOS 7, but I just wanted to make sure.

Solution 1

The Round Rect button from Xcode 4 and previous versions appears to have been replaced with the System Default button, which also happens to be clear. I.e. by default there is no white background with rounded corners, only the text is visible.

To make the button white (or any other colour), select the attributes inspector and scroll down to the View section:

Select Background and change it to White:

If you want rounded corners you can do so with a little bit of code. Just ctrl-drag from the button to your .h file, call it something like roundedButton and add this in your viewDidLoad:

CALayer *btnLayer = [roundedButton layer];
[btnLayer setMasksToBounds:YES];
[btnLayer setCornerRadius:5.0f];

Solution 2

Can also make the rounded rect within the storyboard.

Solution 3

This was too long for a comment in @Robert's answer, but I just wanted to add regarding the statement: "The Round Rect button from Xcode 4...appears to have been replaced...".

Confirming that it definitely has been replaced:

The rounded rectangle button is deprecated in iOS 7. Instead, use a system button—that is, a UIButton object of type UIButtonTypeSystem.

iOS 7 system buttons don’t include a bezel or a background appearance. A system button can contain a graphical symbol or a text title, and it can specify a tint color or receive its parent’s color.

...

If you need to display a button that includes a bezel, use a button of type UIButtonTypeCustom and supply a custom background image.

Apple iOS 7 Transition Guide, p. 45, "Rounded Rectangle Button"

So, Apple's recommendation is to use a background image.

Solution 4

Actually in ios 7 the total UI has been changed for basic controls. If still you want to have a rounded rect button, you have to go for the coregraphical property of UIView subclasses i.e; layer property.

buttonObj.layer.cornerRadius = 5.0f;//any float value

to show the effect you have to give some background color to buttonObj

if you want to set the border width

buttonObj.layer.borderWidth = 2.0f;//any float value

you can also give the color for border

buttonObj.layer.borderColor = [[UIColor greenColor]CGColor];

Note: Here we have to use CGColor for the layers because layers are the core graphical properties of UIViews

View more solutions

Comments

[Bilbo Baggins]

surprisingly the iOS 7 Maps app has the round rect info button.

[Robert]

@BartSimpson: I've updated my answer to include rounding the corners.

[Bilbo Baggins]

Your answer works. However I was talking about this info button - s1.ibtimes.com/sites/www.ibtimes.com/files/styles/… (lower right corner)

[Robert]

Ah, OK. Isn't that a custom tabbar button, rather than a round rect?

[Bilbo Baggins]

I remember that in iOS 6, even a basic button had a 'info' look, with an 'i' on a circle. iOS 7 doesn't seem to have that option.

[skinsfan00atg]

VERY important. this will not work unless you add #import <QuartzCore/QuartzCore.h>

[Jesse Aldridge]

Ctrl-drag'ing from the button to a .h file doesn't seem to work. (using XCode 5.0.2)

[Robert]

@JesseAldridge: Are you sure you're dragging to the correct .h file?

[sradforth]

Just to add this is only available for iOS5 onwards

[rizzes]

Note that you won't see the results of your defined attributes until runtime.