Creating a button with UIKit seems easy enough, right? We have all the properties inherited from UIButton() and creating a pill / capsule style button should be a matter of setting layer.cornerRadius to 50, right?!
WRONG
Unbeknownst to me, it was not as straightforward or as easy as I thought, but it’s also not that hard either!
Here’s what we want to achieve:
LET'S GET STARTED
The easy way to create the pill button is by taking 1/2 of the height! Let’s do this!
Initiate the button by assigning a new button variable to the UIButton() class in which you will inherit built-in button properties. This button will be globally accessible.
let playButton - UIButton()
In your button constraints, you should set your heightAnchor and widthAnchor to the desired size you want it to.
// Always do this when setting your own constraints (replace with your button variable); set to false
playButton.translatesAutoresizingMaskIntoConstraints = false
//set height + width constraints
playButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
playButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
Now that we have the height and width for the button determined, let’s style the button so that we can achieve the rounded pill/capsule look!
It’s very simple and all we have to do is take 1/2 of the height for the corner radius.
Since our height is 50 we will set the cornerRadius to 25
playButton.layer.cornerRadius = 50
EASY PEASY!
Here's some additional example of different heights. Remember, the corner radius would be 1/2 of the height to get this rounded look.
When heightAnchor is set to 50:
When heightAnchor is set to 75:
When heightAnchor is set to 100:
