ios - framework - ¿Cómo usar UIVisualEffectView?

que es uikit framework

Question

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

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

Aplique un UIVisualEffectView a una vista existente para aplicar un efecto de desenfoque o vibración a la vista que sale. Después de agregar UIVisualEffectView a la jerarquía de vistas, agregue cualquier subvista a contentView de UIVisualEffectView . No agregue subvistas directamente a UIVisualEffectView .

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

Answer 1

Aquí es 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)

Answer 2

Prefiero crear efectos visuales a través de Storyboard: no se utiliza ningún código para crear o mantener elementos de UI. También me da apoyo total del paisaje. He hecho una pequeña demostración del uso de UIVisualEffects con Blur y Vibrancy.

Demo en Github

Answer 3

Si alguien quisiera 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 para ello :)

Answer 4

Simplemente ponga esta vista borrosa en la vista de imagen. 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 Swift:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

Answer 5

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 UIVisualEffectView al contorno del documento antes de la vista que desea difuminar. Esto crea automáticamente una UIView anidada, que es la propiedad contentView del UIVisualEffectView dado. Anida cosas dentro de esta vista que quieras que aparezcan en la parte superior del desenfoque.

También puede aprovechar fácilmente el UIVisualEffect , que creará automáticamente otro UIVisualEffectView anidado en el perfil del documento con vibrancy habilitado de forma predeterminada. Luego puede agregar una etiqueta o vista de texto a la vista UIView anidada (nuevamente, la propiedad contentView de UIVisualEffectView ), para lograr el mismo efecto que el elemento de la interfaz de usuario "> deslizar para desbloquear".

Answer 6

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

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

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