web-dev-qa-db-fra.com

Effet de flou en temps réel pour la barre de navigation

Comment obtenir l'effet de flou en temps réel pour la barre de navigation, tout comme l'application Trailers sur iPhone.

par exemple, lorsque vous faites défiler, le contenu doit être flou derrière la barre de navigation. Veuillez m'aider avec du code.

Merci!

Je veux obtenir un effet comme celui-ci: -

enter image description here

iosobjective-cswiftuinavigationcontrolleruinavigationbar
31
Shikhar varshney

Apple a introduit de nouvelles classes UIVisualEffectView et plus pour ajouter de la translucidité et un effet de flou sur les vues de la version iOS 8.0.

Voici comment vous pouvez l'utiliser pour ajouter un effet de flou à la barre de navigation ou à tout autre UIView:

Swift 2.1 Modifier

func addBlurEffect() {
    let bounds = self.navigationController?.navigationBar.bounds as CGRect!
    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame = bounds!
    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 above code to add effects to custom view.
}

Code objectif C: 

- (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 above code to add effects to custom view.
}

MISE À JOUR:

Si vous constatez qu'après avoir ajouté un effet de flou sur la barre de navigation, les boutons de navigation ne sont pas visibles, ajoutez la ligne ci-dessous après avoir ajouté le code blurView.

Rapide:

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

Objectif c:

[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];
41
Kampai

Swift 4

extension UINavigationBar {
    func installBlurEffect() {
        isTranslucent = true
        setBackgroundImage(UIImage(), for: .default)
        let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
        var blurFrame = bounds
        blurFrame.size.height += statusBarHeight
        blurFrame.Origin.y -= statusBarHeight
        let blurView  = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blurView.isUserInteractionEnabled = false
        blurView.frame = blurFrame
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(blurView)
        blurView.layer.zPosition = -1
    }
}

Usage

navigationController?.navigationBar.installBlurEffect()
7
neoneye

Noté: sur iOS 11, la fonction sendSubviewToBack ne fonctionne pas normalement. Pour cela, nous devons utiliser zPosition pour placer la vue de l'effet de flou sous d'autres vues.

self.visualEffectView.layer.zPosition = -1;

code Objective-C

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
    self.navigationController.navigationBar.translucent = YES;
    // Add blur view
    CGRect bounds = self.navigationController.navigationBar.bounds;
    bounds.size.height += 20;
    bounds.Origin.y -= 20;
    _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
    self.visualEffectView.frame = bounds;
    self.visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.visualEffectView.userInteractionEnabled = NO;
    self.visualEffectView.layer.zPosition = -1;
    [self.navigationController.navigationBar addSubview:self.visualEffectView];
    [self.navigationController.navigationBar sendSubviewToBack:self.visualEffectView];

code Swift 4

  self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    let visualEffectView   = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    var bounds = view.bounds
    bounds.size.height += 20
    bounds.Origin.y -= 20
    visualEffectView.isUserInteractionEnabled = false
    visualEffectView.frame = bounds
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.navigationController?.navigationBar.addSubview(visualEffectView)
    visualEffectView.layer.zPosition = -1
6
Martin Le

J'ai ajouté @ Kampai, @ Damasio avec mes réglages pour résoudre mes problèmes (ce qui était lié à pushNavigation). prise en charge Swift 4.0 +, iOS9, Xcode 9

Dans ViewDidLoad () de votre ViewController, appelez simplement

addBlurEffect(toView: self.navigationController?.navigationBar)

une fonction:

   //MARK :- It can be used in navBarGlassEffect view
func addBlurEffect(toView view:UIView?) {
    // Add blur view
    guard let view = view else { return }


    //This will let visualEffectView to work perfectly
    if let navBar = view as? UINavigationBar{
        navBar.setBackgroundImage(UIImage(), for: .default)
        navBar.shadowImage = UIImage()
    }


    var bounds = view.bounds
    bounds.offsetBy(dx: 0.0, dy: -20.0)
    bounds.size.height = bounds.height + 20.0


    let blurEffect = UIBlurEffect(style: .dark)
    let visualEffectView = UIVisualEffectView(effect: blurEffect)

    visualEffectView.isUserInteractionEnabled = false
    visualEffectView.frame = bounds
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.insertSubview(visualEffectView, at: 0)

}
4
Rafat touqir Rafsun

Si, après la réponse de @Kampai, la barre d'état ne fonctionne pas, ajoutez ceci:

bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0

Question abordée dans ce sujet .

3
Damasio

Swift 3:

func addBlurEffect(toView view:UIView?) {
        // Add blur view
        guard let view = view else { return }

        //This will let visualEffectView to work perfectly
        if let navBar = view as? UINavigationBar{
            navBar.setBackgroundImage(UIImage(), for: .default)
            navBar.shadowImage = UIImage()
        }

        var bounds = view.bounds
        bounds.offsetBy(dx: 0.0, dy: -20.0)
        bounds.size.height = bounds.height + 20.0

        let blurEffect = UIBlurEffect(style: .dark)
        let visualEffectView = UIVisualEffectView(effect: blurEffect)

        visualEffectView.isUserInteractionEnabled = false
        visualEffectView.frame = bounds
        visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.insertSubview(visualEffectView, at: 0)

    }
2
Maksim Kniazev

J'ai d'abord ajouté la méthode addBlurEffect () puis dans AppDelegate, j'ai ajouté

 UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)

 UINavigationBar.appearance().shadowImage = UIImage()

 UINavigationBar.appearance().backgroundColor = UIColor.clearColor()

 UINavigationBar.appearance().translucent = true

Maintenant ça marche pour moi

0
alitosuner

Note clé: après avoir implémenté le code ci-dessus pour ajouter une vue floue, 1. vous devez renvoyer votre vue floue pour montrer d'autres choses 2. vous devez définir votre interaction utilisateur de vue floue comme fausse pour pouvoir appuyer sur les éléments la barre de navigation.

0
Developer Sheldon