Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Real time blur effect for Navigation Bar

How to achieve the real time blurring effect for the navigation bar just like the Trailers app in iPhone.

i.e As you scroll the contents should get blurred behind the navigation bar. Please help me with some code.

Thanks!

I want to achieve an effect like this:-

enter image description here

like image 633
Shikhar varshney Avatar asked Dec 05 '14 04:12

Shikhar varshney


People also ask

How do I make navigation bars blurry?

Tutorial - Blur effect behind navSet display to Flex and Center align elements. Set Position to Sticky and set top to 0px. Set a high z-index so it's always on top of other elements. Give this layer the desired color and set some transparency.

How do I blur the navigation bar in CSS?

CSS Code: For CSS, follow these steps. First we have applied some background and align over unordered list in the form of a navbar using flexbox. Then we have used hover on ul with blur of 2 px which makes every list-item blur when we hover on ul.

What is Scrolledgeappearance?

The appearance settings for the navigation bar when the edge of scrollable content aligns with the edge of the navigation bar. iOS 13.0+ iPadOS 13.0+ Mac Catalyst 13.1+ tvOS 13.0+

What is isTranslucent?

isTranslucent: A Boolean value indicating whether the navigation bar is translucent (true) or not (false). isOpaque: A Boolean value indicating whether the title is empty and an opaque bezel is set.


1 Answers

Apple has introduced new classes UIVisualEffectView and more to add translucency and blur effect on views from iOS 8.0 release.

Here how you can use it to add a blur effect to navigation bar or any other UIView:

Swift 5

func addBlurEffect() {     let bounds = self.navigationController?.navigationBar.bounds     let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))     visualEffectView.frame = bounds ?? CGRect.zero     visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]     self.navigationController?.navigationBar.addSubview(visualEffectView)              // Here you can add visual effects to any UIView control.     // Replace custom view with navigation bar in the above code to add effects to the custom view. } 

Objective C Code:

- (void) addBlurEffect {     // Add blur view     CGRect bounds = self.navigationController.navigationBar.bounds;     UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];     visualEffectView.frame = bounds;     visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;     [self.navigationController.navigationBar addSubview:visualEffectView];     self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];     [self.navigationController.navigationBar sendSubviewToBack:visualEffectView];      // Here you can add visual effects to any UIView control.     // Replace custom view with navigation bar in the above code to add effects to the custom view. } 

UPDATE:

If you find that after adding blur effect on navigationBar, navigation buttons are not visible then add below line after adding blurView code.

Swift:

self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView) 

Objective C:

[self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; 
like image 196
Kampai Avatar answered Sep 22 '22 04:09

Kampai