Comment utiliser UIVisualEffectView pour flouter l'image?


208

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


1
Soyez prudent d'ajouter des vues à UIVisualEffectView's contentView github.com/onmyway133/blog/issues/124
onmyway133

De plus, si vous l'ajoutez à une sous-vue et définissez son cadre, n'oubliez pas de mettre à jour le cadre dans viewDidLayoutSubviews pour vous assurer que la rotation fonctionne.
Steve Moser

Réponses:


415

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)

3
Merci beaucoup! J'ai oublié de définir le cadre :( il n'y a encore rien sur google pour le visuel, donc ce devrait être le premier terme de recherche :)
cNoob

1
Espérons que l'API ne change pas! C'est l'une des raisons pour lesquelles discuter des API Apple non encore publiées peut être délicat. Par exemple, certaines des API UIKit Dynamics changent légèrement entre la version bêta et la version. Rien de majeur, mais ils auraient cassé tout exemple de code écrit par rapport aux API d'origine.
Zev Eisenberg

5
Existe-t-il de toute façon pour animer le flou in / out?
Ruben Martinez Jr.

3
@BS Vous pouvez animer l'alpha de la vue des effets visuels. Boom.
Maciej Trybiło

2
UIBlurEffect est génial, mais notez que cela ne fonctionne pas sur les appareils plus anciens comme l'iPad2 - j'ai passé des heures à essayer de comprendre pourquoi il ne plaçait qu'une couche translucide sur mon écran et ne brouillait pas - tout cela parce que je testais sur un appareil plus ancien
Keith

135

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)

1
La solution de contournement fonctionne même sans sousextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
classement

1
Apple semble avoir corrigé le bogue. La solution de contournement de sous-classe / extension n'est plus nécessaire dans iOS 8 beta 2.
Benjamin Mayo

2
Merci. J'ai testé et confirmé la correction de bogue et modifié la réponse.
Matt Rundle

1
J'essaie d'ajouter cela à ma vue, mais chaque fois que je présente la vue, elle se brouille encore et encore jusqu'à ce que j'obtienne un fond blanc ... Je supprime la vue avec removeFromSuperView après l'avoir ignorée mais j'obtiens le même résultat .. .. des idées?
George Asda

@GeorgeAsda que diriez-vous au lieu d'appeler removeFromSuperView, vous faites le [self.visualEffectView setHidden:NO];? Allouer et ajouter à la vue est une opération coûteuse que de masquer ou d'afficher.
Yoon Lee

46

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.

XCode6 beta5

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".

entrez la description de l'image ici


Pouvez-vous confirmer que ce qui transparaît est réellement flou? Mon image (ce que vous avez appelé "BackgroundPhoto" dans votre hiérarchie) est juste grisée sous un style flou: vue translucide sombre. (Version de sortie de Xcode 6.01 et utilisant le simulateur iOS)
tobinjim

Que voulez-vous dire par "est juste grisé"? Vous ne pensez pas que c'est flou alors?
ohhh

D'accord, je vais jeter un œil dans quelques heures.
ohhh

Merci! Vous avez une hiérarchie de vue sur votre BackgroundPhoto qui est effondrée dans les captures d'écran ... Je viens d'utiliser une UIImageView et de lui affecter une photo (un chien de couleur claire sur fond vert - la définition nette entre les pattes blanches et l'herbe verte est tout aussi nette lorsqu'elle est couverte par la vue de l'effet visuel que lorsqu'elle ne l'est pas).
tobinjim

1
J'ai vu qu'en changeant le type de flou en Dark, le label devient blanc ...
Daniel

8

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


8

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 :)


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

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

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

Ajoutez du texte avec la réponse pour savoir comment votre réponse aide OP à résoudre le problème signalé
ρяσѕρєя K

0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.