Surely you have seen some applications in which there is a button that, when pressed, displays a menu with other buttons (which we could call secondary). The main button, is usually called FAB or Float Action Button. In this article we are going to see how we can create a FAB Button with Swift, which when pressed, displays (with an animation) a menu.

In addition, we will develop this button as a Swift package, so that we can share it and include it as a dependency in different applications. We will do this through Swift Package Manager, which as we saw in a previous article, is Apple’s dependency manager.

The code for this article can be found on GitHub. Keep in mind there may be some modifications in the repository code compared to the one described here, since new functionalities can be added, others can be improved and small errors can be corrected.

Swift Package Creation

First we create the Swift package. To do this, from the Xcode menu we follow the New > Swift Package path and give it the name of FABButton (remember to activate version control, Create Git repository on my Mac, to be able to upload it later to a repository on the network).

FAB Button Swift Package Manager
Creation of the Swift package.

We will define this project to be used on iOS10+ platforms. We will indicate this in the Package.swift file (as explained in a previous article):

Component design

The component design will be as follows:

FAB Button Swift Package Manager
Design of the component with its subcomponents.

The main view is made up of a UIStackView component, which will contain the main button (UIButton component) and a second UIStackView component, which will be the one containing the secondary buttons, each of which will be labeled (with a UILabel component). The fact of using UIStackView components is due both to its ability to distribute the elements it contains and to adapt to its content.

Main view development

The main view is created in the Sources/FABButton directory with the name FABView. Initially, in this view we will define and place the components that make it up: the main button and the UIStackView component that will contain the secondary buttons.

In this code we have done the following:

  • First we instantiate a UIButton component and a UIStackView component.
  • Then we establish a custom initializer to indicate the image of the main button:

In the same way as the FABStackView class, we also declare this initializer as public, to be able to access it once we import it as a dependency. Inside the initializer we establish the image of the button and associate its target (mainButtonAction). Then we call the configure() method, which will be the one that configures the different components and places them in the view:

In the configuration of the UIStackView component, we have indicated that the elements (secondary buttons) that it contains are arranged vertically, align to the right (trailing), fill all the space (the UIStackView component will grow when you add buttons) and that there is a separation of 16).

Main button configuration

The main button we have created, mainButton, is a simple square button with an image inside. To make it look like a FAB button we have to make it round and shaded.

For this, what we will do is create a subclass of UIButton with the characteristics that we want to give the button. What we do is:

  • From the Xcode menu we create a new file (File > New > File…) and select Cocoa Touch Class.
FAB Button Swift Package Manager
  • When the options window for the new file appears (Choose options for your new file:), we indicate the name of the FABMainButton file, which will be a subclass of UIButton:
FAB Button Swift Package Manager
  • By default, the code that appears in this class is:
  • First we will add the initializers:

At the end of the init method the configure() method is called, which will be where we will customize the button.

  • As you can see, what we do is give the button background a white color, make it round by indicating that the radius of the corners is 25 (half the size of the button, which is 50) and, as we are using auto layout, we indicate that translatesAutoresizingMaskIntoConstraints = false.
  • At the end of this method the method that will create the button shadow is called:

Once this subclass of UIButton is created, we go to the FABView class and change the way we have installed the main button, from:

To:

Creating the secondary buttons

The menu components consist of a button (with a personalized image) and a label with the button’s identifier. To create these components we will use a UIView subclass in which we will define the button and the label.

  • From the Xcode menu we create a new file (File > New > File…) and select Cocoa Touch Class (as we have done with the FABMainButton component).
  • When the options window for the new file appears (Choose options for your new file: ), we indicate the name of the file FABSecondaryButton, which will be a subclass of UIView:
FAB Button Swift Package Manager

By default, the code that appears in this class is:

Initially we create a UIButton component, a UILabel component and a UIView component on which we will place the UILabel component (and that will allow us to give the shadow effect to the label):

To make the labels adapt to the width of their content, but including a certain margin, instead of using the UILabel component directly, we make a subclass of this (which we call FABInsetLabel). In this subclass, what we do is modify the width of the label adding a certain value that we can specify:

As pressing the secondary button should produce an action, we will establish a protocol to pass the action and a delegate within the class:

In addition, we will create a custom initializer that allows us to pass the image of the button, the text of the label and the action to be performed. To simplify all these parameters, we will use typealias to unify these parameters and instantiate a variable with this type:

Now we can complete the class that we have created, which will be as follows (the parts that we had previously prepared have been simplified):

