¿Cómo utilizar UIVisualEffectView para desenfocar la imagen?
¿Alguien podría 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 :( ¡aún soy nuevo en obj c!
Proporciona
UIVisualEffectView
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
UIVisualEffectView
a 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 las subvistas a contentView deUIVisualEffectView
. No agregue subvistas directamente a laUIVisualEffectView
misma.
https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView
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)
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];
Rápido:
// 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)
También puedes utilizar el generador de interfaces para crear estos efectos fácilmente para situaciones simples. Dado que los valores z de las vistas dependerán del orden en que aparecen en el esquema del documento, puede arrastrar a UIVisualEffectView
al esquema del documento antes de la vista que desea desenfocar. Esto crea automáticamente un anidado UIView
, que es contentView
propiedad del dado UIVisualEffectView
. Anide las cosas dentro de esta vista que desea que aparezcan encima del desenfoque.
También puedes aprovechar fácilmente la vitalidad UIVisualEffect
, que creará automáticamente otro esquema anidado UIVisualEffectView
en el documento con la vitalidad habilitada de forma predeterminada. Luego puede agregar una etiqueta o vista de texto al elemento de interfaz de usuario anidado UIView
(nuevamente, la contentView
propiedad de UIVisualEffectView
), para lograr el mismo efecto que el elemento de interfaz de usuario "> deslizar para desbloquear".
Prefiero crear efectos visuales a través del guión gráfico: no se utiliza código para crear o mantener elementos de la interfaz de usuario. También me brinda soporte horizontal completo. Hice una pequeña demostración del uso de UIVisualEffects con Blur y también Vibrancy.
Demostración en Github