Nikita Zernov Nikita Zernov - 4 months ago 23
iOS Question

iOS SDK: Corner Radius shows incorrectly

Here I've got screen designed in Sketch:

enter image description here

There are two buttons. Now I am designing such button in Xcode and I am setting UIButton's corner radius this way:

layer.cornerRadius = 30
clipsToBounds = true


But as the result I am having something strange:

enter image description here

You can see some corner in the center if the left and right sides of button. What can I do?

Answer

To generate round corners on such a button, if you set the cornerRadius value to 30, you are assuming that the height of the button is set to 60.

This may not be true on all the devices, depending on how you handle your layout. Seeing your image, it looks like the button is slightly less high than what you designed.

Two options :

  1. Use Auto-Layout and add a constraint of "fixed height" on your button, with a value of 60, so your button always has a height of 60 points.
  2. Implement a UIButton subclass, and in the layoutSubviews method, set the cornerRadius to half the height of the bounds of your button. This way, any time the system re-draws the button, the corner radius will be updated appropriately.