Swift: Floating Plus button via Tableview using StoryBoard

Question

How to add a floating button to Facebook App Rooms using storyboards?

I can not drag the UIView onto the table view, which I only know.

Answer 1

The code for this button is below:

• Adds a shadow
• Makes the button round
• Adds animation to attract attention.

Swift 4.2: FULL CONTROLLER IMPLEMENTATION

import Foundation public class FloatingButtonViewController: UIViewController { private var floatingButton: UIButton? // TODO: Replace image name with your own image: private let floatingButtonImageName = "NAME OF YOUR IMAGE" private static let buttonHeight: CGFloat = 75.0 private static let buttonWidth: CGFloat = 75.0 private let roundValue = FloatingButtonViewController.buttonHeight/2 private let trailingValue: CGFloat = 15.0 private let leadingValue: CGFloat = 15.0 private let shadowRadius: CGFloat = 2.0 private let shadowOpacity: Float = 0.5 private let shadowOffset = CGSize(width: 0.0, height: 5.0) private let scaleKeyPath = "scale" private let animationKeyPath = "transform.scale" private let animationDuration: CFTimeInterval = 0.4 private let animateFromValue: CGFloat = 1.00 private let animateToValue: CGFloat = 1.05 public override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) createFloatingButton() } public override func viewWillDisappear(_ animated: Bool) { guard floatingButton?.superview != nil else { return } DispatchQueue.main.async { self.floatingButton?.removeFromSuperview() self.floatingButton = nil } super.viewWillDisappear(animated) } private func createFloatingButton() { floatingButton = UIButton(type: .custom) floatingButton?.translatesAutoresizingMaskIntoConstraints = false floatingButton?.backgroundColor = .white floatingButton?.setImage(UIImage(named: floatingButtonImageName), for: .normal) floatingButton?.addTarget(self, action: #selector(doThisWhenButtonIsTapped(_:)), for: .touchUpInside) constrainFloatingButtonToWindow() makeFloatingButtonRound() addShadowToFloatingButton() addScaleAnimationToFloatingButton() } // TODO: Add some logic for when the button is tapped. @IBAction private func doThisWhenButtonIsTapped(_ sender: Any) { print("Button Tapped") } private func constrainFloatingButtonToWindow() { DispatchQueue.main.async { guard let keyWindow = UIApplication.shared.keyWindow, let floatingButton = self.floatingButton else { return } keyWindow.addSubview(floatingButton) keyWindow.trailingAnchor.constraint(equalTo: floatingButton.trailingAnchor, constant: self.trailingValue).isActive = true keyWindow.bottomAnchor.constraint(equalTo: floatingButton.bottomAnchor, constant: self.leadingValue).isActive = true floatingButton.widthAnchor.constraint(equalToConstant: FloatingButtonViewController.buttonWidth).isActive = true floatingButton.heightAnchor.constraint(equalToConstant: FloatingButtonViewController.buttonHeight).isActive = true } } private func makeFloatingButtonRound() { floatingButton?.layer.cornerRadius = roundValue } private func addShadowToFloatingButton() { floatingButton?.layer.shadowColor = UIColor.black.cgColor floatingButton?.layer.shadowOffset = shadowOffset floatingButton?.layer.masksToBounds = false floatingButton?.layer.shadowRadius = shadowRadius floatingButton?.layer.shadowOpacity = shadowOpacity } private func addScaleAnimationToFloatingButton() { // Add a pulsing animation to draw attention to button: DispatchQueue.main.async { let scaleAnimation: CABasicAnimation = CABasicAnimation(keyPath: self.animationKeyPath) scaleAnimation.duration = self.animationDuration scaleAnimation.repeatCount = .greatestFiniteMagnitude scaleAnimation.autoreverses = true scaleAnimation.fromValue = self.animateFromValue scaleAnimation.toValue = self.animateToValue self.floatingButton?.layer.add(scaleAnimation, forKey: self.scaleKeyPath) } } } 

Answer 2

A little late, but maybe it can help someone. You can do this very easily with a software program. Just create an instance of the button, set the desired property of the button. Preferably use constraints over frame to force the button to display in the same position on each screen size. I am posting a code that will make the button round. Play with the value of the restrictions to change the position and size of the button.

Swift 3

 var roundButton = UIButton() override func viewDidLoad() { super.viewDidLoad() self.roundButton = UIButton(type: .custom) self.roundButton.setTitleColor(UIColor.orange, for: .normal) self.roundButton.addTarget(self, action: #selector(ButtonClick(_:)), for: UIControlEvents.touchUpInside) self.view.addSubview(roundButton) } override func viewWillLayoutSubviews() { roundButton.layer.cornerRadius = roundButton.layer.frame.size.width/2 roundButton.backgroundColor = UIColor.lightGray roundButton.clipsToBounds = true roundButton.setImage(UIImage(named:"your-image"), for: .normal) roundButton.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ roundButton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -3), roundButton.bottomAnchor.constraint (equalTo: self.view.bottomAnchor, constant: -53), roundButton.widthAnchor.constraint(equalToConstant: 50), roundButton.heightAnchor.constraint(equalToConstant: 50)]) } /** Action Handler for button **/ @IBAction func ButtonClick(_ sender: UIButton){ /** Do whatever you wanna do on button click**/ } 

Answer 3

Place the table view in the view controller. After that, you can add a button at the top of the table view.

Answer 4

Following @ Kunal Kumar's answer, it works with UIScrollView and UIView , but it does not work on UITableView . I found it easy to work with a UITableView , you only need to add one line code. Thank you so much @Kunal Kumar

in viewDidLoad , change self.view.addSubview(roundButton) to self.navigationController?.view.addSubview(roundButton) and it will work!

By the way, I think we need to add super.viewWillLayoutSubviews() to the viewWillLayoutSubviews() method.

below is all the code mentioned above

Swift 3

 // MARK: Floating Button var roundButton = UIButton() func createFloatingButton() { self.roundButton = UIButton(type: .custom) self.roundButton.setTitleColor(UIColor.orange, for: .normal) self.roundButton.addTarget(self, action: #selector(ButtonClick(_:)), for: UIControlEvents.touchUpInside) //change view to navigationController?.view, if you have a navigationController in this tableview self.navigationController?.view.addSubview(roundButton) } override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() roundButton.layer.cornerRadius = roundButton.layer.frame.size.width/2 roundButton.backgroundColor = UIColor.lightGray roundButton.clipsToBounds = true roundButton.setImage(UIImage(named:"ic_wb_sunny_48pt"), for: .normal) roundButton.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ roundButton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -3), roundButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -53), roundButton.widthAnchor.constraint(equalToConstant: 50), roundButton.heightAnchor.constraint(equalToConstant: 50)]) } 

Answer 5

This is simply because your UIButton is under a UITableView, move it to the storyboard tree so that it looks like this:

 | View |-- Table View |-- Button