Learn how to create a button with a built-in spinner
One of the most crucial UI components in mobile development is the button. In mobile app design, we will essentially require a loading indication to improve user experience by ensuring that the user is aware that the state has changed or request is being processed.
In this article, we are going to learn how:
- To create a custom UIButton class with a built-in loading indicator using UIActivityIndicatorView
- To use the custom button in a view controller. In this example, we will be using storyboard.
Please take note that this project is developed in Swift 5 with iOS13+ and Xcode 13.4.
Below is the final output of the app that we are going to achieve from this tutorial.
Create a new file from “Cocoa Touch Class” template, then choose the Subclass as “UIButton” and name it “LoaderButton.”
Click “Next,” and add the below code to the file:
Below is the explanation of each important points added to this file:
- Create a custom button by subclassing the
- Add an
UIActivityIndicatorViewas the loading indicator, namely as “spinner.”
- Add an
isLoadingvariable to keep the state of the button. Each time this variable is updated, it will immediately call the
- Call the
setupView()once the button is initialized.
- The loading indicator will always hide when it is stopped animating.
- Add the loading indicator as the button subview and set the constraint to the middle of the
updateView()will keep the button state. If it is in the loading state, the title and image will be hidden (transparent) and the loading indicator is shown, and vice versa.
Great. Now, the main part is done. Let’s try to add it to the view controller.
In this section, we will add the custom button to the storyboard and simply set the constraints.
- Click the + button at the top right to choose the available controls from the Object Library.
- Find the Button and drag it into the view controller.
- Select the Identity Inspector tab at the top right, and change the Class to our
LoaderButtonwe just created.
4. Set the constraints with center vertically, horizontal padding to 32, and height equal to 54.
5. Now, we need to customize the button look a bit. Set the button title to “Demo Button,” change the background color to teal and the text color to white as shown in the image below:
- Select storyboard, and open the Assistant Editor.
- Connect the button to the code editor as an
IBActionby holding the control key and dragging the button to the editor.
- Select the Connection as Action, then change the Type to
LoaderButtonand enter the Name field as
onClickedButton, add the below code to simulate a request. The code will activate the spinner and wait for two seconds to finish. Once finished, the spinner will disappear and the button state will back to normal.
Congratulations. Now, we have completed this project and it is ready to run.
The complete source code can be downloaded from my GitHub repository.
Try to implement it into your projects and improve the code by adding more features to it.
Thanks for reading, and happy coding!