Auto Layout and "Hide bottom bar when pushed"

Question

My app's (simplified) structure is this:

UITabBarController with one UINavigationController holding a UITableViewController as root view controller.

when tapping one of the table view controller cells, I push a regular UIViewController (lets call it VC) end hiding the bottom tab bar. (using the "Hide bottom bar when pushed" flag)

In storyboard I added a regular UIView subclass to VC that look like a bottom bar, and I use Auto Layout to pin it to the bottom of the VC view.

The problem
when I push VC it takes a second for this view to pin to the bottom, it looks like auto layout pin it to the bottom as if the tab bar is not hidden and after a sec it recognise that the tab bar is hidden and moves it to the real bottom of the view.

I know its not the best explanation, so I added a very simple project to demonstrate the issue.

I think you're not using the hidesBottomBarWhenPushed property in the intended way (look at that method in the docs). It's supposed to be for hiding the tool bar that a navigation controller can present, not the tab bar. — rdelmar, Feb 25 '15 at 16:41
hi @rdelmar so what is the proper way to hide the tab bar when pushed? this supposed to be a very common thing to do i believe. — Eyal, Feb 25 '15 at 16:54

Earl Grey · Accepted Answer · 2015-03-08T12:11:55.807

64

The problem is with this specific constraint which is between the view and the top of the bottom layout guide.

enter image description here

Select the constraint and edit its "Second Item" property

enter image description here

Here you need to choose bottom

enter image description here

Once you have that, the pink view is not influenced by layout guide anymore. The layout guide seem to acknowledge that the tab bar is hidden only after the root view of the pushed view controller is in the bounds of main screen and this happens only when the animation is finished.

And that is the reason the view hierarchy needs to be laid out again which causes the unwanted animation.

edited Mar 08 '15 at 12:11

answered Mar 06 '15 at 21:24

Earl Grey

7,426
6
39
59

1

When autolayout will not work http://stackoverflow.com/questions/29334285/replacing-tabbar-with-toolbar-in-storyboard/30283470#30283496 – DogCoffee May 17 '15 at 05:05
3

@AnthonyM I ran into that problem as well. I ended up editing the storyboard's source by hand so that I could change the constraint's item to use bottom layout guide.bottom. – Greg Oct 09 '15 at 04:17
12

@AnthonyM it's a bit hidden in Xcode 7 but it's there: http://stackoverflow.com/a/33432500/125407 – Johannes Rudolph Oct 30 '15 at 09:22
1

just wondering how you managed to edit storyboard source by hand so that you could change the constraint's item to use bottom layout guide.bottom? I've been stuck on this for sometime now and don't understand why I can't just select bottom in storyboard anymore? – alionthego Nov 27 '15 at 06:18

score 32 · Answer 2 · edited May 23 '17 at 11:55

32

The accepted answer did not work for me (the option was not available). However I have found another solution. (based on Hide Bottom Bar When Pushed through Autolayout)

Select booth the view and the object to align (in my case btnShare) and add a new alignment constraint (Bottom Edges).

edited May 23 '17 at 11:55

Community

1
1

answered May 13 '16 at 18:42

Vincenzo

1,158
11
18

This did not work for me, I still get 1s of white space displayed when pushing ViewController. – Peterdk Aug 21 '17 at 14:59
Super...Very useful – Sudhakar Tharigoppula Feb 22 '18 at 13:25

score 14 · Answer 3 · answered Feb 25 '15 at 16:51

14

Hi In storyboard select Tab bar (Is Tab Bar Controller Scene > Tab Bar Controller > Tab Bar ), in the attribute inspector, uncheck Translucent box. This action fix your problem. (But there are many things, "Hide bottom bar when pushed" is to toolbar).

answered Feb 25 '15 at 16:51

Onik IV

5,007
2
18
23

but now the tab bar is visible when I push VC, I need it to be hidden. – Eyal Feb 25 '15 at 16:55
At least, in the example project you have shared (AutoLayoutTest), if you only uncheck translucent property in the tab bar, the tab bar disappear when you push and the violet view appear in its place. (Test you own project) – Onik IV Feb 25 '15 at 17:31
worked for me, but i m looking for any future bug it may cause. – Ashkan Ghodrat Feb 01 '17 at 10:39

