0

My goal is to create a button with fully rounded corners (half a circle at each side). It should look something like this:

enter image description here

In the user defined runtime attributes I've set layer.cornerRadius as KeyPath and 50 as Value (also tried 49). Also, I've set the the "Clip Subviews" option to yes (like in this answer: UIlabel layer.cornerRadius not working in iOS 7.1) However, the compiled result looks like this on my iPhone 5c (iOS 9.2.1):

enter image description here

(The images are made in photoshop but that's exactly how it looks like)

The corners are rounded but there is clearly an anchorpoint missing. Any suggestion on how to get the desired result?

Community
  • 1
  • 1
Philip Feldmann
  • 7,887
  • 6
  • 41
  • 65
  • 2
    Make sure your button has type `.Custom` and the height is exactly `cornerRadius * 2`. You probably want the button to have a height constraint. If `cornerRadius` is `50` then your button should have height `100`. – Sulthan Mar 09 '16 at 17:36
  • @Sulthan Thank you very much, that solved the problem - I guess I'm too used to the css way of doing these things. Is there any way of using percentages instead of fixed numbers? I'd like to have a more dynamic approach in case my height changes. – Philip Feldmann Mar 09 '16 at 17:51
  • 1
    There are multiple ways to do this. You can move `cornerRadius` setting to code but you will have to watch for layout changes and update the value when necessary. You can also create a custom `UIButton` subclass that will do this (and change the `cornerRadius` value in `layoutSubviews`). In most cases you don't expect the button height to change so there is no problem to setting it explicitly in storyboard/xib. – Sulthan Mar 09 '16 at 17:57

3 Answers3

3

The cornerRadius value does not update automatically depending on button height, so, when specifying it from storyboard/xib, you have to make sure the value is exactly the half of the button height.

Typically this is achieved by setting the button height to a constant (using a height constraint) and setting cornerRadius to half of that constant (e.g. for height 100 you want cornerRadius with value 50).

If you want an autoupdating solution, the easiest solution is to subclass UIButton and override layoutSubviews:

override func layoutSubviews() {
   super.layoutSubviews()

   self.layer.cornerRadius = self.frame.size.height / 2.0
}

Then in xib/storyboard you can change the class of your button to your custom class.

Sulthan
  • 128,090
  • 22
  • 218
  • 270
0

Try this if you want to have a dynamic approach rather than using fixed values.

  let button = UIButton()
  button.layer.cornerRadius = button.frame.size.height/2-1
ebby94
  • 3,131
  • 2
  • 23
  • 31
0

For me the below worked better than anything else Create a class for your rounded button and subclass UIButton.

class RoundedButton: UIButton {

 //add your title color and background color outside the below override method
 
 override func draw(_ rect: CGRect) {
    layer.cornerRadius = frame.height / 2.0
    clipsToBounds = true
 }   
}
Pierre.Vriens
  • 2,117
  • 75
  • 29
  • 42
ndarji
  • 39
  • 1
  • 1
  • 7