Creating the secondary button menu

We will create the secondary button menu, as we have indicated in the component design, with a UIStackView component. For this, what we will do is create a subclass of UIStackView with the characteristics that we want to give it. What we do is:

  • From the Xcode menu we create a new file (File > New > File…) and select Cocoa Touch Class (as we have done with the FABMAinButton component).
  • When the options window for the new file appears (Choose options for your new file: ), we indicate the name of the FABStackView file, which will be a subclass of UIStackView:
FAB Button Swift Package Manager

By default, the code that appears in this class is:

First we add the initializer and configuration of the UIStackView component:

Basically, what we do is say that the elements that we introduce in this component will be placed vertically, aligned to the right and with a separation of 12.

To add secondary buttons we will add two methods: the first will add a button and the second will configure them all in the view. We will place these two methods in an extension to structure the code:

Since we will make animations to add and remove buttons, we will keep two lists (arrays) with these buttons: the one that contains the added buttons and that is not modified later (secondaryViews), and the one that contains a copy of these buttons to add or delete them. and generate the animation (secondaryButtons):

Animation of secondary buttons when appearing and disappearing

To make the presentation and hiding of the secondary buttons a little more attractive, we will add animations both when showing and hiding them.

Presentation of the buttons

The buttons will be presented one by one, and a bounce effect will be sought in said appearance. We will do this by concatenating three animations in a row on the same button:

  • First, we transform the button and label view with a scale of 0.001.
  • The first animation transforms it with a scale of 1.1 in 0.075 seconds. In other words, the button becomes 10% larger than its final size.
  • The second animation scales it to 0.9 in 0.03 seconds (90% of its final size).
  • Finally, we transform it to its real size in 0.03 seconds.

All this, together, gives a rebound effect on the appearance of the button. In addition, when the final animation is completed, this method is recursively called, so that the buttons are presented one by one (see how at the beginning of the method we use the copy of the buttons to extract and delete them at the same time as the we show).

Hiding the buttons

To hide the buttons we will do something similar to what was previously mentioned for your presentation, but for now we will only use an animation, in which for 0.075 seconds it goes from the original size to a scale of 0.001, and then eliminate the button from the view:

Adoption of the FABSecondaryButtonDelegate protocol

Since the secondary buttons pass their action through a delegate and the FABSecondaryButtonDelegate protocol, we have to make the FABStackView class adopt the method of this protocol (we do it using an extension to have the code ordered):

That is, when we click on a secondary button, this method will be executed. Two steps are taken at this point:

  • The action is first passed through a delegate to the class that has instantiated FABStackView (that is, the main FABView class). To do this, at the beginning of the FABStackView class we have to add a protocol delegate:
  • Second, we call the dismissButtons method, so that the secondary buttons are hidden.

In a simplified way (in the methods), the code of this class is as follows:

To finish, we have to make the FABView class also adopt the FABSecondaryButtonDelegate protocol, so that it can execute pass the action of the right button that is selected:

Now we simply have to upload all the code entered to a repository (in this case, GitHub) so that it is available to be used as a dependency in any application.

How to import the FAB Button into a project

To import the Swift package that contains the FAB Button, the first thing we do is create a new project in Xcode.

Once created, we go to the menu of Xcode File > Swift Packages > Add Package Dependency…

FAB Button Swift Package Manager

Then we indicate the URL of the Swift package:

FAB Button Swift Package Manager

And we indicate the version or branch that we want to add:

FAB Button Swift Package Manager

Once added, in the navigation menu we can see the already imported package:

FAB Button Swift Package Manager

Now, in the ViewController class we only need to import the component, configure the view and add the buttons. For example, the following code shows a button with four secondary buttons:

If we now run this application, we can check the operation of the FAB Button.

Conclusion

In this article we have seen how to create a FAB Button that displays a secondary menu and, in addition, create it as a Swift package to be able to upload it to the repository and share it with other projects. Since Swift Package Manager has been incorporated into Xcode 11, this process has become much easier.


2 Comments

waterfallmagazine.com · 6 August 2020 at 15:36

https://waterfallmagazine.com
Thanks for finally writing about > Create a FAB Button with Swift – Thinking In Swift < Liked it!

How to build a maps and routes app with MapKit - Thinking In Swift · 6 June 2020 at 15:19

[…] will be done through a button with a drop-down menu, which can be downloaded as a Swift package (FABbutton). To do this we follow these […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow on Feedly
shares