UITabbar height and display in iPhone not changing dynamically when rotating from landscape to portrait and vice versa iOS11

Question

I was adding UITabBar without using AutoLayout and it was working fine until iOS 10.3.1. There seems to be a new feature in iOS 11 which is that the height of UITabBar is 49 in portrait and 32 in landscape mode (Photo App is a good example). Now when I run my app built in iOS11, if I start my app in landscape mode the height of UITabBar starts with the height of 32 but when it is rotated to portrait mode it stays in 32 and the icons get bigger and edge out of the TabBar frame. When I start my app in portrait mode, the height of TabBar starts with the height of 49 and stays the same when rotated to portrait mode (which is acceptable).

I tried to fix the issue using AutoLayout and constraints, however I am not able to solve it. If anyone is having this issue, it would be a great help.

This problem seems to be occurring only in iPhone non plus devices.

Update: The height is fixed by using the answer below, but in the landscape mode the text and the icon of UITabBar item are not aligned horizontally but instead vertically in iPhone X.

The problem I am facing is similar to the question here

score 6 · Accepted Answer · answered Oct 19 '17 at 13:25

6

I had this problem and solved it by calling invalidateIntrinsicContentSize() on the tab bar, then updateConstraintsIfNeeded() on a superview of it. In my case, I called both inside an animation block, but it may be possible to move one or both of them out of it.

answered Oct 19 '17 at 13:25

Becca Royal-Gordon

17,541
7
56
91

1

This saved me a few hours, thanks! I tried to do this outside of an animation block, in `traitCollectionDidChange`, but the issue would still occur going from landscape to portrait. Ultimately I put this in an animation block inside `viewWillTransitionToSize:withTransitionCoordinator:`, with `animateAlongsideTransition:completion:`. – Rizwan Sattar Oct 23 '17 at 02:41
The height is fixed by using the answer above, but in the landscape mode the text and the icon of UITabBar item are not aligned horizontally but instead vertically in iPhone X. – eracube May 31 '18 at 11:08

score 2 · Answer 2 · answered May 05 '18 at 03:11

2

This worked for me on iOS 11.3.1

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tabBar.invalidateIntrinsicContentSize()
}

answered May 05 '18 at 03:11

Haroldo Gondim

7,725
9
43
62

The height is fixed by using the answer below, but in the landscape mode the text and the icon of UITabBar item are not aligned horizontally but instead vertically in iPhone X. – eracube May 31 '18 at 11:08
@ErAcube did you find a solution to this problem (not displaying the compact design) ? – Nathan Barreto Sep 12 '18 at 18:08
@NathanBarreto I haven't yet. – eracube Sep 25 '18 at 14:14

score 0 · Answer 3 · answered Aug 14 '18 at 03:35

In my case, the solution was to add a Navigation Controller as the Storyboard Entry Point and then the Tab Bar Controller as the root view controller of the navigation controller. Somehow the issue was because the Tab Bar controller was the Storyboard Entry Point.

UITabbar height and display in iPhone not changing dynamically when rotating from landscape to portrait and vice versa iOS11

3 Answers3