May 5, 2020

How to design the floating action button in ios swift.

By Mohit Agrawal

Create the floating action button (FAB) in your ios app.

fab ios

In this blog, I will guide you on basic design and animation principles in iOS. We will see the easiest way of designing the floating action button menu (FAB). Let’s start the coding part.

First, create a new blank Xcode project and do the initial setup. Open the main storyboard and create four buttons at the bottom right side. Dimension for the main button will be 60*60 and for remaining, one will be 50*50. Set the proper constraints to achieve the required design.

No need to worry about assets and GitHub source code. You can download the image assets code and source code from the link given at the end of the article.

If the UI part is done then in the viewController create the outlets for all four buttons and name them as shown here:

fab buttons outlet

These outlets will be using to get the current frame of the buttons. Now create IBAction for more button and name it didClickMoreButton{}.

@IBAction func didClickMoreButton(_ sender: UIButton) {
        //Write collapse and expand animation code here.
    }

If you run the app at this stage then you will find that all the four buttons are above each other in a vertical line. So now if you press the main menu button then it should be collapsed. We can achieve this by changing the current frame of three buttons equal to the current frame of the main button. Let’s write code for that.

@IBAction func didClickMoreButton(_ sender: UIButton) {
                incognitoButton.center = moreButton.center
                mobileButton.center = moreButton.center
                mailButton.center = moreButton.center
                
                incognitoButton.alpha = 0
                mobileButton.alpha = 0
                mailButton.alpha = 0
    }

Using the center property of any view we can calculate the center x and y points of any view. As you can see in the above code, I am setting the center of all three buttons equal to the center of more buttons.

Now if you run the code at this stage you will find that menu buttons are collapsing as expected when you are clicking again then it is not expanding. So to achieve that declare a global flag variable and name it isButtonMenuOpen and update the code like this.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var moreButton: UIButton!
    @IBOutlet weak var mobileButton: UIButton!
    @IBOutlet weak var incognitoButton: UIButton!
    @IBOutlet weak var mailButton: UIButton!
    
    
    var incognitoButtonCenter: CGPoint!
    var mobileButtonCenter: CGPoint!
    var mailButtonCenter: CGPoint!
    
    var isButtonMenuOpen = false

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        incognitoButtonCenter = incognitoButton.center
        mobileButtonCenter = mobileButton.center
        mailButtonCenter = mailButton.center
    }

    @IBAction func didClickMoreButton(_ sender: UIButton) {
        if isButtonMenuOpen {
                incognitoButton.center = moreButton.center
                mobileButton.center = moreButton.center
                mailButton.center = moreButton.center
                
                incognitoButton.alpha = 0
                mobileButton.alpha = 0
                mailButton.alpha = 0
           
                isButtonMenuOpen = false
        } else {
                incognitoButton.center = incognitoButtonCenter
                mobileButton.center = mobileButtonCenter
                mailButton.center = mailButtonCenter
                
                incognitoButton.alpha = 1
                mobileButton.alpha = 1
                mailButton.alpha = 1
         
                isButtonMenuOpen = true
        }
}

After writing the above code block, both collapse and expansion of the menu button will work.

Animation and shadow

But where are animations and shadows? We will do it now. For the shadow make a UIButton extension and update the viewDidLoad():

override func viewDidLoad() {
        super.viewDidLoad()
        moreButton.applyShadow()
        incognitoButton.applyShadow()
        mobileButton.applyShadow()
        mailButton.applyShadow()
    }
extension UIButton {
    func applyShadow() {
        layer.shadowOpacity = 0.6
    }
}

Let’s implement the animation now. We will be using simple UIView.animate() property. Update the didClickMoreButton() code with below code block.

@IBAction func didClickMoreButton(_ sender: UIButton) {
        if isButtonMenuOpen {
            UIView.animate(withDuration: 0.3) {
                self.incognitoButton.center = self.moreButton.center
                self.mobileButton.center = self.moreButton.center
                self.mailButton.center = self.moreButton.center
                
                self.incognitoButton.alpha = 0
                self.mobileButton.alpha = 0
                self.mailButton.alpha = 0
            }
            
            isButtonMenuOpen = false
        } else {
            UIView.animate(withDuration: 0.3) {
                self.incognitoButton.center = self.incognitoButtonCenter
                self.mobileButton.center = self.mobileButtonCenter
                self.mailButton.center = self.mailButtonCenter
                
                self.incognitoButton.alpha = 1
                self.mobileButton.alpha = 1
                self.mailButton.alpha = 1
            }
            isButtonMenuOpen = true
        }
    }

That’s all folks. Now run the app and enjoy the floating action button with shadow and animation. Use this FAB anywhere in your app. Download the source code from here.

Happy coding !!!
Check more post like this:
Value type and Reference type in iOS swift.
How to design custom switch in iOS swift?

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

  1. What is the difference between frame and bounds?

    In simple, for any view bounds are coordinates with respect to its own space but any view frames are coordinates with respect to its the parent view.