web-dev-qa-db-fra.com

Vue de flou de style iOS 7

Est-ce que quelqu'un connaît des contrôles qui reproduiront les vues floues de style iOS7?.

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

Je parle de ces vues types qui rendent l’arrière-plan flou de manière extrêmement épaisse, de sorte qu’elles produisent des effets de tirage de la vue en arrière-plan.

enter image description here

iosobjective-ccore-graphics
113
endy

Vous pourriez peut-être modifier quelque chose comme RWBlurPopover de Bin Zhang pour le faire. Ce composant utilise mon GPUImage pour appliquer un flou gaussien aux composants situés en dessous, mais vous pouvez tout aussi facilement utiliser un CIGaussianBlur. GPUImage pourrait être n cheveu plus rapide cependant .

Ce composant dépend toutefois de votre capacité à capturer la vue derrière celle que vous présentez et peut rencontrer des problèmes avec les vues animées derrière ce contenu. La nécessité de parcourir Core Graphics pour rasteriser la vue d’arrière-plan ralentira le processus. Par conséquent, nous n’avons probablement pas un accès suffisamment direct pour pouvoir le faire de manière performante pour les superpositions de vues animées.

En guise de mise à jour de ce qui précède, j'ai récemment retravaillé les flous dans GPUImage afin de prendre en charge les rayons variables, permettant ainsi la réplication 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 et la correction de couleur appropriées que Apple semble utiliser ici. Voilà comment le flou de GPUImage (à droite) se compare à celui intégré flou (à gauche):

Apple's blurGPUImage's blur

J'utilise un sous-échantillonnage/suréchantillonnage 4X pour réduire le nombre de pixels sur lesquels le flou gaussien doit fonctionner. Ainsi, un iPhone 4S peut estomper l'écran entier en environ 30 ms.

Vous avez toujours le défi de tirer le contenu dans ce flou des vues derrière celui-ci de manière performante.

41
Brad Larson

J'utilise FXBlurView, qui fonctionne très bien sur iOS5 +

https://github.com/nicklockwood/FXBlurView

CacaoPods:

-> 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];
29
Paul Peelen

AVERTISSEMENT: dans les commentaires, quelqu'un a déclaré que Apple refuse les applications utilisant cette technique. Cela ne m'est pas arrivé, mais uniquement pour votre considération.

Cela peut vous surprendre, mais vous pouvez tiliser une UIToolbar, qui inclut déjà cet effet standard (uniquement iOS 7+). Dans la vue viewDidLoad du contrôleur:

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
27
cprcrack

Depuis iOS8, vous pouvez utiliser IBlurEffect .

Il existe de bons exemples sur iOS 8 Sampler avec IBlurEffect et IVibrancyEffect .

13
VivienCormier

La meilleure nouvelle façon d'obtenir une superposition floue consiste à utiliser la nouvelle fonctionnalité iOS 8 UIVisualEffectView.

UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *bluredView = [[UIVisualEffectView alloc] initWithEffect:effect];

bluredView.frame = self.view.bounds;

[self.view addSubview:bluredView];

UIBlurEffect prend en charge trois types de style. Dark, Light et ExtraLight.

13
Jeanette Müller

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 illustre un UIToolBar translucide (sous-classé par UIView) qui fournit des commentaires en direct (dans ce cas, pour une AVCaptureSession).

YourUIView.h

#import <UIKit/UIKit.h>

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

YourUIView.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 UIView ci-dessus a été personnalisé, continuez et créez une classe qui est une sous-classe d'un ViewController. Ci-dessous, j'ai créé une classe utilisant une session AVCapture. Vous devez utiliser AVCaptureSession afin de remplacer la configuration de caméra intégrée à Apple. Ainsi, vous pouvez superposer la barre UIToolBar transparente de la classe YourUIView.

YourViewController.h

#import <UIKit/UIKit.h>

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

YourViewController.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
1
74U n3U7r1no