Cómo utilizar el efecto de desenfoque en iOS 8
La aplicación proporciona a los usuarios una colección de cuentos de hadas. Cuando el usuario hace clic en un cuento de hadas, se muestra el contenido completo de la historia en la pantalla. Los usuarios pueden personalizar las fuentes de visualización, la alineación del texto y los temas de color para la lectura de día o de noche.
Ahora necesita descargar un proyecto inicial, abrir Grimm.xcodeproj en Xcode y luego abrir Grimm.storyboard para ver el controlador de vista en la aplicación, como se muestra a continuación:
storyboard .png
Puedes omitir el controlador de vista frontal en la imagen de arriba porque es solo un simple controlador de navegación inferior en la aplicación. A lo que debes prestar atención son a los controladores de vista numerados:
1. El primer controlador es StoryListController, que muestra una lista de todos los cuentos de hadas en la base de datos.
2. Cuando haces clic en un cuento de hadas, cambiarás al controlador de vista StoryViewController, que mostrará el título y el contenido del texto del cuento de hadas seleccionado.
3. El último OptionsController está contenido en StoryViewController, que enumera algunas de las opciones de fuente, alineación y color disponibles. Simplemente haga clic en el icono de configuración en StoryViewController para mostrarlo.
Compile y ejecute, verá la interfaz inicial como se muestra a continuación:
firstrun.png
Puede experimentar esta aplicación. Después de seleccionar un cuento de hadas, haga clic en los puntos suspensivos para abrir la vista de opciones y cambiar entre diferentes fuentes y modos de lectura para que pueda comprender las funciones básicas de la interfaz de usuario.
Consejo: Puedes ejecutar esta aplicación en el simulador o en un dispositivo iOS 8 que no sea iPad 2. Apple ha limitado la visualización de efectos de desenfoque en el iPad 2 por motivos de rendimiento. La aplicación en sí funciona bien en el iPad 2, pero no verás ningún efecto borroso agradable.
Tecnología de desenfoque artificial
Los estudiantes con visión aguda pueden descubrir que todavía hay código Objective-C en este proyecto.
objcnswift.png
No hay necesidad de preocuparse por esto. Este código Objective-C se utiliza en muchos proyectos de aplicaciones y es bastante potente. Su función es acceder al archivo de encabezado Grimm-Bridging-Header.h en todos sus archivos Swift, porque no necesitamos reescribir uno para Swift aquí.
Consejo: Swift está diseñado para ser compatible con Objective-C para que los desarrolladores, incluidos los propios desarrolladores de Apple, puedan agregar código Swift directamente a los proyectos sin la molestia de refactorizar el código. Después de conectar los archivos de encabezado, puede escribir código Objective-C en sus archivos Swift.
Abre el archivo Grimm\Categories\ui imagen efectos de imagen. m, y omita todos los comentarios anteriores, mire el fragmento de código de ApplyBruhwithradius:Tintcolor:SaturabionDeltafactor:maskimage: format. Este tutorial no cubrirá ni modificará el código de principio a fin, pero leerlo le ayudará a comprender qué funciones básicas se incluyen.
Cuando se lanzó iOS 7, Apple también proporcionó la clase UIImage para demostrar cómo aplicar desenfoque estático a las imágenes. Esto aprovecha al máximo el marco Accelerate al utilizar operaciones vectoriales y matriciales, lo que hace que sea más conveniente utilizar estos cálculos en el procesamiento de imágenes.
AplicarBlurwithradius: tono color: factor delta de saturación: imagen de máscara: Los parámetros aquí son radio de desenfoque, saturación e imagen de máscara opcional. Este método utilizará muchas operaciones matemáticas para generar nuevas imágenes procesadas.
Tomar una instantánea
Antes de utilizar el efecto de desenfoque, debes tomar una instantánea. Hoy, la mayor parte de su esfuerzo se dedicará a dibujar la selección en la parte inferior de la vista StoryViewController.
Abra el archivo StoryViewController.swift y busque el método setOptionsHidden. Aquí primero obtendrá una captura de pantalla de todo StoryViewController y luego la difuminará en la imagen de fondo de la interfaz de opciones.
Agregue el siguiente método antes del método setOptionsHidden:
func updateBlur() {
//Para evitar interceptar la interfaz de opciones al tomar capturas de pantalla, primero asegúrese de que la interfaz de opciones esté oculta.
Vista del contenedor de opciones. Hidden = true
//Crea un nuevo ImageContext para dibujar capturas de pantalla. No es necesario renderizar capturas de pantalla HD en resolución completa. El uso de ImageContext ahorra muchos cálculos.
UIGraphicsBeginImageContextWithOptions(self. view.bounds. size, true, 1)
//Dibuje la interfaz en StoryViewController en ImageContext, porque debe asegurarse de que la interfaz de opciones esté oculta. Por lo tanto, debes esperar a que la pantalla se actualice antes de dibujar.
self . view . drawviehierarchyinrect(self . view .bounds, afterScreenUpdates: true)
// Coloque ImageContext en UIImage y luego limpie ImageContext.
let screen shot = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
Después de hacer clic en los puntos suspensivos, debe llamar a updateBlur método para difuminar la captura de pantalla, por lo que debe agregar el siguiente código al comienzo del método setOptionsHidden:
1
2
Tres
Si! Ocultar {
updateBlur()
}
Antes de continuar con el siguiente paso, debes verificar si ya has cortado la imagen que deseas cortar.
Busque la línea UIGraphicsEndImageContext() en el código fuente del método updateBlur agregado en el paso anterior y agregue un punto de interrupción, luego compílelo y ejecútelo, seleccione un hada y ábralo.
Una vez abierto el cuento de hadas, haz clic en los puntos suspensivos para activar el punto de interrupción. Expanda las variables de captura de pantalla en la barra de depuración y luego seleccione algunas de las siguientes variables anidadas en ella:
debug1.png
Haga clic en la barra espaciadora para abrir Vista rápida y debería vea la barra de historias.
Como se muestra a continuación:
debug2.png
Tenga en cuenta que la captura de pantalla no incluye ningún elemento en UINavigationController, porque la vista de la lista de historias existe como imagen de fondo de UINavigationController. , el controlador de navegación Ubicado fuera del área de captura de pantalla.
Ahora puedes obtener una instantánea correcta. Puedes comenzar a difuminar tus capturas de pantalla usando la clase UIImage que mencionamos anteriormente.
Desdibuja tus instantáneas.
Aún abre el archivo StoryViewController.swift, busca el método updateBlur que acabas de cambiar y agrega esta línea de código debajo de la última línea de UIGraphicsEndImageContext():
1
let blur = captura de pantalla. applylighteffect()
Mueva el punto de interrupción que acaba de agregar al archivo de la siguiente manera:
debug3.png
Consejo: Puede arrastrar el punto de interrupción hacia arriba o hacia abajo en el surco de desplazamiento.
Compile y ejecute, abra un cuento de hadas, haga clic en los puntos suspensivos en el navegador, luego busque la variable oscura en la barra de depuración, use el espacio para abrir la vista rápida.
Espera un momento... ¿parece que no hay nada en él? ¿dónde has estado?
No ves nada porque tu punto de interrupción está en la línea donde se establece la variable borrosa, por lo que Xcode se detiene un paso antes de ejecutar esta línea.
Para ejecutar la línea resaltada en la imagen a continuación, puede presionar F6 o hacer clic en Siguiente como se muestra:
debug4.png
Ahora, puede expandir el variables de desenfoque, seleccione una de las variables en la parte inferior y haga clic en la barra espaciadora para invocar Vista rápida y ver su imagen borrosa:
debug5.png
Consejo: lldb( El depurador de xcode ) a veces no funciona con Swift, por lo que es posible que tengas que hacer clic en Siguiente dos veces para mostrar algunas variables.
Ahora puedes tomar una instantánea y desenfocarla, lo siguiente que debes hacer es agregar esta imagen borrosa a la aplicación.
Mostrar una imagen borrosa en la vista
Abra el archivo StoryViewController.swift y agregue la siguiente línea al comienzo de la pila de código definida por la propiedad:
var blurView = UIImageView()
Aquí inicializas un UIImageView para cada instancia de StoryViewController.
Busque el método viewDidLoad y agregue el siguiente párrafo al final:
vista de contenedor de opciones subvistas[0]. insertSubview(blurView, atIndex: 0)
En Grimm.storyboard, el OptionsController se coloca en un contenedor de vista para que aparezca cuando el usuario hace clic en los puntos suspensivos. Como no necesita usar directamente la capa donde se encuentra OptionsController, todo lo que tiene que hacer es obtener la subvista de este contenedor, que en este caso pertenece a la capa de vista de OptionsController. Finalmente, debe agregar la vista borrosa como una subvista en la parte inferior de la pila de vistas para asegurarse de que esté debajo de todas las demás vistas.
Busque el método updateBlur en el archivo StoryViewController.swift y agregue el siguiente código al final:
vista de desenfoque. marco = límites de vista del contenedor.
Vista de desenfoque. imagen = desenfoque
vista de contenedor de opciones. oculta = false
Debido a que blurView no se ha configurado en el Storyboard, tendrá una imagen CGRectZero a menos que lo haya configurado manualmente. Por supuesto, también puedes configurar las propiedades de la imagen que acabas de difuminar.
Tenga en cuenta aquí que configura las opcionesContainerView en un estado oculto invisible antes de tomar la captura de pantalla. Recuerde siempre configurar optionsContainerView para que sea visible al final del método de desenfoque.
Cancele el punto de interrupción establecido previamente, cree y ejecute, seleccione un cuento de hadas y haga clic en la opción de configuración, preste atención al efecto de desenfoque dentro de su rango, como se muestra a continuación:
manualblur1. png
¿Este desenfoque todavía parece un poco obsceno porque no parece coincidir con el texto a continuación?
De forma predeterminada, UIImageView restablece el tamaño de la imagen para garantizar que se ajuste a la imagen en la vista, lo que significa que las imágenes borrosas más grandes se comprimen. Entonces tuvo este efecto.
Para corregir este error, debe cambiar la propiedad contentMode de UIImageView a algo distinto del UIViewContentMode.ScaleToFill predeterminado.
Pegue este código al final de la línea en updateBlur que establece el desenfoqueView:
1
blurView.contentMode =. Abajo
UIViewContentMode. Abajo se refiere a forzar que la imagen mantenga su tamaño original, no solo la parte media e inferior del UIImageView original.
Construye y ejecuta, ¿ahora ves cómo funciona Xia Ying?
manualblur2.png
Hay una cosa más que debes considerar antes de que tu desenfoque estático esté listo para usar. Gire su dispositivo o máquina virtual (comando teclas de flecha izquierda/derecha) y podrá ver que el tamaño de la vista no se restablece.
Debido a que todo el texto se presenta automáticamente, las capturas de pantalla anteriores ya no son útiles. Debe tomar una nueva instantánea y actualizar BlurView después de la rotación.
Esto se puede lograr de forma muy sencilla. Anule el siguiente método en StoryViewController.swift:
Anule la función viewlltransitiontosize(size:CGSize,
con el coordinador del coordinador de transición: UIViewControllerTransitionCoordinator){
//animatealongsidetransformation Método Puede hacer que los cambios al girar la pantalla sean más dinámicos y realizar algunas tareas de limpieza una vez completada la rotación. Solo necesita esto último porque también necesita cortar un marco después de que gire el optionsViewController.
Coordinador. animatealongsidetransformation(nil, finalización: { contexto en
//Actualiza blurView después de la rotación para usar el nuevo diseño.
self.updateBlur()
})
}
Después de compilar y ejecutar, intente cambiar el ángulo del dispositivo o simulador Encontrarás un nuevo diseño:
manualblur3.png
El rango de desenfoque tiene el tamaño correcto, pero no es suficiente. Deslice el área de texto detrás y encontrará que la parte borrosa no ha cambiado.
Según la experiencia anterior, también debes saber cómo modificarla. Posteriormente, iOS 8 proporcionó herramientas para generar desenfoque dinámicamente. El uso de efectos de desenfoque en tiempo real en aplicaciones ha sido difícil de conseguir desde que los desarrolladores desarrollaron soluciones en iOS 7.
Efecto de desenfoque en iOS 8
IOS 8 proporciona un conjunto completo de prácticas herramientas de virtualización. UIBlurEffect es una subclase de UIVisualEffect, que es lo que nos interesa. UIBlurEffect proporciona el hermoso desenfoque que ves en la barra de navegación, el centro de notificaciones y el centro de control, y puedes usar este efecto en tus aplicaciones.
Agregar UIBlurEffect
Abra el archivo StoryViewController.swift y busque el método setOptionsHidden. Si ha escrito updateBlur en la primera rama condicional, coméntelo. Modifíquelo de la siguiente manera:
newblur1.png
Aunque lo haya completado, no puede garantizar completamente que la vista desenfocada no se haya agregado a la escena. Comente la siguiente línea:
1
vista de contenedor de opciones [0]. insertSubview(blurView, atIndex: 0)
Consejo: No elimines simplemente esos códigos, solo necesitas comentarlos para que puedas ver la diferencia cuando mires hacia atrás. Si no tiene idea del código ofuscado que agregó manualmente, también puede eliminarlo en lugar de comentarlo.
Después de compilar y ejecutar, encontrará que, excepto el desenfoque, otras partes pueden ejecutarse normalmente.
Abra Grimm.storyboard y busque la escena del controlador de opciones, seleccione la vista, expanda el inspector de atributos y cambie el fondo de la vista a color claro, como se muestra a continuación:
newblur2. png
Abra el archivo OptionsController.swift y agregue el siguiente código al método viewDidLoad, justo después de optionsView que agregó anteriormente:
//Cree un estilo UIBlurEffect UIBlurEffectStyle. luces y especificar los efectos a aplicar. Otros estilos de efectos incluyen UIBlurEffectStyle. ExtraLight y UIBlurEffectStyle.Dark.
let blur effect = uiblurreffect(style: .light)
//Crea un UIVisualEffectView y configura el efecto que se utilizará para él. UIVisualEffectView es una subclase de UIView, que se usa sola para definir y mostrar efectos de desenfoque complejos.
let blur view = UIVisualEffectView(effect: efecto de desenfoque)
//Eliminar cambios en el límite de tamaño de la máscara adaptable de blurView. También puede agregar el límite manualmente más adelante y colocarlo en la parte inferior de la pila de vistas. Si lo agrega en la parte superior, cubrirá todos los controladores a continuación.
vista desenfocada .settranslatesatoresizingmaskintoconstraints(false)
view.insertSubview(blurView, atIndex: 0)
Ahora debe asegurarse de que los diseños de la vista desenfocada sean correctos.
Aún en viewDidLoad, escribe el siguiente código antes de llamar a addConstraints:
constraints.append(NSLayoutConstraint(item: blur view,
Propiedades: .height, Relacionados : . igual a, toItem: vista,
Atributos: . altura, multiplicador: 1, constante: 0))
constraints.append(NSLayoutConstraint(elemento: vista borrosa,
p>
Atributo: . ancho, relacionado: . igual a, toItem: vista,
Atributo: .ancho, multiplicador: 1, constante: 0))
Estos parámetros Las restricciones siempre adaptarán la pantalla de BlurView al OptionsController.
Construir y ejecutar. Abra el cuento de hadas, haga clic en las elipses y deslice el texto hacia atrás. Encontrará que la parte borrosa puede cambiar en tiempo real:
newblur3.png
Ahora usted. Tengo una herramienta que puede representar dinámicamente la aplicación de desenfoque. No sólo se ve genial, sino que también utilizas la funcionalidad principal de iOS.
Añade vitalidad
El efecto de desenfoque es bastante bueno, pero Apple lo ha mejorado como antes. La combinación de UIVibrancyEffect y UIVisualEffectView puede ajustar el color del texto para que la aplicación se vea más hermosa.
La siguiente imagen muestra cómo la vitalidad puede hacer que sus etiquetas e íconos se vean mejor en la pantalla cuando la imagen de fondo es exactamente la misma:
vibrancy.png
El de la izquierda muestra las etiquetas y botones habituales, mientras que el de la derecha muestra el efecto después de aplicar Vibrancy.
Consejo: El UIVisualEffectView que se ha configurado con UIBlurEffect debe agregar UVibrancyEffect; de lo contrario, no habrá imágenes borrosas con efectos Vibrancy.
Busque viewDidLoad en el archivo OptionsController.swift y agregue el siguiente código antes de las restricciones de diseño automático:
//Construya UIVibrancyEffect usando el BlurEffect configurado anteriormente, que es otro elemento secundario del tipo UIVisualEffect. .
let vibrancyEffect = UIVibrancyEffect(para efecto de desenfoque: efecto de desenfoque)
//Crea UIVisualEffectView para aplicar el efecto Vibrancy, que es exactamente lo mismo que generar una imagen borrosa. Debido a que está utilizando el diseño automático, aquí debe cambiar el tamaño adaptable a falso.
let vibrancyView = UIVisualEffectView(effect:vibrancyEffect)
vibrancyview . settranslatesatoresizingmaskintoconstraints(false)
//Agregue optionsView en la propiedad contentView de VibrancyView para garantizar que todos controles Las vistas tienen efectos de vitalidad aplicados.
vibrancyview. vista de contenido. agregar subvista (vista de opciones)
//Finalmente, es necesario agregar vibrancyView a contentView de blurView para completar el efecto.
vista desenfocada. vista de contenido. agregar subvista (vista de vitalidad)
Lo último es establecer restricciones de diseño automático para la vista de Vibrancy para que siempre pueda mantener la altura y el ancho de la vista del controlador. .
Agregue las siguientes restricciones al final del método viewDidLoad:
constraints.append(NSLayoutConstraint(item: vibrancyView,
Propiedades: .height, relacionado: . Igualdad,
toItem: vista, atributo: . altura,
Multiplicador: 1, constante: 0))
append(NSLayoutConstraint(elemento: vibrancyView,
ancho, relacionado: igual,
toItem: vista, ancho,
multiplicador: 1, constante: 0))
Construya y ejecute, llame a la opción de configuración y vea su efecto de vibración.
effect1.png
A menos que tengas ojos de alta resolución, es muy difícil ver etiquetas y controladores, entonces, ¿qué está pasando?
De hecho, este es el caso porque el estilo que usas en blurView es UIBlurEffectStyle. Claro, por lo que es blanco. Esto no producirá el efecto vibratorio esperado.
En el método viewDidLoad, cambie la inicialización de blurEffect a lo siguiente:
1
let blur effect = uiblurreffect(style: .dark)
1
p>
Esto cambia y aumenta el contraste de color entre la vista borrosa y el fondo.
Después de construir y ejecutar, puedes ver el satisfactorio efecto de vibración.