UITableView inset when parent viewcontroller has a background

Question

I have a tableviewcontroller that I've added as a child ViewController. Its view is added to a containerview (normal UIView). This works great, and it automatically adjusts the top inset:

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "ViewController"
    // self.addBackground()

    // Set up container for the tableview
    self.containerView = UIView()
    self.containerView.translatesAutoresizingMaskIntoConstraints = false
    self.containerView.backgroundColor = UIColor.greenColor()
    self.view.addSubview(self.containerView)

    let viewDict = ["container": self.containerView]
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[container(100)]", options: [], metrics: nil, views: viewDict))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[container]|", options: [], metrics: nil, views: viewDict))

    // Add tableview controller as child
    tableViewController = TableViewController()
    tableViewController.view.translatesAutoresizingMaskIntoConstraints = false
    self.addChildViewController(tableViewController)
    self.containerView.addSubview(tableViewController.view)
    tableViewController.didMoveToParentViewController(self)

    // Layout
    let tableViewDict = ["child": tableViewController.view]
    self.containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[child]|", options: [], metrics: nil, views: tableViewDict))
    self.containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[child]|", options: [], metrics: nil, views: tableViewDict))
}

When I add a background image BEFORE adding the containerview, the first couple of rows are hidden behind the navbar.

private func addBackground() {
    let backgroundImage = UIImage(named: "hexley_fork_450")
    let backgroundImageView = UIImageView(image: backgroundImage)
    backgroundImageView.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(backgroundImageView)

    let viewDict = ["backgroundImageView": backgroundImageView]
    let layouts = [
        "H:[backgroundImageView]|",
        "V:[backgroundImageView]|",
    ]

    for layout in layouts {
        self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(layout, options: [], metrics: nil, views: viewDict))
    }
}

Result:

Why is this, and how can I prevent it?

Test project on Github: https://github.com/bvankuik/TestBackgroundLayout

I didn't figure exactly why this happens but you can prevent it by disabling the option "Extend Edges Under Top Bars" on the view controller in the storyboard (in case you use storyboards - or in code otherwise) — Ionut, Jun 03 '16 at 10:18
@Ionut You mean adding the line "tableViewController.edgesForExtendedLayout = .None"? Doesn't seem to fix the problem. — Bart van Kuik, Jun 03 '16 at 11:48
Not for tableViewController but for you main view controller. Add this in viewDidLoad: edgesForExtendedLayout = .None - just an idea. — Ionut, Jun 03 '16 at 13:13

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

set self.edgesForExtendedLayout = .None in ViewController instead of tableViewController.edgesForExtendedLayout then it works.

because edgesForExtendedLayout works for UIViewController not a view from the TableViewController

you can see the fist image the tableview's greycolor is under the navigationBar because the contentview will be under the navigationBar,then the tableViewController.view fill the content view

then why the fist works? you can see more detail in Explaining difference between automaticallyAdjustsScrollViewInsets, extendedLayoutIncludesOpaqueBars, edgesForExtendedLayout in iOS7

hope it be helpful :-)

edited May 23 '17 at 10:34

Community

1
1

answered Jun 03 '16 at 13:13

Wilson XJ

1,750
13
14

This is partly a solution. Setting "self.edgesForExtendedLayout = .None" in ViewController indeed works. But now the nice effect of the coloring of the tableview behind the navigationbar has disappeared. – Bart van Kuik Jun 03 '16 at 14:41
1

@BartvanKuik make an inset of tableview works too : self.tableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0) – Wilson XJ Jun 03 '16 at 14:51
Yes! That indeed is the best solution for me, and it offers visually the nicest look and feel! – Bart van Kuik Jun 04 '16 at 04:39

UITableView inset when parent viewcontroller has a background

1 Answers1