Circular UIButton With Swift

This is a short post to illustrate one way you can create a circular UIButton in Swift. This is analogous to the iPhone call buttons. I call it circular because “round” can imply simply rounded edges, but in this case we are referring to a button that is truly a circle.

I used this technique in my free Quotivate app for a crisp and clean main user interface, and this is what it looks like.

In this tutorial, I’ll demonstrate with a demo app, which you can download from GitHub.

Update March 17 2016: I’ve added another tutorial similar to this one, but it is a round/circular UIButton subclass that supports IBDesignable and IBInspectable so it can be rendered and configured in Interface Builder. You can see that here on my website.

Update 22 Feb 2017: Project updated to Swift 3 in GitHub.

Here are screenshots of the circular button in the demo app, including an alert when it is clicked. It can be filled with a colour, but in this sample I’ve chosen to colour only the image and the border…keeping it simple, tidy, and clean.

Simulator Screen Shot Feb 9, 2016, 12.16.07 PM
Simulator Screen Shot Feb 9, 2016, 12.16.12 PM

There are four main concepts that I’ll illustrate for this sample:

  1. Size Classes so it accommodates all iPhone and iPad devices.
  2. Using an Image Set to specify 1x, 2x, and 3x images for a UIButton.
  3. Template Image so that a given button image can be coloured using tintColor.
  4. Configuring the circular button in viewDidLayoutSubviews, so that the size classes have been applied prior to making a typical rectangular button into a circle by rounding it using the button bounds.

I’m illustrating by using a Storyboard, but the concept is the same in IB without Storyboard, or programmatically in code.

In the Storyboard, you add a button in the usual manner. I’ve given it height/width constraints because I want to explicitly size it for Regular/Compact widths so it looks nice on iPhone/iPad devices. I’ve also given it a center X constraint and other constraints to tie it to the bottom and leading/trailing edges. For the height/width, you can see below how I’ve defined the button to be 100 x 100 for larger screens, and 50 x 50 for smaller screens. Here is a screenshot below.

50And100

In this example, I want to illustrate having an image for the button, versus text. To accomplish this, you need to select File > New > File > Resource > Asset Catalog, and click Next, name it what you like (for example Buttons), then click Create.

Using the +, now you need to create a New Image Set. I’ve named it AddButton, since the image set in this case is for an Add button. Assuming your images are already added to the project, drag the three images over to the 1x, 2x, and 3x squares. This is what mine looks like:

Images

Note: This is important. If you want your images to take on the tintColor that you might set according to your color scheme, in the Attributes Inspector you need to specify the Render As value to be Template Image as illustrated below. Otherwise, the image will retain its default colour regardless of the tintColor you define. Here is my screenshot illustrating this important point.

Screen Shot 2015-09-05 at 11.08.07 PM

Remember the name of the Image Set because this is how you tell the UIButton what the image set is, and then using the right image size at runtime is automatic. The screenshot below illustrates setting the UIButton Image attribute to AddButton, the name of the image set.

ImageSetName

The next thing to consider, equally important, is where to place code to alter the button to be circular. In viewDidLoad, the layout engine has not finished it’s job yet, so you can’t rely on the frame and bounds size in this method. This is a common mistake. The right place to do it is in viewDidLayoutSubviews, since Auto Layout has done its job at that point.

Here is the main concept of this post, turning the regular UIButton into a circular button, by calling the configureButton method from the viewDidLayoutSubviews method.

You can specify whatever colour you like versus what I’ve specified above. The rounding of the button is done by using cornerRadius, and you can see that the multiplier is applied to the bounds of the original button, which is why we need to trigger this method from viewDidLayoutSubviews, versus viewDidLoad.

Note: For more details about viewDidLayoutSubviews, see this post on my website.

I’ve covered the key aspects of how to create a circular button, including specifying your own images, accommodating all devices and screen sizes, how to facilitate tinting the image based on colour preferences, and where to customize the button to work with Auto Layout.

 

I’m in a perpetual state of learning and am always open to feedback and suggestions, so if you have any comments please feel free to add them here or send me an email!

Leave a Comment: