Tab Bar overlap view behind

Question

I can't seem to fix the issue about this where I adjusted the Tab Bar height to 60 from viewWillLayoutSubviews() but the overlay view doesn't seem to acknowledge the adjusted height and follow suit.

Other similar questions I found are not actually alike (see here: iOS 7 Custom TableView Is Under TabBar) as their Tab Bar is translucent, and mine's not.

Here is what I implemented so far:

In my custom UITabBarController:

override func viewWillLayoutSubviews() {
    var newTabBarFrame = tabBar.frame
    let newTabBarHeight: CGFloat = 60
    newTabBarFrame.size.height = newTabBarHeight
    newTabBarFrame.origin.y = self.view.frame.size.height - newTabBarHeight
    tabBar.frame = newTabBarFrame
}

In one of my tab's UIViewController:

override func viewDidLoad() {
    view.addSubview(tableView)
    NSLayoutConstraint.activate([
        NSLayoutConstraint(item: tableView, attribute: NSLayoutAttribute.leading, relatedBy: .equal, toItem: view, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 0),
        NSLayoutConstraint( item: tableView, attribute: NSLayoutAttribute.top, relatedBy: .equal, toItem: view, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: tableView, attribute: NSLayoutAttribute.trailing, relatedBy: .equal, toItem: view, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: tableView, attribute: NSLayoutAttribute.bottom, relatedBy: .equal, toItem: view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
        ])
}

This is the current result: You can see the overlay view is partially blocked. This happens on all other tab's overlay view controller

BTW, I already make sure the tableview's translatesAutoresizingMaskIntoConstraints is set to false

score 0 · Answer 1 · answered Nov 05 '18 at 15:20

You can use a custom UITabBar to do this. Just override sizeThatFits(_:) to use your custom height:

class TabBar: UITabBar {

    private let height:CGFloat = 60

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var bottomSafeAreaInsets: CGFloat = 0
        if #available(iOS 11.0, *) {
            bottomSafeAreaInsets = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
        }
        return CGSize(width: size.width, height: height + bottomSafeAreaInsets)
    }
}

Tab Bar overlap view behind

1 Answers1