How to Create Round Buttons Using @IBDesignable on iOS 11


#1

Buttons in Xcode Storyboards require a bit of work to customize, especially if you want a solid background color and an easy to edit corner radius.


This is a companion discussion topic for the original entry at http://blog.supereasyapps.com/how-to-create-round-buttons-using-ibdesignable-on-ios-11/

#2

Dan Stenmark a former Apple employee shared the following:

cornerRadius is notoriously nasty on the GPU. There are situations when it really is the only option, but it should be avoided when possible.

http://texturegroup.org/docs/corner-rounding.html

Also, I’ve actually been moving away from sharedInit() and over to putting my view setup code in willMoveToWindow. While it does mean you have to write the code in an idempotent way (in case said view is repeatedly added and removed), you no longer have to muck around with multiple init methods.


#3

It’s great to show how IBDesignable stuff works but for a quick setting of cornerRadius directly in storyboard in Xccde you can simply use User Defined Runtime Attributes and this key path: layer.cornerRadius and set the Number value. Otherwise it would be more useful to update cornerRadius dynamically to keep the button perfectly round even when it’s width/height changes.


#4

Very true, that’s all this does under the hood. We picked it to make it so that you can visually see the change quickly using the IBDesignable attributes.

It’s more designer friendly, instead of having to memorize a key path.