77 votes

Contrôleur de vue modale translucide iOS 7

L'application App Store sur iOS 7 utilise un verre dépoli-type d'effet s'il est possible de voir la vue de derrière. Est-ce à l'aide d'un API intégré à iOS 7 ou est-ce un code personnalisé. J'espérais qu'il serait le premier, mais je ne peux pas voir les références évidentes dans la documentation. Les choses évidentes comme (comme le réglage de la propriété alpha sur le modèle de la vue) ne semblent pas avoir d'effet.

Pour voir un exemple, ouvrez l'App Store et appuyez sur le bouton en haut à droite.

App Store home pageModal view in the App Store

132voto

Sebastian Hojas Points 1223

Je voudrais étendre sur rckoenes' réponse:

Comme l'a souligné, vous pouvez créer cet effet par:

  1. Convertir le sous-jacent UIView à une UIImage
  2. Le flou de la UIImage
  3. Définir la UIImage comme arrière-plan de votre point de vue.

enter image description here


Ressemble à beaucoup de travail, mais en réalité c'est en fait assez simple:

1. Créer une catégorie de UIView et ajoutez la méthode suivante:

-(UIImage *)convertViewToImage
{
    UIGraphicsBeginImageContext(self.bounds.size);
    [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

2. Faire une image de la vue courante et flou en utilisant Apple l'Image de la catégorie d'Effet (télécharger)

UIImage* imageOfUnderlyingView = [self.view convertViewToImage];
imageOfUnderlyingView = [imageOfUnderlyingView applyBlurWithRadius:20
                             tintColor:[UIColor colorWithWhite:1.0 alpha:0.2]
                 saturationDeltaFactor:1.3
                             maskImage:nil];

3. Définir comme arrière-plan de votre superposition.

-(void)viewDidLoad
{
   self.view.backgroundColor = [UIColor clearColor];
   UIImageView* backView = [[UIImageView alloc] initWithFrame:self.view.frame];
   backView.image = imageOfUnderlyingView;
   backView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.6];
   [self.view addSubview:backView];
}

12voto

rckoenes Points 44278

Il n'y a pas d'API disponible dans le SDK iOS 7 qui vous permettra de "gel" du sous-jacente-vue-contrôleur.

Ce que j'ai fait est de rendre le sous-jacente vue d'une image, que j'ai ensuite dépoli et le définir comme arrière-plan de la vue qui vous est présenté.

Apple fournit un bon exemple de cela: https://developer.apple.com/downloads/index.action?name=WWDC%202013

Le projet est appelé, iOS_RunningWithASnap

6voto

Jörg Kirchhof Points 997

Comme @rckoenes l'a dit, il n'existe pas de cadre fourni par Apple pour obtenir cet effet. Mais certaines personnes ont déjà construit de bonnes alternatives, comme celle-ci par exemple:

https://github.com/JagCesar/iOS-blur/

5voto

iWasRobbed Points 26926

Quelques approches alternatives qui fonctionnent également sur iOS 5 et 6:

FXBlurView: https://github.com/nicklockwood/FXBlurView

iOS RealtimeBlur: https://github.com/alexdrone/ios-realtimeblur

4voto

datinc Points 602

J'ai téléchargé ma prise du contrôleur de vue floue sur [GitHub] [1]. Il est également livré avec une sous-classe segue afin que vous puissiez l’utiliser dans vos story-boards.

Dépôt: https://github.com/datinc/DATBlurSegue

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X