Vue floue dans le style iOS 7

Question

Quelqu'un connaît-il des contrôles qui reproduisent les vues floues du style iOS7 ?

Je suppose qu'il peut y avoir une sorte de sous-classe de UIView qui reproduira ce comportement.

Je parle de ce type de vues qui floutent l'arrière-plan de manière extrêmement épaisse de sorte qu'elles ont des effets d'attraction de la vue d'arrière-plan.

Answer 1

Vous pouvez peut-être modifier quelque chose comme le programme de Bin Zhang. RWBlurPopover pour le faire. Ce composant utilise mon GPUImage pour appliquer un flou gaussien aux composants situés en dessous de lui, mais vous pourriez tout aussi bien utiliser un CIGaussianBlur pour la même chose. L'image GPUImage pourrait être un peu plus rapide cependant .

Ce composant dépend de votre capacité à capturer la vue qui se trouve derrière celle que vous présentez, cependant, et peut avoir des difficultés avec les vues qui s'animent derrière ce contenu. La nécessité de passer par Core Graphics pour rastériser la vue d'arrière-plan ralentira les choses, donc nous n'avons probablement pas un accès suffisamment direct pour pouvoir le faire de manière performante pour les superpositions sur les vues animées.

Comme mise à jour de ce qui précède, j'ai récemment retravaillé les flous dans GPUImage pour qu'ils prennent en charge des rayons variables, permettant la reproduction complète de la taille du flou dans la vue du centre de contrôle d'iOS 7. À partir de là, j'ai créé la classe GPUImageiOS7BlurFilter qui encapsule la taille de flou appropriée et la correction de couleur qu'Apple semble utiliser ici. Voici comment le flou de GPUImage (à droite) se compare au flou intégré (à gauche) :

J'utilise un sous-échantillonnage / suréchantillonnage 4X pour réduire le nombre de pixels sur lesquels le flou gaussien doit opérer, de sorte qu'un iPhone 4S peut flouter tout l'écran en 30 ms environ en utilisant cette opération.

Le défi consiste toujours à tirer le contenu vers ce flou à partir de vues situées derrière celui-ci, de manière performante.

Answer 2

J'utilise FXBlurView qui fonctionne parfaitement sur iOS5+.

https://github.com/nicklockwood/FXBlurView

CocoaPods :

-> FXBlurView (1.3.1)
   UIView subclass that replicates the iOS 7 realtime background blur effect, but works on iOS 5 and above.
   pod 'FXBlurView', '~> 1.3.1'
   - Homepage: http://github.com/nicklockwood/FXBlurView
   - Source:   https://github.com/nicklockwood/FXBlurView.git
   - Versions: 1.3.1, 1.3, 1.2, 1.1, 1.0 [master repo]

Je l'ai ajouté en utilisant :

FXBlurView *blurView = [[FXBlurView alloc] initWithFrame:CGRectMake(50, 50, 150, 150)];
[self.blurView setDynamic:YES];
[self.view addSubview:self.blurView];

Answer 3

AVERTISSEMENT : quelqu'un a déclaré dans les commentaires qu'Apple rejetait les applications utilisant cette technique. Cela ne m'est PAS arrivé, mais juste pour votre considération.

Cela peut vous surprendre, mais vous pouvez utiliser une UIToolbar qui comprend déjà cet effet standard (uniquement pour iOS 7+). Dans la commande viewDidLoad de votre contrôleur de vue :

self.view.opaque = NO;
self.view.backgroundColor = [UIColor clearColor]; // Be sure in fact that EVERY background in your view's hierarchy is totally or at least partially transparent for a kind effect!

UIToolbar *fakeToolbar = [[UIToolbar alloc] initWithFrame:self.view.bounds];
fakeToolbar.autoresizingMask = self.view.autoresizingMask;
// fakeToolbar.barTintColor = [UIColor white]; // Customize base color to a non-standard one if you wish
[self.view insertSubview:fakeToolbar atIndex:0]; // Place it below everything

Answer 4

Depuis iOS8, vous pouvez utiliser UIBlurEffect .

Il existe de bons exemples sur iOS8Sampler avec UIBlurEffect et UIVibrancyEffect .

Answer 5

