How to Create a Custom Gradient Button in iOS with Swift

Learn how to implement a custom UIButton with a gradient background

Image by Author: A person holding a mobile phone

In this tutorial, you will learn how to create a custom button with a gradient background using Swift. You also will be able to change the gradient colors in storyboard or xib. By the end of the tutorial, you should have a good understanding of how to design and implement custom views and controls in iOS.

Please take note that this project is developed in Swift 5 with iOS13+ and Xcode 14.

Below is the final output of the app that we are going to achieve from this tutorial.

Final output of this tutorial

Get Started

1. Setting up a new Xcode project

Here are the steps to create a new UIKit project in Xcode:

1. Open Xcode and click “Create a new Xcode project” or go to “File > New > Project” from the menu bar.
2. Select “App” and choose “Single View App” as the project template. Then, click “Next.”
3. In the next screen, enter a Project Name for your app as show below.

Create new UIKit project

2. Create a custom gradient button class using CAGradientLayer

Create a new file called “GradientButton” as a subclass of UIButton. Add the below code.

Here is a breakdown of the code above:

• We define a new custom button class called GradientButton that inherits from UIButton.
• We make the class @IBDesignable so that it can be rendered in Interface Builder (Storyboard and xib).
• We define two @IBInspectable properties for the start and end colors of the gradient.
• The didSet closure will be called when the value changed inside the code and Interface Builder.
• In the draw method, we add a new CAGradientLayer with the specified colors, and add it as a sublayer to the button.
• We also round the corners of the button and clip the subviews to the bounds, so that the gradient is clipped to the rounded corners.

3. Adding the custom button in Interface Builder

First, let’s add a vertical stack view as a main container (in view controller) to easily manage buttons or other contents. Then, set the top, leading and trailing constraints as show below.

Adding stack view to view controller and set the constraints

1. Now, add a button inside the vertical stack view.
2. Change the button class in “Identity Inspector” to “GradientButton”.
3. Then, switch to attribute inspector and the gradient fields will be showing and able to set.
4. Set the height constraint for the button to 50px to look better.
5. Set the tint color to white

Adding custom gradient button from Storyboard and customize it

3. Adding the custom button in View Controller programatically

The custom button also can be added programatically.

Before adding the code, connect the stack view from Storyboard into view controller as shown below.

1. You need to enable the Assistant in the right panel, to open the ViewControler.swift file.
2. Click the stack view, hold the “control” key, and drag to it into the file and below popup will show to enter the variable name.
3. Then, click “Connect” to finish.

Following is the code that we need to update in view controller.

4. Project completed

Great, we have completed all the steps, and the project is now ready to run!

Conclusion

Congratulations! You’ve just learned how to create a beautiful custom button with a gradient background in iOS using Swift.

Custom views and controls are a powerful tool in iOS development, allowing developers to create UI elements that are tailored to their specific app’s design and functionality. By following this tutorial, you should now have a good understanding of how to create custom views and controls in iOS using Swift.

What’s Next

To continue learning, you can explore other types of custom views and controls, or dive deeper into the UIKit frameworks. In addition to creating custom buttons, you can explore other types of UI elements, such as custom sliders, progress bars, and switches.

Thank you for following along with this tutorial, and happy coding!

References

• Apple’s CAGradientLayer documentation
• GitHub project on to demonstrate custom GradientButton class