Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set navigation bar to transparent in iOS 11

How to set navigation bar to transparent and get smooth transition from normal to transparent in iOS 11?

before iOS 11, I find the _UIBarBackground view and set it's alpha in viewWillAppear:, and it worked fine when pop, push and swipe back.

But in iOS 11, _UIBarBackground's alpha will be set to 1 after viewDidAppear automatically.

So I'm wonder, is there any other perfect solutions?

like image 957
Klein Mioke Avatar asked Oct 17 '22 05:10

Klein Mioke


1 Answers

  • Set 'Under top bars for view controller' in storyboard, so your view will be under navigation bar

  • Add subview to your view with frame {0,0,screenWidth,64}, or use auto layout constraints for it.

  • Set background color of that view:

enter image description here

Set background of navbar to transparent:

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                             forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.view.backgroundColor = [UIColor clearColor];
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
}

Now you can change yelow view to transparent with animation

Example project: https://github.com/josshad/AnimatedNavBar

like image 55
Josshad Avatar answered Oct 21 '22 03:10

Josshad