How to make a custom button in Swift

A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'Custom Button'.

A step by step tutorial on making a custom button in Swift (iOS) using custom touches and callbacks. Github repository available.

The following tutorial builds on our Open Source Swift starter project, which can be downloaded using the link below, and which walks you through how to create a custom button that animates based on the interaction and which makes use of custom touch events vs a UITapGestureRecognizer to determine the tap.

Please note that this custom button can be used for any MacOS, TVOS and WatchOS project that uses UIKit.

Please note this tutorial uses the TinyConstraints Swift package, which we added using the Swift Package Manager.

What are we making in this tutorial ?

A screenshot of an iPhone 13 in portrait with the product of this tutorial. On the left sits a screenshot showing the button in its default state, this is essentially white with black text. To its right sits a screenshot of the button in its highlighted state, i.e. when its being pressed - which is reflected as a black background with white text.

In this tutorial we will be creating a custom UIView that acts as a button. It will have a label that uses attributed text and an appearance that animates depending on whether the button is being pressed or not, which will be determined via UITouch events.

Part of this tutorial will demonstrate how the UITouch location can be used to determine if the finger is within the button or not, whilst the touch is moving and when the touch ended. This is important as the onRelease callback - which is what gets called when your finger leaves the screen - will otherwise get called regardless of if your finger leaves the screen within the button or outside it.

For more information on UITouch events please consult the Apple documentation via the link below.

Tutorial

We recommend downloading our Open Source project, checking out the main branch and carrying out the steps outlined below. All relevant changes can be found on the tutorial/custom-touch-button branch.

git clone git@github.com:delasign/swift-starter-project.git

Please note that we have removed the label, and associated variables and functionality, that we created as part of our how to create a label tutorial and formatted the screen to be white. These changes are not reflected in this walkthrough.

Step One: Add the Content

A screenshot of Xcode showing the UIContent and English and Spanish JSON files that we used to create the content for the button.

The following step aims at creating content for the button to be consumed by the application through our LanguageCoordinator.

For more information about our LanguageCooordinator and localization for the Apple Ecosystem please consult the tutorial below.

A | Create the UIContent

A screenshot of Xcode showing how we added a struct to our UIContent.swift file for the button.

In UIContent.swift, create a new struct called Buttons and add a string within it for the button title called pressMe. Below it, declare a constant that can be coded to based on content in our JSONs (next part of this step).

The purpose of creating a new struct is to separate content to align with their purpose, whilst maximizing flexibility whilst avoiding repeating ourselves.

B | Add content to the localized JSONs

A screenshot of Xcode showing how we altered the English and Spanish JSON to include the button UIContent that we created in the previous part of this step.

Add the content to the en.json and es.json.

Please note that given that our sample project is setup to use both English and Spanish, both JSONs must be filled in and coded appropriately for the app to function. To change this, alter the available languages provided to the LanguageCoordinator in the LanguageCoordinator.swift file, on line 38.

Step Two: Create the custom button style

A screenshot of Xcode showing how we created the Custom Button Style within the Styleguide.

Under the Styleguide folder, create a new file called Styleguide+CustomButtonStyle.swift and paste in the code found below.

Step Three: Create the custom button

The following step walks you through how to create the custom button, along with its UI, touches and animations.

A | Create the CustomButton UIView

A screenshot of Xcode with the declaration of our Custom Button UIView.

Under UI/Components create a new folder called CustomButton.

Within the newly created CustomButton folder, create a new file called CustomButton.swift and paste in the code found below.

Please note that the setupUI functionality will be created in the next step.

B | Create the CustomButton UI extension

A screenshot Xcode of the code of the UI extension for our custom button.

Under the CustomButton folder, create another file called CustomButton+UI.swift and paste in the code found below.

C | Create the CustomButton animation extension

A screenshot of Xcode of the code of the Animation extension of the Custom Button.

Under the CustomButton folder, create another file called CustomButton+Animations.swift and paste in the code found below.

D | Create the CustomButton touches extension

A screenshot of Xcode of the code behind the touches extension of the Custom Button.

Under the CustomButton folder, create another file called CustomButton+Touches.swift and paste in the code found below.

We recommend that you place it above the CustomButton+Animations.swift file.

E | Create the CustomButton update extension

A screenshot of Xcode of the code behind the Custom Button update extension.

Under the CustomButton folder, create another file called CustomButton+Update.swift and paste in the code found below.

Step Four: Add your button to the interface

A screenshot of an iPhone 13 with the product of adding the Custom Button to the screen and running the app on Xcode.

The following step walks you through how to add the CustomButton to the interface, update it's content to match that of the LanguageCoordinator & add a debugPrint that logs when the button has a successful onRelease has been triggered.

A | Declare the custom button

A screenshot of Xcode of the CustomUIView UIView with the declaration of the custom button constant.

In CustomUIView.swift, declare the custom button constant.

B | Add the custom button to the UI

A screenshot of Xcode of the CustomUIView UI extension, demonstrating how we added the CustomButton to the CustomUIView.

In CustomUIView+UI.swift, add the custom button to the interface.

Sample code provided below.

Please note that the debugPrint for the callback can be found on line 33. This is executed when the touch exits successfully.

C | Update the content

A screenshot of Xcode and the CustomUIView Update extension showing how we updated the content of the Custom Button within the CustomUIView.

In CustomUIView+Update.swift, within the onContentUpdate function, call the equivalent function of the custom button.

Step Five: Verify

Run the app and verify:

The button appears on the screen and can be rotated, with constraints and shadow updating adequately.
The button highlights on press.
After a press, if your finger leaves the button, the button returns to normal.
After a press, if your finger leaves and returns to the button, the button goes from highlighted to normal to highlighted.
If you stop pressing the screen outside of the button, the debugPrint does not appear on the debug area.
If you stop pressing the screen inside the button, the debugPrint appears in the debug area.

Any Questions ?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.