Custom Tab Bar iOS

Question

I want to create a custom tab bar like the image shows. I don't know how to begin subclassing UITabBar to get this result. What If I simply have a Root UIViewController , and create the perception of tab bar through interface builder (a UIView, images, circle button, etc) and add ContainerView 's for map and list UIViewController 's? What are the downfalls to this approach, if any? Resizing issue (looks good on iPhone 6 but not iPhone X) since there is no tab bar to dynamically resize maybe?

Answer 1

When you break any UIKit component down, like UITabBar , all you will ever find are other UIKit components, that are all available to us. And while it's nice to use Apple's prebuilt stuff sometimes, they don't always like us meddling with them and they often hide the very behaviors that we want to modify.

You should have absolutely zero fear of creating your own UI components, like a custom tab bar, which for our purposes is nothing more than a UIView container with either UIButton or UIImageView subviews. If you have a container view controller (that contains the child view controllers), put the tab bar in there and you will have a legitimate tab bar that will always be superimposed over content view controllers, except for presented view controllers (which is exactly the behavior we want).

And as far as iPhone X is concerned and safe areas, just apply them how you normally would any view because that's all your custom tab bar is:

if #available(iOS 11.0, *) {

    tabBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    tabBar.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor).isActive = true
    tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

} else {

    tabBar.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    tabBar.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    tabBar.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor).isActive = true

}

tabBar.heightAnchor.constraint(equalToConstant: 44).isActive = true

And to your concern about resizing, if you give your tab bar constraints (like you should be doing anyway) in the container view controller, it will stretch and rotate in every possible way without fail.

Answer 2

you can Use ESTabBarController it's easy to use and will solve your problems ..:)

https://github.com/eggswift/ESTabBarController