Home » Ios » Positioning UITabBar at the top

Positioning UITabBar at the top

Posted by: admin February 24, 2018 Leave a comment

Questions:

I’m a beginner in iOS development. My question is: is it possible to position UITabBar at the top and how?
I can’t position my UITabBar at the top of the view.

Answers:

Is it possible? Sure, but it violates the human interface guidelines.

Screenshots:

Portrait Landscape Storyboard

Code:

TabController.h:

#import <UIKit/UIKit.h>

@interface TabController : UITabBarController <UITabBarControllerDelegate>

@end

TabController.m:

#import "TabController.h"

@interface TabController ()

@end

@implementation TabController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.delegate = self;
}

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];

    [self.tabBar invalidateIntrinsicContentSize];

    CGFloat tabSize = 44.0;

    UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;

    if (UIInterfaceOrientationIsLandscape(orientation))
    {
        tabSize = 32.0;
    }

    CGRect tabFrame = self.tabBar.frame;

    tabFrame.size.height = tabSize;

    tabFrame.origin.y = self.view.frame.origin.y;

    self.tabBar.frame = tabFrame;

    // Set the translucent property to NO then back to YES to
    // force the UITabBar to reblur, otherwise part of the
    // new frame will be completely transparent if we rotate
    // from a landscape orientation to a portrait orientation.

    self.tabBar.translucent = NO;
    self.tabBar.translucent = YES;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

@end

Questions:
Answers:

Swift3: I achieve this by creating a custom class for UITabBarController:

class CustomTabBarController: UITabBarController {

   @IBOutlet weak var financialTabBar: UITabBar!

    override func viewDidLoad() {
        super.viewDidLoad()
        // I've added this line to viewDidLoad
        UIApplication.shared.statusBarFrame.size.height
        financialTabBar.frame = CGRect(x: 0, y:  financialTabBar.frame.size.height, width: financialTabBar.frame.size.width, height: financialTabBar.frame.size.height)
    }

Don’t forget to set your Custom Class to TabBarController
enter image description here

The result would be like this:

enter image description here

Questions:
Answers:

Here is a working swift 3 example of aviatorken89’s code.

  1. First create a new file.
  2. Select source cocoa touch class.
  3. Designate subclass of: UITabBarController
  4. Name the class “CustomTabBarController” or whatever you’d like.
  5. Add the following code to the class.

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        var tabFrame:CGRect = self.tabBar.frame
        tabFrame.origin.y = self.view.frame.origin.y
        self.tabBar.frame = tabFrame
    }
    
  6. If you are using storyboard make sure to change the tab bar class to your custom class via the “Identity inspector”.

Questions:
Answers:
override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    tabBar.frame = CGRect(x: 0, y: 0, width: tabBar.frame.size.width, height: tabBar.frame.size.height)
}

storyboardenter image description here

UPDATE IOS 11 ISSUE

the code above doesnt work on ios 11. so here is workaround that i found.

override func viewDidLayoutSubviews() {
    tabBar.frame = CGRect(x: 0, y: 0, width: tabBar.frame.size.width, height: tabBar.frame.size.height)

    super.viewDidLayoutSubviews()
}

Questions:
Answers:

You can create a custom tab bar by making it yourself, but apple highly discourages mimicking a system control for a function it was not originally intended to do.

Once again, I discourage you to do so, because it violates the consistency of your app and system apps. But since I’m at it, here we go:

For a custom tab bar, you need to create a view that holds multiple buttons. You also need a container view below the UITabBar (because you want the UITabBar to be at the top). When a button is pressed, you change the UIViewController inside the container.
Its quite simple, but of course, its strongly not recommended.

Questions:
Answers:

If you want something like an UITabBar on top then how about you create a custom UIView and add any number of UIButtons in it. Then link some ViewControllers with each button through Segue. Done!

You don’t need to customise the UITabBar. As aviatorken89 said earlier, it is against the human interface guideline.