How to Add a UIActivityIndicatorView to a UIButton in Swift

As a developer, it is important to create user-friendly interfaces that provide feedback to the user during different processes. One common feedback element is the UIActivityIndicatorView, which indicates that a process is in progress. In this article, we will learn how to add a UIActivityIndicatorView to a UIButton in a Swift iOS app.

Step 1: Create a UIButton

The first step is to create a UIButton that will trigger the action that will require the UIActivityIndicatorView. You can create the UIButton in Interface Builder or programmatically in the view controller's viewDidLoad() method. Here is an example of how to create a UIButton programmatically:

Copycopy code to clipboard
1let myButton = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
2myButton.setTitle("Start Process", for: .normal)
3myButton.backgroundColor = .blue
4myButton.addTarget(self, action: #selector(startProcess), for: .touchUpInside)
5self.view.addSubview(myButton)

Step 2: Create a UIActivityIndicatorView

The next step is to create a UIActivityIndicatorView that will be added to the UIButton when the process starts. You can create the UIActivityIndicatorView in Interface Builder or programmatically in the view controller's viewDidLoad() method. Here is an example of how to create a UIActivityIndicatorView programmatically:

Copycopy code to clipboard
1let activityIndicator = UIActivityIndicatorView(style: .whiteLarge)
2activityIndicator.color = .gray
3activityIndicator.frame = CGRect(x: myButton.frame.width - 30, y: myButton.frame.height/2 - 15, width: 30, height: 30)
4activityIndicator.hidesWhenStopped = true
5myButton.addSubview(activityIndicator)

In this example, we create a UIActivityIndicatorView with a white large style and gray color. We set the frame of the UIActivityIndicatorView to be at the right side of the UIButton, centered vertically. We also set the hidesWhenStopped property to true so that the UIActivityIndicatorView will be hidden when it is not animating.

Step 3: Add Action to UIButton

The next step is to add an action to the UIButton that will trigger the process that requires the UIActivityIndicatorView. In this example, we will create a startProcess() function that will simulate a process that takes some time to complete. Here is an example of how to add an action to the UIButton:

Copycopy code to clipboard
1@objc func startProcess() {
2    activityIndicator.startAnimating()
3    myButton.setTitle("", for: .normal)
4    DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
5        self.activityIndicator.stopAnimating()
6        self.myButton.setTitle("Start Process", for: .normal)
7    }
8}

In this example, we start the animation of the UIActivityIndicatorView when the process starts. We also change the title of the UIButton to an empty string to indicate that the process is in progress. We simulate a process that takes three seconds to complete using DispatchQueue.main.asyncAfter(). After the process is completed, we stop the animation of the UIActivityIndicatorView and change the title of the UIButton back to "Start Process".