UITabBar with safe area inside programmatically created UIViewController

Question

Before you mark it as duplicate please note, that I did read this and this seems to not apply to UITabBar

Both UIViewController and UITabBar are created programmatically. Constraints are set like:

public override func viewDidLoad() {
    super.viewDidLoad()
    self.view.bringSubview(toFront: self.tabBar)
}

And self.tabBar:

lazy var tabBar: UITabBar = {
    let tab = UITabBar()
    self.view.addSubview(tab)
    tab.translatesAutoresizingMaskIntoConstraints = false
    tab.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    tab.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    tab.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true //This line will change in second part of this post.
    return tab
}()

And this show UITabBar like this:

And it's too small cause it's not taking safe areas into consideration. So I did change line:

tab.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

to:

tab.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

And it's then shown like this:

So it's also not shown as expected. The goal here is sth like this:

How to make constraints to show UITabBar like this?

How come you are adding the tab bar yourself? better to use a UITabBarController — Scriptable, May 17 '18 at 12:18
I don't need `UITabBarController`. What's wrong with adding `UITabBar`? — Jakub, May 17 '18 at 12:19
I'm familiar with `UITabBarController` and `UITabBar`, I simply don't need most `UITabBarController` functionalities. There is nothing wrong with `UITabBar`. As Apple Docs: ```Typically, you use tab bars in conjunction with a UITabBarController object, but you can also use them as standalone controls in your app.``` — Jakub, May 17 '18 at 12:23
I know that you *can* use it separately, i just asked a question, for clarification — Scriptable, May 17 '18 at 12:24
Do you need it programatically only? I did set it using Interface builder — Krunal, May 17 '18 at 12:33
Surely you can just set a height constraint of say 100, to the tab bar and that should fix it? You'd have to double check that the device is iPhone X however. — Pranav Kasetti, May 17 '18 at 12:34

Krunal · Answer 1 · 2018-05-17T13:34:45.050

Here I did it:

let tabBar = UITabBar()

override func viewDidLoad() {
    super.viewDidLoad()
    addTabbar()
}
override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    addHeightConstraintToTabbar()
}

func addTabbar() -> Void {
    self.view.addSubview(tabBar)
    tabBar.translatesAutoresizingMaskIntoConstraints = false
    tabBar.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    tabBar.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    tabBar.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
    let item1 = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.bookmarks, tag: 1)
    let item2 = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 2)

    tabBar.items = [item1, item2]
    self.view.bringSubview(toFront: tabBar)
}

func addHeightConstraintToTabbar() -> Void {
    let heightConstant:CGFloat = self.view.safeAreaInsets.bottom + 49.0
    tabBar.heightAnchor.constraint(equalToConstant: heightConstant).isActive = true
}

Result:

May not know, is it correct to do in this way. You need to make it better.

@PranavKasetti You can see result for both device (iPhone-X and other than iPhoneX (iPhone SE)) in answer. Please explain your concern in more detail. You are welcomed to improve quality of this answer by adding you input here. — Krunal, May 17 '18 at 18:38

Abdelahad Darwish · Answer 2 · 2018-05-17T12:54:57.603

When you add UItabbar to UIViewController and use safeAreaLayoutGuide or layoutMarginsGuide it will be added to save area of that view controller which have SafeAreaInsets with space at bottom you can change, but if you add to View of UIViewController it will be stick to edge without any space , with default hight 49

to increase that hight add heightAnchor constraint

  lazy var tabBar: UITabBar = {
        let tab = UITabBar()
        self.view.addSubview(tab)
        tab.translatesAutoresizingMaskIntoConstraints = false
        tab.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
        tab.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
        tab.heightAnchor.constraint(equalToConstant: 80).isActive = true
        tab.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true //This line will change in second part of this post.
        return tab
    }()

to use safe area guide you can add negative value to Bottom of additionalSafeAreaInsets of ViewController

self.additionalSafeAreaInsets = UIEdgeInsetsMake(0, 0, -39, 0)

score 1 · Answer 3 · answered Jun 04 '21 at 07:06

1

The bottom anchor needs to be connected to view's safeAreaLayoutGuide.

tabbar.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    tabbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tabbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tabbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

answered Jun 04 '21 at 07:06

Divyesh Makwana

97
6

doesn't work with controller: crash "Cannot choose layout method for UITabBar managed by a controller" – djdance Oct 20 '21 at 15:05
@djdance The original answer is for a custom `UIViewController` with a `UITabBar` added as a subview. If you want to subclass `UITabBarController` then you will have to hide the default tabbar and add your custom to avoid this error. – Divyesh Makwana Oct 21 '21 at 20:45

UITabBar with safe area inside programmatically created UIViewController

3 Answers3