Share
Xcode 6 trae una serie de mejoras significativas. Uno de los avances más notables es la depuración de la vista. Muchas veces, la interfaz de usuario de una aplicación no se comporta como se espera. Es posible que las vistas no se muestren o, si se muestran, pueden mostrarse incorrectamente. Este tutorial describe cómo utilizar las nuevas funciones de depuración de vistas de Xcode para identificar y solucionar problemas fácilmente en la interfaz de usuario de una aplicación..
Para comenzar, descargue el proyecto de muestra de GitHub y abra ViewDebugging.xcodeproj. El proyecto contiene una aplicación tabulada simple con algunos controladores de vista, un delegado de aplicación y un guión gráfico. Esta aplicación fue diseñada para el iPhone, pero se mostrará bien en cualquier dispositivo ya que usa un diseño adaptable, introducido en iOS 8.
El propósito de la aplicación es hacer una lista de tareas simple. Incluye una pantalla de resumen para ver otra información, como el número de elementos en la lista de tareas, el avatar del usuario y su cuenta de Twitter. Ejecuta la aplicación en el simulador de iOS haciendo clicconstruir y correren la parte superior izquierda.
De inmediato, es posible que note un problema con la interfaz de usuario. La vista de tabla no parece mostrar ningún dato. Abrir FirstViewController.swift y localiza la siguiente línea de código.
var mockNotesDataSource: [String] = ["Hacer un poco de ropa", "Terminar la tarea", "Pasear al perro", "Aprender sobre la depuración de la vista"] didSet self.tableView.reloadData ()
los mockNotesDataSource La variable sirve como fuente de datos de la vista de tabla. Utilizamos las capacidades de observador de propiedad de Swift. Como resultado, la vista de tabla se vuelve a cargar automáticamente cada vez que cambia la fuente de datos. Al observar el fragmento de código anterior, se deben mostrar cuatro elementos en la lista de tareas pendientes. Parece que algo más está mal.
El problema parece estar relacionado con la interfaz de usuario. Mientras se ejecuta la aplicación, presione Depuración de la jerarquía de vistas botón en la parte inferior. Alternativamente, navegando a Depurar> Ver depuración> Capturar jerarquía de vistas también habilita la depuración de la vista.
Cuando la depuración de la vista está habilitada, Xcode toma una instantánea de la jerarquía de vistas de la aplicación y presenta una vista tridimensional de la interfaz de usuario. Muestra la jerarquía de vistas de la aplicación, la posición, el orden y el tamaño de cada vista, así como la forma en que las vistas interactúan entre sí..
Al observar el renderizado tridimensional, podemos ver que la lista de tareas pendientes se está cargando bien, pero las celdas de la vista de tabla son demasiado anchas.
Deja de depurar la aplicación y navega hasta Main.Storyboard para solucionar el problema. Haga clic en la vista de tabla y seleccione Editor> Resolver problemas de diseño automático> Restablecer restricciones restringidas.
Cree y ejecute la aplicación una vez más para confirmar que la interfaz de usuario se muestra correctamente. Haga clic en el Depuración de la jerarquía de vistas Botón para ver más de cerca algunas de las otras características de la depuración de la vista..
Haga clic y arrastre en cualquier lugar dentro del renderizado tridimensional para inclinar y desplazar la interfaz de usuario. Inclínelo hacia la izquierda o hacia la derecha para seleccionar la vista de tabla.
Una vez que se selecciona una vista, Xcode resalta la vista y llena la Objeto y tamaño inspectores a la derecha. Para confirmar que ha seleccionado la vista de tabla, mire la barra de salto en la parte superior y verifique que UITableView es el último elemento a la derecha.
los Objeto y tamaño los inspectores incluyen una gran cantidad de información útil. En el pasado, los desarrolladores tenían que confiar en declaraciones de registro o puntos de interrupción para inspeccionar la configuración de una vista.
Abre el tamaño inspector a la derecha y, en el Diseño automático En la sección, observe que ahora se aplican las restricciones correctas a la vista. En el Objeto inspector, puede inspeccionar los atributos de la vista seleccionada.
Justo encima del área de depuración en Xcode, hay nueve botones y controles deslizantes que se usan para ver la depuración.
Esto es lo que hace cada uno de estos controles, de izquierda a derecha:
Tómate unos minutos para jugar con estos controles para entender adecuadamente lo que hace cada uno de ellos..
Crea y ejecuta la aplicación de nuevo y toca el Más pestaña en la parte inferior de la interfaz de usuario de la aplicación. A primera vista, la interfaz de usuario se ve bien, pero no se comporta exactamente como debería. No se muestra un efecto de desenfoque en la parte superior de la imagen. Depurar la jerarquía de vistas para identificar mejor el problema.
Comience por desplazarse hacia la izquierda o hacia la derecha para ver todo en ángulo. A continuación, arrastre el ver el control deslizante de espaciado hacia la derecha.
Con la interfaz de usuario separada, queda claro que hay otra vista oculta debajo de la imagen. Selecciónelo para confirmar que es la vista de efecto visual que falta..
Abierto Main.storyboard y navegar a Segunda escena del controlador de vista. En el esquema del documento panel de la izquierda, ampliar el Controlador de la segunda vistaes Ver objeto para ver cómo se ordenan sus subvistas.
Xcode coloca las vistas en orden ascendente dentro del contorno del documento. En otras palabras, los que están en la parte superior de la lista son la base de la jerarquía de vistas..
Solucionar nuestro problema es simple.. Vista de efecto de desenfoque estará debajo Imagen del cielo en tiempo de ejecución, porque es la primera vista en la jerarquía de vistas. Haga clic y arrastre el Vista de efecto de desenfoque debajo Imagen del cielo en el esquema del documento. El resultado ahora debería verse como la captura de pantalla de abajo..
Si ejecuta la aplicación nuevamente, el efecto de desenfoque debería ser visible. La interfaz de usuario de la aplicación ahora se ve como fue diseñada. Veamos algunas de las funciones de depuración del simulador de iOS para ver qué más se puede mejorar..
Crea y ejecuta la aplicación en el simulador de iOS. Con el simulador de iOS seleccionado, seleccione Capas de color mezclado desde el Depurar menú.
La interfaz de usuario de la aplicación está superpuesta con una mezcla de verde y rojo. Estas son indicaciones para mostrar qué capas tienen la mezcla habilitada y cuáles son opacas. La mezcla de capas es computacionalmente intensiva. Por lo tanto, se recomienda utilizar capas opacas siempre que sea posible..
Apple toma nota de su documentación para probar y usar capas opacas cuando se trata de vistas de tabla. Una de las principales causas de un rendimiento deficiente cuando el desplazamiento se debe al contenido combinado. Cuando el fondo del contenido es opaco, el desplazamiento generalmente será más suave.
Para esta aplicación, si un usuario tiene cientos de elementos en su lista de tareas pendientes, puede experimentar un rendimiento de desplazamiento irregular o irregular. Las celdas de vista de tabla están actualmente utilizando capas combinadas. Dado que el fondo de la vista del controlador de vista ya es blanco, el usuario final no verá ninguna diferencia si las celdas de la vista de la tabla están mezcladas u opacas con un fondo blanco.
Abierto Main.storyboard y seleccione el prototipo de celda de vista de tabla en el Escena lista de tareas. En el Inspector de atributos. Desplácese hasta la Dibujo seccion y cheque Opaco.
Construye y ejecuta la aplicación con capas mezcladas para colorear habilitadas. Como las celdas de la vista de tabla ahora son opacas, están superpuestas con un color verde, lo que indica que son opacas..
Además de marcar capas, hay otras características que pueden ayudar a depurar el simulador de iOS. Éstos son algunos de los que me parecen más útiles:
Algo que muchos desarrolladores pasan por alto es el impacto de la barra de estado en su aplicación si hay una llamada en curso. Puede probar esto fácilmente alternando la barra de estado durante la llamada. Lo haces seleccionando Alternar barra de estado durante la llamada desde el Hardware menú en el simulador de iOS.
Para ver cómo responde su aplicación a tal evento, presione Comando-T, para habilitar animaciones lentas, y pulse Comando-Y para visualizar la barra de estado durante la llamada. Si su aplicación utiliza una barra de navegación, entonces el sistema operativo se encarga de esto..
Además de colorear las vistas, tenga en cuenta que el simulador de iOS también puede depurar problemas de ubicación central. Puede simular un dispositivo a una latitud y longitud específicas, e incluso se incluyen varias ubicaciones de muestra para probar. Si su aplicación utiliza iCloud para administrar datos, también puede activar manualmente un evento de sincronización.
Si bien la aplicación de demostración incluida es muy simple, el uso de las técnicas mencionadas en este artículo puede reducir las horas de futuros proyectos. Ver la depuración puede ayudarlo a corregir muchos problemas que surgen en la interfaz de usuario.
Fuera de Xcode y el constructor de interfaces, el uso de las características de depuración del simulador de iOS puede ayudar a mejorar el rendimiento e identificar cuellos de botella. Las directrices de la interfaz humana de Apple subrayan la importancia de las aplicaciones sensibles que son fáciles de usar y navegar. Con las mejoras hechas al constructor de interfaces, nunca fue tan fácil hacer eso..
Accentsconagua