Insert a Floating Action Button on Uitableview in Swift

Insert a floating action button on UITableView in Swift

If you currently using tableViewController then no , you must subclass UIViewController add UItableView and your floating button to it

Or you may override scollviewDidScroll and change button y according to tableview current offset

drag scrollview as IBOutlet and set it's delegate to the viewController

   func scrollViewDidScroll(_ scrollView: UIScrollView) {

       let  off = scrollView.contentOffset.y

       btn.frame = CGRect(x: 285, y:   off + 485, width: btn.frame.size.width, height: btn.frame.size.height)
}

code snapshot

in action

see in action

How to put a floating action button in a tableView in swift in iOS?

Here is the complete code for it. It has been done without using storyboard.

TableView:

import UIKit

class ViewController: UIViewController, UITableViewDataSource {

    let nameArray = ["India","Usa","UK"]

    let tableView: UITableView = {
        let table = UITableView()
        table.translatesAutoresizingMaskIntoConstraints = false
        return table
    }()

    let btnFloating : UIButton = {
        let floating = UIButton()
        floating.translatesAutoresizingMaskIntoConstraints = false
        floating .backgroundColor = .cyan
        floating.setTitle("ADD", for: .normal)
        return floating
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(tableView)
        tableView.addSubview(btnFloating)
        tableView.dataSource = self
        setuoConstrain()
        //Set the action of add button
        btnFloating.addTarget(self, action: #selector(btnAddTapp(sender:)), for: .touchUpInside)
    }

    func setuoConstrain(){
        tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        //Constrain For Button :
        btnFloating.heightAnchor.constraint(equalToConstant: 64).isActive = true
        btnFloating.widthAnchor.constraint(equalToConstant: 64).isActive = true
        btnFloating.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24).isActive = true
        btnFloating.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -36).isActive = true

    }

    //This function is for add button . What action you want , can put inside this function
    @objc func btnAddTapp(sender: UIButton){
        print("add button tapp")
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return nameArray.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let  nameCell = NameTableCell(style: .default, reuseIdentifier: "NameTableCell")
        nameCell.lblName.text = nameArray[indexPath.row]
        return nameCell
    }
}

TableViewCell:

import UIKit

class NameTableCell: UITableViewCell {

    let lblName: UILabel = {
        let name = UILabel()
        name.translatesAutoresizingMaskIntoConstraints = false
        return name
    }()

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.addSubview(lblName)

        constrain()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func constrain(){
        lblName.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true

    }
}

Programmatical Floating Button over tableView

That's because self.view = UITableView inside UITableViewController , so you need to implement scrollViewDidScroll

class TableViewController: UITableViewController {

    let button = UIButton(frame: CGRect(x: 150, y: 550, width: 75, height: 75))

    override func viewDidLoad() {
        super.viewDidLoad()

        button.backgroundColor = .yellow
        button.setTitle("To Jobs", for: .normal)
        self.view.addSubview(button)

    }

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {

        button.frame.origin.y = 550 + scrollView.contentOffset.y
    }

}

---

Related Topics