UITableViewController layout not working

Question

I am trying to position UITableView to the left side of the app, whole height but taking just 1 / 3 of the available width with the code like this:

class ViewController: UIViewController {
    var tableController: UITableViewController?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        tableController = UITableViewController();

        addChildViewController(tableController!)
        self.view.addSubview(tableController!.view)
        tableController!.didMove(toParentViewController: self)
    }

    override func viewDidLayoutSubviews() {
        tableController!.view.backgroundColor = UIColor.red

        tableController!.view.frame = CGRect(
            x: 0,
            y: 0,
            width: view.bounds.width / 3,
            height: view.bounds.height);

        //tableController!.view.frame = view.bounds
    }
}

And it looks like this:

And I don't get why the lines are not correctly aligned horizontally and it looks like being cut on the right.

If I give the view controller full width / height by uncommenting the last line, it looks better:

score 0 · Accepted Answer · answered Jul 09 '17 at 17:23

0

Question 1

Are you properly constraining the TableView in the parent view? You can set proportional constraints. Please see this post on the topic: AutoLayout to keep view sizes proportional

Side Note

For iOS 11, constraining views to layout guides will trigger warnings in your IDE. Consider embedding UI components inside another view that takes up the entire width of the parent view using Auto-resizing Masks. See the topic here: Xcode Auto Layout Resizing Issue

answered Jul 09 '17 at 17:23

Mark Filter

353
5
8

Is there anything wrong with avoiding AutoLayout and relying only on **viewDidLayoutSubviews** and "manual" positioning? – aguyngueran Jul 09 '17 at 17:24
AutoLayouts, Constraints, and Auto-Resizing Masks are the fundamental way iOS addresses laying out views...and making it look appropriate for all screen dimensions. Without utilizing these tools, you will (1) not be following best practices, (2) losing out on the fundamental benefits that iOS offers, and (3) making your life much more difficult in the long run. Please refer to the AutoLayout Guide here: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html – Mark Filter Jul 09 '17 at 17:31
Again, even if AutoWhatever is the Holy Grail of the layout, I still would like to know what is wrong with so damn simple code, please. – aguyngueran Jul 09 '17 at 17:43
The divider lines being cut off on the right hand side is exactly how iOS handles the lines. You can implement your own divider by creating a custom UITableViewCell and set the divider to none in the inspector for the TableView. By implementing your own custom UITableViewCell, you would fix all of your problems. – Mark Filter Jul 09 '17 at 17:49
But the lines are not cut in the full width version. Are you saying that for lower screen sizes, if changes how it renders these lines and this effect is not caused by the layout problem? – aguyngueran Jul 09 '17 at 17:51
You must be right, I have run full width version on iPhone 5s simulator and the lines are also cut. Thank you. – aguyngueran Jul 09 '17 at 17:53
Yes, that is correct. iOS handles some of the UI changes in the standard components. To get your own behavior, go custom every time. It's the only way to ensure you get exactly what you expect. No problem. – Mark Filter Jul 09 '17 at 17:56

UITableViewController layout not working

1 Answers1

Question 1

Side Note