Comment utiliser UIVisualEffectView pour flouter l'image?

Quelqu'un pourrait-il donner un petit exemple d'application du flou à une image? J'essaie de comprendre le code depuis un moment maintenant :( encore nouveau chez obj c!

Le UIVisualEffectViewfournit une abstraction simple sur des effets visuels complexes. Selon l'effet souhaité, les résultats peuvent affecter le contenu en couches derrière la vue ou le contenu ajouté à contentView de la vue.

Appliquez un UIVisualEffectViewà une vue existante pour appliquer un effet de flou ou de dynamisme à la vue existante. Après avoir ajouté UIVisualEffectView à la hiérarchie de vues, ajoutez toutes les sous-vues à contentView de UIVisualEffectView. N'ajoutez pas de sous-vues directement à UIVisualEffectViewlui - même.

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView

Mettez simplement cette vue floue sur l'imageView. Voici un exemple dans Objective-C:

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

et Swift:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

Voici comment utiliser UIVibrancyEffect et UIBlurEffect avec UIVisualEffectView

Objectif c:

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

Swift 4:

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

Vous pouvez également utiliser le générateur d'interface pour créer facilement ces effets pour des situations simples. Étant donné que les valeurs z des vues dépendent de l'ordre dans lequel elles sont répertoriées dans le plan du document, vous pouvez faire glisser un UIVisualEffectViewsur le plan du document avant la vue que vous souhaitez rendre floue. Cela crée automatiquement un imbriqué UIView, qui est la contentViewpropriété du donné UIVisualEffectView. Imbriquez dans cette vue les éléments que vous souhaitez voir apparaître en haut du flou.

Vous pouvez également facilement profiter de la vivacité UIVisualEffect, qui en créera automatiquement une autre imbriquée UIVisualEffectViewdans le plan du document avec la vivacité activée par défaut. Vous pouvez ensuite ajouter une étiquette ou une vue de texte à l'imbriqué UIView(à nouveau, la contentViewpropriété de la UIVisualEffectView), pour obtenir le même effet que l'élément d'interface utilisateur "> faire glisser pour déverrouiller".

Je préfère créer des effets visuels via Storyboard - aucun code utilisé pour créer ou maintenir des éléments d'interface utilisateur. Cela me donne également un support paysage complet. J'ai fait une petite démonstration de l'utilisation d'UIVisualEffects avec Blur et aussi de Vibrancy.

Démo sur Github

Si quelqu'un souhaite la réponse dans Swift:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

Mettre à jour :

Pour l'instant, il est disponible sous l'IB, vous n'avez donc rien à coder :)

-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

Ceci est utilisé pour flouter les arrière-plans, clairs ou foncés, afin que le texte puisse être superposé plus facilement. Vous pouvez éventuellement activer la vibration, ce qui entraîne le rendu du texte dans une couleur vive et contrastée à côté du flou.