54

I am making my app ready for iOS7. I did conversion and was working with a user. The button in the app does not look like button. Looks very flat. Is there someway to put border or make it stand like a button?

Mehul Thakkar
  • 12,440
  • 10
  • 52
  • 81
user1509593
  • 1,025
  • 1
  • 10
  • 20

8 Answers8

109

Try this for adding border, It will work

#import <QuartzCore/QuartzCore.h>

then in viewDidLoad

_btn.layer.borderWidth=1.0f;
_btn.layer.borderColor=[[UIColor blackColor] CGColor];
_btn.layer.cornerRadius = 10;

also you can fill the color for making appearance somewhat like button, or best way is to use image there

Apart from BorderColor, you can do it by using Runtime attributes too.

enter image description here

Mehul Thakkar
  • 12,440
  • 10
  • 52
  • 81
  • This did not work for me. Still trying to get a border on a UIButton in iOS 7 without resorting to images. – Alyoshak Oct 12 '13 at 00:10
  • I dont know, why you are not getting border, It is working fine for me. Is it giving any error or just not showing any effect? – Mehul Thakkar Oct 15 '13 at 04:28
  • @Alyoshak This definitely adds a black border. Aly, did you change the `_btn` to your button's name? Also, this isn't the best solution if your app is still available for older IOS versions as it adds the black border but you still see the original button's border. :/ The new buttons don't look like buttons at all. Even the text is greyed out. Just looks terrible. – James Oct 30 '13 at 13:03
  • 2
    Actually, just found the cornerRadius property. `_btn.layer.cornerRadius=8.0f;` So changing the radius and setting a lighter grey border color, then I suppose removing the rounded rect button type property would make both IOS7 and previous versions look the same. – James Oct 30 '13 at 13:10
  • borderWidth, borderColor and cornerRadius did it for me. I also threw in `...layer.shadowOpacity = 0.0f;` for good measure, but I can't swear that it made a difference. – JMD Jan 14 '14 at 01:02
44

try this , this will set border to button

#import <QuartzCore/QuartzCore.h>

btn.layer.borderColor = [UIColor blackColor].CGColor;

btn.layer.borderWidth = 1.0;

btn.layer.cornerRadius = 10;
Shaik Riyaz
  • 11,204
  • 7
  • 53
  • 70
23

With Swift and XCode 6 you can do this.

Click the UIButton element in Storyboard, and go to identity inspector. In the user defined runtime attributes, enter:

layer.borderWidth number 1

If you want nice looking corners

layer.cornerRadius number 5
layer.maskToBounds boolean true

Now this will give you a border but to set the colour you need to do it with code. Go to your view controller, and add an IBOutlet from your button. Note that in this case it's an IBOutlet, not an IBAction. Say you do,

@IBOutlet weak var xButton: UIButton!

Call this in the viewDidLoad function like below to set the colour.

xButton.layer.borderColor = UIColor.whiteColor().CGColor

Thanks!

mtisz
  • 1,000
  • 10
  • 11
15

The design principles in iOS7 have changed. However, if you want to go flatter, but still want a custom button that "stands like a button", you can try out this open source component collection:

FlatUIKit on GitHub

Nikola Kirev
  • 3,152
  • 3
  • 22
  • 30
2

There are two way to simplify button in ios 7

1>Set image : Just like Button using setImage Property for button

2>Set bordercolor borderWidth :

button.layer.borderWidth=1.0f;

button.layer.borderColor=[[UIColor blackColor] CGColor];

Chris Alan
  • 1,426
  • 14
  • 14
1

I suggest you try one of the iOS BootstrapButton libraries (or clones). Just change UIButton in the storyboard to BButton. There is just no preview in the storyboard.

cat
  • 2,871
  • 1
  • 23
  • 28
0

If you use a background image, move button backward. Editor>Arrange>send backward

Nora
  • 167
  • 2
  • 3
  • 14
-3

In ios7 buttons are supposed to look borderless. Please see apple's View Transition Guidelines for help.

If you REALLY want the buttons to have a border, do: [button setImage:forState:] to set a customized button image with border.

monkeyMoo
  • 173
  • 1
  • 1
  • 7