¿Cómo usar UIVisualEffectView para desenfocar la imagen?


208

¿Podría alguien dar un pequeño ejemplo de cómo aplicar el desenfoque a una imagen? He estado tratando de descifrar el código por un tiempo :( ¡todavía nuevo en obj c!

El UIVisualEffectViewproporciona una abstracción simple a través de efectos visuales complejos. Dependiendo del efecto deseado, los resultados pueden afectar el contenido en capas detrás de la vista o el contenido agregado a la vista contentView.

Aplique a UIVisualEffectViewa una vista existente para aplicar un efecto de desenfoque o vitalidad a la vista existente. Después de agregar UIVisualEffectView a la jerarquía de vistas, agregue cualquier subvista al contentView de UIVisualEffectView. No agregue subvistas directamente a UIVisualEffectViewsí mismo.

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView


1
Tenga cuidado de añadir vistas a UIVisualEffectView's contentView github.com/onmyway133/blog/issues/124
onmyway133

Además, si lo agrega a una subvista y configura su marco, no olvide actualizar el marco en viewDidLayoutSubviews para asegurarse de que la rotación funcione.
Steve Moser

Respuestas:


415

Simplemente coloque esta vista borrosa en imageView. Aquí hay un ejemplo en Objective-C:

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

y rápido:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
¡Muchas gracias! Olvidé configurar el marco :( Todavía no hay nada en google para visual, por lo que este debería ser el primer término de búsqueda :)
cNoob

1
¡Mejor espero que la API no cambie! Esa es una de las razones por las que discutir las API de Apple aún no lanzadas puede ser complicado. Por ejemplo, algunas de las API de UIKit Dynamics cambian ligeramente entre beta y versión. Nada importante, pero habrían roto cualquier código de muestra escrito contra las API originales.
Zev Eisenberg

55
¿Hay alguna forma de animar el desenfoque de entrada / salida?
Ruben Martinez Jr.

3
@BS Puede animar el alfa de la vista de efectos visuales. Auge.
Maciej Trybiło

2
UIBlurEffect es increíble, pero tenga en cuenta que no funciona en dispositivos más antiguos como el iPad2: pasé horas tratando de descubrir por qué solo estaba poniendo una capa translúcida sobre mi pantalla y no estaba borrosa, todo fue porque estaba probando en un dispositivo más antiguo
Keith el

135

Aquí se explica cómo usar UIVibrancyEffect y UIBlurEffect con UIVisualEffectView

C objetivo:

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

Swift 4:

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

1
La solución funciona incluso sin subclases, solo definaextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
Apple parece haber solucionado el error. La solución alternativa de subclase / extensión ya no es necesaria en iOS 8 beta 2.
Benjamin Mayo

2
Gracias. He probado y confirmado la corrección de errores y editado la respuesta.
Matt Rundle

1
Estoy tratando de agregar esto a mi vista, pero cada vez que presento la vista, se vuelve borrosa una y otra vez hasta que obtengo un fondo blanco ... Elimino la vista con removeFromSuperView después de descartarla, pero obtengo el mismo resultado ... .. ¿algunas ideas?
George Asda

@GeorgeAsda ¿qué tal en lugar de llamar removeFromSuperView, haces el [self.visualEffectView setHidden:NO];? Asignar y agregar a la vista es una operación costosa que ocultar o mostrar.
Yoon Lee

46

También puede usar el generador de interfaces para crear estos efectos fácilmente en situaciones simples. Dado que los valores z de las vistas dependerán del orden en que se enumeran en el Esquema del documento, puede arrastrar un UIVisualEffectViewal contorno del documento antes de la vista que desea desenfocar. Esto crea automáticamente un anidado UIView, que es contentViewpropiedad de lo dado UIVisualEffectView. Anida cosas dentro de esta vista que deseas que aparezcan encima del desenfoque.

XCode6 beta5

También puede aprovechar fácilmente la vitalidad UIVisualEffect, que creará automáticamente otra anidada UIVisualEffectViewen el esquema del documento con la vitalidad habilitada de forma predeterminada. A continuación, puede agregar una etiqueta o vista de texto al anidado UIView(nuevamente, la contentViewpropiedad del UIVisualEffectView), para lograr el mismo efecto que el elemento de la interfaz de usuario "> deslizar para desbloquear".

ingrese la descripción de la imagen aquí


¿Puedes confirmar que lo que se muestra está borroso? Mi imagen (lo que llamó "BackgroundPhoto" en su jerarquía) se atenúa bajo un Estilo de desenfoque: Vista translúcida oscura. (Versión de lanzamiento de Xcode 6.01 y uso del simulador de iOS)
tobinjim

¿Qué quieres decir con 'solo está atenuado'? ¿No crees que está borroso entonces?
ohhh

Bien, lo miraré en unas horas.
ohhh

¡Gracias! Tiene una jerarquía de vistas en su BackgroundPhoto que se contrae en las capturas de pantalla ... Acabo de usar un UIImageView y le asigné una foto (un perro de color claro sobre fondo verde: la definición nítida entre las patas blancas y la hierba verde es tan nítido cuando está cubierto por la vista de efectos visuales como cuando no lo está).
tobinjim

1
He visto que al cambiar el tipo de desenfoque a Oscuro, la etiqueta adquiere un color blanco ...
Daniel

8

Prefiero crear efectos visuales a través de Storyboard: no se usa código para crear o mantener elementos de la interfaz de usuario. También me da soporte completo para el paisaje. He hecho una pequeña demostración del uso de UIVisualEffects con Blur y también Vibrancy.

Demo en Github


8

Si a alguien le gustaría la respuesta en Swift:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

Actualización:

A partir de ahora, está disponible bajo el IB para que no tenga que codificar nada :)


2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

Agregue un texto con la respuesta para ver cómo su respuesta ayuda a OP a solucionar el problema publicado
ρяσѕρєя K

0

Esto se utiliza para desenfocar fondos, ya sean claros u oscuros, para que el texto se pueda superponer más fácilmente. Opcionalmente, puede habilitar la vitalidad, lo que hace que el texto se represente en un color brillante y contrastante junto con el desenfoque.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.