Vous pouvez créer une classe avec une UIToolBar qui est une sous-classe de UIView et l'instancier dans un contrôleur de vue séparé. Cette approche présente une UIToolBar translucide (sous-classée par UIView) qui fournit un retour d'information en direct (dans ce cas pour une AVCaptureSession).

VotreUIView.h

#import <UIKit/UIKit.h>

@interface YourUIView : UIView
@property (nonatomic, strong) UIColor *blurTintColor;
@property (nonatomic, strong) UIToolbar *toolbar;
@end

VotreUIView.m

#import "YourUIView.h"

@implementation YourUIView

- (instancetype)init
{
    self = [super init];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    // If we don't clip to bounds the toolbar draws a thin shadow on top
    [self setClipsToBounds:YES];

    if (![self toolbar]) {
        [self setToolbar:[[UIToolbar alloc] initWithFrame:[self bounds]]];
        [self.toolbar setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self insertSubview:[self toolbar] atIndex:0];

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[_toolbar]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:NSDictionaryOfVariableBindings(_toolbar)]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[_toolbar]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:NSDictionaryOfVariableBindings(_toolbar)]];
    }
}

- (void) setBlurTintColor:(UIColor *)blurTintColor {
    [self.toolbar setBarTintColor:blurTintColor];
}

@end

Une fois que l'UIView ci-dessus a été personnalisé, allez-y et créez une classe qui est une sous-classe d'un ViewController. Ci-dessous, j'ai créé une classe qui utilise une session AVCapture. Vous devez utiliser AVCaptureSession afin de remplacer la configuration de la caméra intégrée d'Apple. Ainsi, vous pouvez superposer la barre d'outils UIToolBar transparente à partir de la classe Votre point de vue classe.

VotreViewController.h

#import <UIKit/UIKit.h>

@interface YourViewController : UIViewController
@property (strong, nonatomic) UIView *frameForCapture;
@end

VotreViewController.m

#import "YourViewController.h"
#import <AVFoundation/AVFoundation.h>
#import "TestView.h"

@interface YourViewController ()
@property (strong, nonatomic) UIButton *displayToolBar;

@end

@implementation YourViewController

AVCaptureStillImageOutput *stillImageOutput;
AVCaptureSession *session;

- (void) viewWillAppear:(BOOL)animated
{
    session = [[AVCaptureSession alloc] init];
    [session setSessionPreset:AVCaptureSessionPresetPhoto];

    AVCaptureDevice *inputDevice = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    NSError *error;
    AVCaptureDeviceInput *deviceInput = [AVCaptureDeviceInput deviceInputWithDevice:inputDevice error:&error];

    if ([session canAddInput:deviceInput]) {
        [session addInput:deviceInput];
    }

    AVCaptureVideoPreviewLayer *previewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];
    [previewLayer setVideoGravity:AVLayerVideoGravityResizeAspectFill];
    CALayer *rootLayer = [[self view] layer];
    [rootLayer setMasksToBounds:YES];
    CGRect frame = [[UIScreen mainScreen] bounds];

    self.frameForCapture.frame = frame;

    [previewLayer setFrame:frame];

    [rootLayer insertSublayer:previewLayer atIndex:0];

    stillImageOutput = [[AVCaptureStillImageOutput alloc] init];
    NSDictionary *outputSettings = [[NSDictionary alloc] initWithObjectsAndKeys:AVVideoCodecJPEG, AVVideoCodecKey, nil];
    [stillImageOutput setOutputSettings:outputSettings];

    [session addOutput:stillImageOutput];

    [session startRunning];

    [self.navigationController setNavigationBarHidden:YES animated:animated];
    [super viewWillAppear:animated];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    /* Open button */

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 350, self.view.bounds.size.width, 50)];
    [button addTarget:self action:@selector(showYourUIView:) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Open" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    button.backgroundColor = [UIColor greenColor];
    [self.view addSubview:button];

    UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 50, self.view.bounds.size.width, 50)];
    [anotherButton addTarget:self action:@selector(showYourUIView:) forControlEvents:UIControlEventTouchUpInside];
    [anotherButton setTitle:@"Open" forState:UIControlStateNormal];
    [anotherButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
    anotherButton.backgroundColor = [UIColor redColor];
    [self.view addSubview:anotherButton];

}

- (void) showYourUIView:(id) sender
{
    TestView *blurView = [TestView new];
    [blurView setFrame:self.view.bounds];
    [self.view addSubview:blurView];
}

@end