En la aplicación Música del nuevo iOS, podemos ver la portada de un álbum detrás de una vista que lo difumina.
¿Cómo se puede lograr algo así? He leído la documentación, pero no encontré nada allí.
ios
objective-c
graphics
filtering
core-image
kondratyevdev
fuente
fuente
Respuestas:
Puedes usar
UIVisualEffectView
para lograr este efecto. Esta es una API nativa que se ha ajustado para el rendimiento y la excelente duración de la batería, además de que es fácil de implementar.Rápido:
C objetivo:
Si presenta este controlador de vista de manera modal para desenfocar el contenido subyacente, deberá establecer el estilo de presentación modal en Contexto sobre actual y establecer el color de fondo para borrar para garantizar que el controlador de vista subyacente permanecerá visible una vez que se presente de manera sobresaliente.
fuente
insertSubView:belowSubView:
comentario en este código, he usado lo siguiente para establecer el desenfoque como fondo de la vista:view.insertSubview(blurEffectView, atIndex: 0)
UIAccessibilityIsReduceTransparencyEnabled()
.Imagen central
Dado que esa imagen en la captura de pantalla es estática, puede usarla
CIGaussianBlur
desde Core Image (requiere iOS 6). Aquí hay una muestra: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mEso sí, esto es más lento que las otras opciones en esta página.
Desenfoque de pila (Box + Gaussian)
Acelerar el marco
En la sesión "Implementación de la interfaz de usuario atractiva en iOS" de WWDC 2013, Apple explica cómo crear un fondo borroso (a las 14:30) y menciona un método
applyLightEffect
implementado en el código de muestra usando Accelerate.framework.GPUImage usa sombreadores OpenGL para crear desenfoques dinámicos. Tiene varios tipos de desenfoque: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Incluso hay un GPUImageiOSBlurFilter que "debería replicar completamente el efecto de desenfoque proporcionado por el panel de control de iOS 7" ( tweet , artículo ). El artículo es detallado e informativo.
Desde indieambitions.com: realice un desenfoque con vImage . El algoritmo también se usa en iOS-RealTimeBlur .
De Nick Lockwood: https://github.com/nicklockwood/FXBlurView El ejemplo muestra el desenfoque sobre una vista de desplazamiento. Se difumina con dispatch_async, luego se sincroniza para llamar a las actualizaciones con UITrackingRunLoopMode para que el desenfoque no se retrase cuando UIKit le da más prioridad al desplazamiento de UIScrollView. Esto se explica en el libro de Nick, iOS Core Animation , que por cierto es genial.
Desenfoque de iOS Esto toma la capa de desenfoque de la UIToolbar y la coloca en otro lugar. Apple rechazará su aplicación si utiliza este método. Ver https://github.com/mochidev/MDBlurView/issues/4
Del blog de Evadne: LiveFrost: Rápido, Sincrónico UIView Snapshot Convolving . Gran código y una gran lectura. Algunas ideas de esta publicación:
Otras cosas
Andy Matuschak dijo en Twitter: "ya sabes, muchos de los lugares donde parece que lo estamos haciendo en tiempo real, es estático con trucos ingeniosos".
En doubleencore.com dicen "hemos descubierto que un radio de desenfoque de 10 puntos más un aumento de 10 puntos en la saturación mejor imita el efecto de desenfoque de iOS 7 en la mayoría de las circunstancias".
Un vistazo a los encabezados privados de SBFProceduralWallpaperView de Apple .
Finalmente, esto no es un desenfoque real, pero recuerde que puede configurar rasterizationScale para obtener una imagen pixelada: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/
fuente
UIImage
dispositivoDecidí publicar una versión escrita de Objective-C de la respuesta aceptada solo para proporcionar más opciones en esta pregunta.
Las restricciones podrían eliminarse si lo desea en caso de que solo admita el modo vertical o simplemente agregue una bandera a esta función para usarlas o no.
fuente
No creo que se me permita publicar el código, pero la publicación anterior que menciona el código de muestra WWDC es correcta. Aquí está el enlace: https://developer.apple.com/downloads/index.action?name=WWDC%202013
El archivo que está buscando es la categoría en UIImage, y el método es applyLightEffect.
Como señalé anteriormente en un comentario, el Apple Blur tiene saturación y otras cosas además del desenfoque. Un simple desenfoque no servirá ... si está buscando emular su estilo.
fuente
Creo que la solución más fácil para esto es anular UIToolbar, que borra todo lo que hay detrás en iOS 7. Es bastante astuto, pero es muy sencillo de implementar y rápido.
Puedes hacerlo con cualquier vista, solo conviértela en una subclase de
UIToolbar
lugar deUIView
. Incluso puedes hacerlo conUIViewController
laview
propiedad de un, por ejemplo ...1) cree una nueva clase que sea una "Subclase de"
UIViewController
y marque la casilla "Con XIB para la interfaz de usuario".2) Seleccione la Vista y vaya al inspector de identidad en el panel de la derecha (alt-command-3). Cambia la "Clase" a
UIToolbar
. Ahora vaya al inspector de atributos (alt-command-4) y cambie el color de "Fondo" a "Color claro".3) Agregue una subvista a la vista principal y conéctela a un IBOutlet en su interfaz. Llamarlo
backgroundColorView
. Se verá más o menos así, como una categoría privada en el.m
archivo de implementación ( ).4) Vaya al
.m
archivo de implementación del controlador de vista ( ) y cambie el-viewDidLoad
método, para que tenga el siguiente aspecto:Esto le dará una vista en gris oscuro, que desdibuja todo lo que hay detrás. Sin negocios divertidos, sin desenfoque lento de la imagen central, utilizando todo lo que está a su alcance proporcionado por el OS / SDK.
Puede agregar la vista de este controlador de vista a otra vista, de la siguiente manera:
¡Avíseme si algo no está claro, estaré encantado de ayudarlo!
Editar
UIToolbar se ha cambiado en 7.0.3 para dar un efecto posiblemente no deseado cuando se usa un desenfoque de color.
Solíamos poder configurar el color usando
barTintColor
, pero si lo hacía antes, necesitará configurar el componente alfa en menos de 1. De lo contrario, su UIToolbar será de color completamente opaco, sin desenfoque.Esto se puede lograr de la siguiente manera: (teniendo en cuenta que
self
es una subclase deUIToolbar
)Esto le dará un tono azulado a la vista borrosa.
fuente
self.backgroundColorView.opaque = NO;
self.backgroundColorView.alpha = 0.5;
self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
pero el fondo no está borroso, solo tiene un bonito efecto de sobre. gracias de todos modos!Aquí hay una implementación rápida en Swift usando CIGaussianBlur:
fuente
Escala de desenfoque personalizada
Puede probar
UIVisualEffectView
con una configuración personalizada como:Salida: para
blurEffect.setValue(1...
yblurEffect.setValue(2..
fuente
(NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()
¡Realmente agradecería algo de ayuda!Aquí hay una manera fácil de agregar desenfoque personalizado sin regatear con API privadas usando UIViewPropertyAnimator :
Primero, declare la propiedad de clase:
Luego configure su vista borrosa en
viewDidLoad()
:Nota: Esta solución no es adecuada para
UICollectionView
/UITableView
celdasfuente
Desde Xcode puedes hacerlo fácilmente. Siga los pasos de xcode. Grabe la vista de efectos visuales en su vista uiview o imagen.
Happy Coding :)
fuente
La respuesta aceptada es correcta, pero falta un paso importante aquí, en caso de que esta vista, para la que desea un fondo borroso, se presente utilizando
[self presentViewController:vc animated:YES completion:nil]
De forma predeterminada, esto negará el desenfoque ya que UIKit elimina la vista del presentador, que en realidad está borrando. Para evitar esa eliminación, agregue esta línea antes de la anterior
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
O usa otros
Over
estilos.fuente
C OBJETIVO
SWIFT 3.0
de: https://stackoverflow.com/a/24083728/4020910
fuente
Usando UIImageEffects
Para las personas que desean un mayor control, puede utilizar el
UIImageEffects
código de muestra de Apple .Puede copiar el código
UIImageEffects
de la Biblioteca de desarrolladores de Apple: Desenfocar y teñir una imagenY aquí está cómo aplicarlo:
fuente
fuente
Encontré esto por accidente, me da excelentes resultados (casi duplicados con los de Apple) y usa el marco de aceleración. - http://pastebin.com/6cs6hsyQ * No escrito por mí
fuente
Esta respuesta se basa en la excelente respuesta anterior de Mitja Semolic . Lo convertí a Swift 3, agregué una explicación de lo que está sucediendo en los comentarios, lo convertí en una extensión de UIViewController para que cualquier VC pueda llamarlo a voluntad, agregué una vista borrosa para mostrar una aplicación selectiva y agregué un bloque de finalización para que el controlador de vista de llamada puede hacer lo que quiera al finalizar el desenfoque.
He confirmado que funciona con iOS 10.3.1 y iOS 11
fuente
Un suplemento importante a la respuesta de @ Joey
Esto se aplica a una situación en la que desea presentar un fondo borroso
UIViewController
conUINavigationController
.¡Disfrutar!
fuente
Versión Swift 3 de la respuesta de Kev para devolver una imagen borrosa -
fuente
Código 2019
Aquí hay un ejemplo más completo usando la sorprendente técnica @AdamBardon.
{Aparte: como cuestión general de ingeniería de iOS,
didMoveToWindow
puede ser más adecuado para usted quedidMoveToSuperview
. En segundo lugar, puede utilizar alguna otra forma de desmontaje, pero el desmontaje son las dos líneas de código que se muestran allí.}BlurryBall
es solo unUIVisualEffectView
. Observe los inits para una vista de efectos visuales. Si necesita esquinas redondeadas o lo que sea, hágalo en esta clase.fuente
Apple ha proporcionado una extensión para la clase UIImage llamada UIImage + ImageEffects.h. En esta clase, tiene los métodos deseados para difuminar su vista
fuente
Aquí está el código Swift 2.0 para la solución que se ha proporcionado en la respuesta aceptada :
fuente
Si agrega una vista borrosa oscura para tableView, esto lo hará maravillosamente:
fuente
Puede hacer su desenfoque de fondo directamente con "Vista de efecto visual con desenfoque" y "Vista de efecto visual con desenfoque y vitalidad".
Todo lo que tienes que hacer para hacer Blur Background en la aplicación iOS es ...
Paso 1 Imagen
Paso 2 Imagen
Diseño de la aplicación antes de hacer clic en cualquier botón!
Vista de la aplicación después de hacer clic en el botón, lo que hace que todo el fondo de la aplicación se vuelva borroso.
fuente
En caso de que esto ayude a alguien, aquí hay una extensión rápida que creé basada en la respuesta de Jordan H. Está escrita en Swift 5 y puede usarse desde el Objetivo C.
NOTA: Si desea desenfocar el fondo de un UILabel sin afectar el texto, debe crear un UIView de contenedor, agregar el UILabel al UIView del contenedor como una subvista, establecer el backgroundColor de UILabel en UIColor.clear y luego llamar a blurBackground (style : UIBlurEffect.Style, fallbackColor: UIColor) en el contenedor UIView. Aquí hay un ejemplo rápido de esto escrito en Swift 5:
fuente
Swift 4:
Para agregar una superposición o la vista emergente También puede usar la Vista de contenedor con la que obtiene un Controlador de vista gratuito (obtiene la Vista de contenedor de la paleta / biblioteca de objetos habitual)
Pasos:
Tenga una Vista (ViewForContainer en la imagen) que contenga esta Vista de contenedor, para atenuarla cuando se muestre el contenido de la Vista de contenedor. Conecte la salida dentro del primer controlador de vista
Ocultar esta vista cuando se carga el primer VC
Mostrar cuando se hace clic en el botón ingrese la descripción de la imagen aquí
Para atenuar esta vista cuando se muestra el contenido de la vista de contenedor, configure el fondo de las vistas en negro y la opacidad en 30%
He agregado una respuesta a la creación de la vista popview en otra pregunta de Stackoverflow https://stackoverflow.com/a/49729431/5438240
fuente
La respuesta simple es Agregar una subvista y cambiar su alfa.
fuente