uilabel - Cómo replicar el texto borroso en el Centro de notificaciones(iOS 8)

ios8 blur

Question

Estoy jugando con TodayExtension en iOS 8 y me pregunté cómo aplicar ese efecto de desenfoque al texto o a los botones. Ya me di cuenta de que tiene algo que ver con UIVisualEffectView. Pero no sé cómo usarlo.

Estoy usando Objective-C

¿Alguien puede explicarme cómo lograr esto?

Gracias david

Answer 1

El botón "Bearbeiten" se puede recrear dibujando un texto transparente en el botón. Cómo hacer esto ha sido respondido en this post.

Por favor, vea más abajo para mi solución. El iOS original "Bearbeiten" todavía se ve un poco diferente. Lo he hecho parecer similar cambiando el alfa. No es la solución correcta. Espero que esta publicación provoque que alguien encuentre la manera correcta de hacerlo (y la comparta).

En viewDidLoad :

_pinButton.backgroundColor = [UIColor clearColor];
_pinButton.layer.cornerRadius = 4.0;
_pinButton.clipsToBounds = YES;

UIColor *white = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.75];
UIColor *whiteT = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.3];
UIFont *buttonFont = [UIFont fontWithName:@"HelveticaNeue" size:12.0];

[_pinButton setImage:[self imageWithCutOutString:@"Pin" 
                                            size:_pinButton.frame.size 
                                 backgroundColor:white 
                                            font:buttonFont] 
            forState:UIControlStateNormal];

[_pinButton setImage:[self imageWithCutOutString:@"Pin" 
                                            size:_pinButton.frame.size 
                                 backgroundColor:whiteT 
                                            font:buttonFont]
            forState:UIControlStateHighlighted];

Y el imageWithCutOutString método imageWithCutOutString :

- (UIImage *)imageWithCutOutString:(NSString *)string size:(CGSize)size backgroundColor:(UIColor *)backgroundColor font:(UIFont *)font
{
    NSDictionary *textAttributes = @{ NSFontAttributeName:font };

    CGSize textSize = [string sizeWithAttributes:textAttributes];

    UIGraphicsBeginImageContextWithOptions(size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(ctx, backgroundColor.CGColor);

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0.0, 0.0, size.width, size.height)];
    CGContextAddPath(ctx, path.CGPath);
    CGContextFillPath(ctx);

    CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut);
    CGPoint center = CGPointMake((size.width - textSize.width) / 2.0, (size.height - textSize.height) / 2.0);
    [string drawAtPoint:center withAttributes:textAttributes];

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return image;
}

Answer 2

En realidad estás viendo dos efectos aquí. El fondo tiene un efecto de desenfoque aplicado y las etiquetas tienen un efecto de vibración aplicado.

Para el efecto de desenfoque, primero inicializa un UIBlurEffect con un estilo (oscuro, claro, extra claro):

UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

Para el efecto de vibración, inicializa un Efecto de vibración UIV con el efecto de desenfoque que acaba de crear:

UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

Esto se debe a que el efecto de vibración debe tener en cuenta el efecto de desenfoque subyacente.

A continuación creas dos UIVisualEffectViews:

UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

Estos deben agregarse a la jerarquía de vistas. UIVisualEffectView tiene una propiedad contentView a la que debe agregar subvistas a las que desea aplicar el efecto correspondiente. Asegúrese de que vibrancyEffectView se agregue sobre, o como una subvista de la vista de contenido, del blurEffectView.

También puedes configurar todo esto en IB (estoy usando Xcode 6 beta 5). Hay una "Vista de efecto visual con desenfoque" y una "Vistas de efecto visual con desenfoque y vibración" en la Biblioteca de objetos que puede arrastrar a una vista. Las "Vistas de efectos visuales con desenfoque y vibración" configuran dos UIVisualEffectViews anidadas como se describió anteriormente.

Consulte la sesión 221 de WWDC14 y el encabezado UIVisualEffectView.h para obtener más información.

Answer 3

He intentado los ejemplos anteriores, pero ninguno de ellos parecía funcionar fuera de la caja. Aquí hay un ejemplo similar que funciona para mí:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIVibrancyEffect *effect = [UIVibrancyEffect notificationCenterVibrancyEffect];

    UIVisualEffectView *outer = [[UIVisualEffectView alloc] initWithEffect:effect];
    outer.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    outer.frame = self.view.bounds;

    UIVisualEffectView *inner = [[UIVisualEffectView alloc] initWithEffect:effect];
    inner.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    inner.frame = self.view.bounds;

    UILabel *label = [UILabel new];
    label.text = @"HELLO, I am a vibrant label";
    label.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    label.frame = self.view.bounds;

    [inner.contentView addSubview:label];
    [outer.contentView addSubview:inner];
    [self.view addSubview:outer];
}

Answer 4

Pude lograr el botón "Bearbeiten" usando AYVibrantButton con el estilo AYVibrantButtonStyleFill :

// Create the button
AYVibrantButton* moreButton = [[AYVibrantButton alloc] initWithFrame:CGRectMake(0, 0, 210, 30) style:AYVibrantButtonStyleFill];
// Set the vibrancy effect to the one provided by notification center
moreButton.vibrancyEffect = [UIVibrancyEffect notificationCenterVibrancyEffect];
// Setup basic button properties
moreButton.text = @"Show More..";
moreButton.font = [UIFont systemFontOfSize:13.0];
// Add it to your view
[self.view addSubview:moreButton];

Answer 5

Respuesta actualizada para iOS 10

En iOS 10, puede usar widgetPrimaryVibrancyEffect y widgetSecondaryVibrancyEffect para devolver automáticamente un objeto UIVibrancyEffect .

Echa un vistazo a la documentación here y here .

Respuesta para iOS 9

Utilice este código para aplicar un efecto de vibración a todo su widget:

UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect notificationCenterVibrancyEffect]];
effectView.frame = self.view.bounds
effectView.autoresizingMask = self.view.autoresizingMask;

__strong UIView *oldView = self.view;

self.view = effectView;

[effectView.contentView addSubview:oldView];

self.view.tintColor = [UIColor clearColor];