Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

Apple avait avec iOS 7 introduit la notion de flou dans certains de ses éléments natifs (UINavigation, UITabBar, UIAlertView). Cependant les développeurs ne pouvaient dans leurs interfaces qu’uniquement imiter cet effet. Avec iOS 8 le flou natif est maintenant accessible, et nous allons nous pencher sur UIVisualEffectView pour apprendre à l’exploiter.

Le flou

Flouter l’arrière plan d’une vue est maintenant trivial avec UIVisualEffectView. Il suffit d’utiliser la méthode initWithEffect: et de bien faire attention à ajouter les sous-vues à la contentView.

UIBlurEffect * effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView * viewWithBlurredBackground = [[UIVisualEffectView alloc] initWithEffect:effect];

L’éclat

En complément du flou, Apple a aussi introduit la notion d’éclat, utilisée pour mettre en valeur un élément contenu dans une vue floutée. L’éclat fait exception au modèle classique de couches rendues les unes par dessus les autres. Une UIVisualEffectView avec un UIVibrancyEffect, peu importe sa position dans la hiérarchie à condition qu’elle soit contenue dans la contentView de sa UIVisualEffectView parente, ajustera le flou en arrière plan pour mettre en valeur les sous-vues de sa contentView.

Si vous n’êtes pas sur de visualiser l’effet évoqué, vous pouvez simplement ouvrir le centre de notifications et sélectionner une de ses cellules.

Pour ajouter de l’éclat à partir de l’exemple précédent il vous suffit de procéder de la sorte :

UIVisualEffectView * viewInducingVibrancy = [[UIVisualEffectView alloc] initWithEffect:effect]; // must be the same effect as the blur view [viewWithBlurredBackground.contentView addSubview:viewInducingVibrancy]; UILabel * vibrantLabel = [UILabel new]; // Set the text and the position of your label [viewInducingVibrancy.contentView addSubview:vibrantLabel];

Ajustement de l’éclat pour créer d’élégants widgets Aujourd’hui

Comme vu précédemment, le centre de notifications est la partie d’iOS exploitant le plus l’éclat. Y réussir une intégration parfaite de l’état sélectionné des cellules de son widget demande 2 astuces :

• un éclat particulier (notificationCenterVibrancyEffect)
• une modulation de l’éclat avec un alpha de 0.5

UIVibrancyEffect * effect = [UIVibrancyEffect notificationCenterVibrancyEffect]; UIVisualEffectView * selectedBackgroundView = [[UIVisualEffectView alloc] initWithEffect:effect]; selectedBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; selectedBackgroundView.frame = self.contentView.bounds; UIView * view = [[UIView alloc] initWithFrame:selectedBackgroundView.bounds]; view.backgroundColor = [UIColor colorWithWhite:1.0f alpha:0.5f]; view.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [selectedBackgroundView.contentView addSubview:view]; self.selectedBackgroundView = selectedBackgroundView;