UIButton in iOS 15
Tags: Ios15, Uibutton, Swift Programming, Uikit, Swift

First let’s introduce some terms here:

UIButton.Configuration:

It specifies the behaviour and appearance of the button. Read more here.

There are 4 types of configurations:

1. Tinted- Gives a tinted background

2. Filled- Gives a filled background

3. Gray- Gray background

4. Plain- Plain old button

var config = UIButton.Configuration.filled()

config = UIButton.Configuration.tinted()

config = UIButton.Configuration.gray()

config = UIButton.Configuration.plain()

UIButton.Configuration allows you to set several custom properties. Let’s go through them one by one:

cornerStyle :

It helps set the corner radius properties of the button.

Available Styles are:

1. Fixed

2. Dynamic

3. Small/Large/Medium

4. capsule

config.cornerStyle = .fixed

config.cornerStyle = .dynamic

config.cornerStyle = .small / .large / .medium

config.cornerStyle = .capsule

title, attributedTitle:

Set the title easily using this property. attributedTitle uses the new AttributedString introduced in iOS 15.0

Set the title easily using this property. attributedTitle uses the new AttributedString introduced in iOS 15.0 subtitle:

Set the subtitle of the button using this property.

Set the titlePadding property to adjust spacing between title and subtitle.

config.title = "Hey There!" var attText = AttributedString.init("Hey There!")

attText.obliqueness = 0.2 // To set the slant of the text

attText.font = UIFont.systemFont(ofSize: 16.0, weight: .bold)

config.attributedTitle = attText config.subtitle = “iOS Developer”

Example

buttonSize:

To set the size of the button to predefined values

config.buttonSize = .large

config.buttonSize = .small

config.buttonSize = .medium

config.buttonSize = .mini

Finally assign this configuration to the button.

let button = UIButton.init(type: .system)

button.configuration = config

Voila!! The image below shows the configuration in title and size in the subtitle of the buttons:

Style and configuration

Image:

Now the flexibility to set the image padding and position is in our hands.

config.image = UIImage.init(systemName: “snowflake”)

config.imagePlacement = .trailing

config.imagePadding = 5

Image

showsActivityIndicator:

It shows an activity indicator in place of the image in the button.

You can simply choose the image’s placement and padding to show this.

config.imagePadding = 5

config.showsActivityIndicator = true

Note: This doesn’t require you to set an image in the button before

configurationUpdateHandler:

It is a closure to update the configuration of a button. Read here

Inside the configurationUpdateHandler, we can change the button’s configuration to change it’s properties.

In line 5 we use the new titleTextAttributesTransformer to update the attributed title. Read here.

In line 11 we can use the new imageColorTransformer to update the color of the image in the button. And finally we assign this configuration to the button.

Where to go from here?

Definitely apple documentation for UIButton.Configuration. Gives a great overview of the whole thing and play around with the button.

Connect with me on:

LinkedIn: Keerthika Priya