Making a Circular Button in iOS Without Using Images
Rounded buttons have been cited as being easier on the eyes. With apps like Google Maps, Pinterest, Facebook Messenger, and Instagram, circular buttons have become a common trend to give interfaces a friendlier aesthetic.
Luckily, making circular buttons is pretty straight-forward. UIButton has a property named layer. It’s of the type CALayer(Core Animation layer) and has two properties we need to concern ourselves with: masksToBounds and cornerRadius. The property masksToBounds is a bool that when set to true lets core animation apply a clipping mask to the UIButton that matches the bounds of the object. cornerRadius is a CGFloat that if set to any value greater than 0 causes the layer to draw rounded corners in its background, but those only apply to the background color and the border of the layer. To get it to apply to anything else, such as a background image, you’ll need to to set masksToBounds to true.
You can subclass UIButton and do this or you can do it from interface builder like so:
Here is the button:
This breaks shadows though as masksToBounds cuts out shadows. But you’ve probably seen button with shadows on iOS, so how is it done? UIButton inherits from UIView (well from UIControl and that inherits from UIView) and that’s where it gets the layer property. Set the shadow properties on an UIView instance and set its dimensions to be equal to that of the button. The UIView will provides the shadow. Next, simply add your button to the UIView object’s view hierarchy and viola, you got a rounded button with shadows.
And here is the actual button:
Note that in interface builder the button will still be square. That’s because you’ve set masksToBounds and cornerRadius though the layer property and not with interface builder. You don’t actually need to set the masksToBounds property, you can just check clip to bounds in the attributes inspectors:
Just remember to uncheck it in the UIView object and also to delete the layer.maskToBounds property that you set in in the identity inspector:
Enjoy your pretty new buttons!