How do I add a floating UIButton to Table View Controller in Xcode?

Question

I am trying to add a 'close' button to a table view controller page that is displayed via popup. I just want the x (close) button to remain in the top left corner when the user scrolls down through the page. I have found code to add the floating action button using cocoapods but that's not what I want. Any help would be great.

I have tried to add a UIView outside of the table view so that I could constrain the button to that but table views do not let you add UIViews outside of it.

score 0 · Answer 1 · answered Oct 07 '19 at 09:27

You can't add floating UIButton to UITableViewController, but you have three other options:

Change UITableViewController to UIViewController and add UITableView and UIButton to view controller
Create UIViewController container and add your UITableViewController as embedded, child view controller. Then you can add UIButton to container
Add UIButton to UINavigationController, but it will work only if you have navigation controller:) also, in this approach, you need to remove button manually, when you close your table view controller.

Thanks Michcio, I was afraid of that answer :) I already have my pages built which took me a long time. but I think your option 1 is the best option. I will just have to re build them using UIViewControllers and add the table view to it. — DJL, Oct 07 '19 at 09:34

inexcitus · Answer 2 · 2019-10-07T10:33:39.397

If you embed the UIButton in a UIView, then you can use a UITableVIewController.

Here is the stripped down code of one of my UITableViewController instances. There is a UITableView and on the bottom of the page there is a UIView with a UIButton on it:

class ViewController : UITableViewController
{
    @IBOutlet private weak var floatingView: UIView!

    override func viewDidLoad()
    {
        super.viewDidLoad()

        self.initSaveView()
    }

    override func viewWillLayoutSubviews()
    {
        super.viewWillLayoutSubviews()

        self.tableView.bringSubviewToFront(self.floatingView)
    }

    fileprivate func initSaveView()
    {
        self.tableView.contentInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: self.floatingView.frame.height, right: 0.0)
        self.tableView.scrollIndicatorInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: self.floatingView.frame.height, right: 0.0)

        self.floatingView.frame.origin.y = self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height
        self.floatingView.autoresizingMask = .flexibleTopMargin
        self.view.addSubview(self.floatingView)
    }
}

extension ViewController
{
    override func scrollViewDidScroll(_ scrollView: UIScrollView)
    {
        floatingView.frame = CGRect(x: self.floatingView.frame.origin.x, y: self.tableView.bounds.origin.y + self.tableView.frame.height - floatingView.frame.height, width: self.floatingView.frame.size.width, height: self.floatingView.frame.size.height)
    }
}

Hopefully this will get you started. The floatingView was added using the Interface Builder (Simply drag a UIView to the top of the UITableViewController bar, then add your Outlet).

Thanks inexcitus. I tried that but unfortunately it didn't work. The UIView moves when I scroll. — DJL, Oct 07 '19 at 11:09
Did you change the autoresizingMask? If you want the button to stay on top (instead of the bottom of the page), then you may want to try setting the autoResizingMask to `.flexibleBottomMargin`. — inexcitus, Oct 07 '19 at 11:16
Yes I tried that I'm afraid and it still scrolls with the screen. — DJL, Oct 07 '19 at 11:42

How do I add a floating UIButton to Table View Controller in Xcode?

2 Answers2