score 6 · Answer 4 · answered Mar 06 '15 at 19:27

6

Select your "Navigation Controller" and in "Attribute Inspector" remove the checkmark from "Under Bottom Bars".

answered Mar 06 '15 at 19:27

Arash

1,286
1
8
14

score 6 · Answer 5 · answered Nov 10 '16 at 13:43

IF you can't select bottomlayoutguide bottom in your Xcode 7+

just do the following: open your storyboard in source code editor

search your controller's identifier

find <layoutGuides>, type <bottom>, copy it id

search by id change attribute from top to bottom

enjoy.

score 3 · Answer 6 · answered Feb 02 '16 at 11:05

3

In the storyboard, Go to the View Controller that you want to hide the tab bar, click on Attribute Inspector and select Hide bottom bar when pushed. Check image bellow.

answered Feb 02 '16 at 11:05

Mário Carvalho

3,106
4
22
26

1

Yes, this is the correct answer. Set "Hide bottom bar on push" on the view controller, that should not show the tab bar. Don't set it on the tab bar controller, the navigation controller or on the parent view controller of your controller. – thetrutz Feb 28 '19 at 22:07

score 2 · Answer 7 · edited Feb 15 '17 at 06:35

2

If you want the tab bar to be hidden, you can add this code to your controller,

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = YES;
}

You will also have to put that code (but passing NO) into the controller where you want the tab bar to be visible. You should also deselect the "Hide bottom bar when pushed" box in IB.

After Edit:

You'll get a better animation if, in the first controller, you animate the alpha value of the non-hidden tab bar from 0 to 1 over a short time. This looks good if you go back with the back button. If you want to use the swipe back, you would have to do something more complicated involving the interactivePopGestureRecognizer.

-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = NO;
    self.tabBarController.tabBar.alpha = 0.0;
    [UIView animateWithDuration:.4 animations:^{
        self.tabBarController.tabBar.alpha = 1.0;
    }];
}

edited Feb 15 '17 at 06:35

Aamir

16,329
10
59
65

answered Feb 25 '15 at 17:07

rdelmar

103,982
12
207
218

the problem with this solution is that you see the disappearing / appearing of the tab bar. especially when using the swipe back gesture. – Eyal Feb 26 '15 at 10:08
@Eyal, I edited my answer to show ways to improve the animation. – rdelmar Feb 26 '15 at 16:40
im not comfortable with this kind of solution, hiding/showing the tab bar on viewWillAppear/viewWillDisapear is a bit risky i think. it seems that "hide bottom bar" works great without auto layout, so I wonder if there is something to do with the auto layout configuration. – Eyal Mar 01 '15 at 09:46
@Eyal, what's wrong with Onik IV's solution? I don't see the tab bar either when I uncheck the translucent property for the tab bar (and hide's bottom bar on push is still checked). – rdelmar Mar 01 '15 at 16:22

score 1 · Answer 8 · edited Sep 14 '16 at 16:41

1

-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBar.hidden = NO;
    self.tabBarController.tabBar.alpha = 0.0;
    [UIView animateWithDuration:.3 animations:^{
        self.tabBarController.tabBar.alpha = 5.0;
    }];
}

edited Sep 14 '16 at 16:41

Eeshwar

277
3
17

answered Mar 05 '15 at 18:42

Breno Morais

53
7

score 1 · Answer 9 · edited Oct 24 '16 at 15:16

1

set UINavigationBar Translucent with NO.

like this: self.navigationController.navigationBar.translucent = NO;

edited Oct 24 '16 at 15:16

Eeshwar

277
3
17

answered Mar 06 '15 at 15:11

taitanxiami

109
11

score 0 · Answer 10 · answered Mar 03 '15 at 16:22

0

Try pinning bottom of your view to bottom of superview and not bottom-layout

answered Mar 03 '15 at 16:22

Karthik Rao

226
1
6

Auto Layout and "Hide bottom bar when pushed"

10 Answers10

Linked