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

时间:2018-08-22 13:43:19

标签: ios swift uitableview floating-action-button

I am trying to use an floating action button in iOS to impose on a table view so that I can add items in the tableview with that . please help me with the code.

2 个答案:

答案 0 :(得分:0)

这是完整的代码。无需使用情节提要即可完成。

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

    }
}

答案 1 :(得分:0)

func setupFloatingActionButton() {

    Floaty.global.button.buttonImage = UIImage(named: "icon-social")
    Floaty.global.button.buttonColor = UIColor.white
    let facebookItem = FloatyItem()
    facebookItem.icon = UIImage(named: "icon-facebook")
    facebookItem.title = "Facebook"
    Floaty.global.button.addItem(item: facebookItem)

    let gmailItem = FloatyItem()
    Floaty.global.button.addItem("Gmail", icon: UIImage(named: "icon-gmail"), handler: {_
        in
        print("Gmail Button tapp")
    })   

    let twitterItem = FloatyItem()
    Floaty.global.button.addItem("Twitter", icon: UIImage(named: "icon-twitter"), handler: {_ in
        print("twitter Button tapp")
    })

    //Floaty.global.button.animationSpeed = 0.50
    Floaty.global.button.openAnimationType = .fade
    //Floaty.global.button.rotationDegrees = 90.00
    Floaty.global.show()
}