DEV Community

Cover image for Customizing UIButton in iOS 15
Rizwan Ahmed
Rizwan Ahmed

Posted on

Customizing UIButton in iOS 15

Buttons are an essential element in iOS apps. If you are developing an app using UIKit, you will probably use UIButton class to create buttons.
Creating a button is a straightforward process, but it becomes problematic when it comes to customizations. Soon you will find yourself writing hacks for achieving your desired result. We all have been there, and we have done it. You are not alone. Luckily, iOS 15.0 gives us a new method to customize Buttons much easier using UIButton.Configuration.
Let's get started!

Configuration types in UIButton

UIButton.Configuration comes in four different types, namely plain, filled, gray, and tinted.
In this article, we will be focusing only on filled configuration. I will leave the rest of the configurations for you to experiment.

var configuration = UIButton.Configuration.filled()

Setting a title in a UIButton

Setting a title is done by using the configuration's title property.

configuration.title = "Start download"

Setting a title in a UIButton

Setting a subtitle in a UIButton

Again, we can make use of the configuration's subtitle property to set a subtitle. It would be tough to set a subtitle without the configuration API.

configuration.subtitle = "(Downloads a random image)"
Enter fullscreen mode Exit fullscreen mode

Setting a subtitle in a UIButton

Setting an image in a UIButton

Adding an image to the button and customizing it has become effortless. An important point to note here is that, the image respects the language's direction.

configuration.image = UIImage(systemName: "arrow.down.square.fill")
Enter fullscreen mode Exit fullscreen mode

Setting an image in a UIButton

Padding between an image and a title in a UIButton

The UIButton configuration makes it easy to set a padding between the image and the button's

configuration.imagePadding = 20
Enter fullscreen mode Exit fullscreen mode

Padding between an image and a title in a UIButton

Changing the position of an image in a UIButton

The imagePlacement is my favorite property. I have written so many nasty hacks for just changing the position of the image in a UIButton, before iOS 15.0
The imagePlacement property supports the following options - leading, trailing, top, or bottom.

configuration.imagePlacement = .trailing
Enter fullscreen mode Exit fullscreen mode

Changing the position of an image in a UIButton

This article was originally published at ohmyswift.com. Click here to read the full article.

About the author πŸ‘¨β€πŸ’»

Rizwan Ahmed β€” iOS Engineer.
Twitter πŸ‘‰ https://twitter.com/rizwanasifahmed
Like our articles? Support us πŸ‘‰https://www.buymeacoffee.com/ohmyswift

Discussion (0)