Adding a view over the tableview

Question

I have to create a screen that looks like this.

I have almsot accomplished it using a UITableViewController. The reason I went that route instead of using a UIViewController along with a UIScrollView is that, the table view in the middle is static and only UITableViewControllers can have static table views. Anyway my current result is this.

The table's header view contains the labels at the top and the footer view contains the map view.

I created a separate UIView subclass with a nib called ButtonView for the two buttons.

import UIKit

class ButtonView: UIView {

    @IBOutlet var view: UIView!
    @IBOutlet weak var declineButton: UIButton!
    @IBOutlet weak var acceptButton: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)

        NSBundle.mainBundle().loadNibNamed("ButtonView", owner: self, options: nil)
        self.bounds = view.bounds
        self.addSubview(self.view)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        NSBundle.mainBundle().loadNibNamed("ButtonView", owner: self, options: nil)
        self.addSubview(self.view)
    }
}

And I tried adding it to the table view controller's view and then tableView but both times it gets added to the scroll view instead. I want those buttons to be fixed to the bottom. So I added them to the window.

class TableViewController: UITableViewController {

    var buttonView: ButtonView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 35, right: 0)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        buttonView = ButtonView(frame: CGRect(x: 0, y: view.frame.size.height - 35, width: view.frame.width, height: 35))
        UIApplication.sharedApplication().keyWindow!.addSubview(buttonView)
    }
}

But as you can see from the screenshot above, the buttons' width is off. They haven't resized properly to fit the screen. I have set all the necessary auto layout constraints in the ButtonView.

How can I get them to resize and fit the screen properly?

Answer 1

I would suggest going a different route. Put your UITableviewController in a container view in a normal view controller. It gives you the best of both worlds. Your parent VC can have whatever views you want, and the contained UITableviewController manages your static table view for you.

Here is a link to a sample project doing exactly that: (in Objective-C, but the concept and layout is identical.)

https://github.com/DuncanMC/test

EDIT:

As @Gordonium alludes to in his answer, adding views in code but not setting constraints rarely gives the results you want. If you add views in code and you're using AutoLayout then you also need to add a set of constraints that specifies the size and spacing of your views. It's usually easier to set up the views and their constraints using IB .