Actualizaciones de diseño visual en iOS 11
En iOS 11, Apple introdujo nuevos cambios visuales, incluidas las actualizaciones de la barra de navegación, la barra de búsqueda y las vistas de tabla. Además, se han realizado mejoras para permitir una mayor flexibilidad sobre los márgenes y el contenido de pantalla completa. Estos cambios se tratan en esta guía.
Para obtener información específica sobre el diseño del iPhone X, vea el vídeo Diseño para iPhone X de Apple.
UIKit
Las barras UIKit se han adaptado en iOS 11 para que sean más accesibles para los usuarios finales.
Uno de estos cambios es una nueva pantalla HUD que aparece cuando un usuario presiona un elemento de barra por unos segundos. Para habilitarlo, establezca la propiedad largeContentSizeImage en UIBarItem y agregue una imagen más grande a través de un catálogo de activos:
barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");
Barra de navegación
iOS 11 introdujo una nueva funcionalidad para facilitar la lectura de los títulos de la barra de navegación. Las aplicaciones pueden mostrar este título más grande al asignar la propiedad PrefersLargeTitles en true:
NavigationController.NavigationBar.PrefersLargeTitles = true;
Al establecer títulos más grandes en la aplicación, todos los títulos de las barras de navegación de la aplicación aparecerán más grandes, como se muestra en la captura de pantalla siguiente:
Para controlar cuándo se muestra un título grande en una barra de navegación, establezca LargeTitleDisplayMode en el elemento de navegación en Always, Never o Automatic.
Controlador de búsqueda
iOS 11 ha facilitado la adición de un controlador de búsqueda directamente a la barra de navegación. Una vez que haya creado un controlador de búsqueda, agréguelo a la barra de navegación con la propiedad SearchController:
NavigationItem.SearchController = searchController;
Dependiendo de la funcionalidad de la aplicación, es posible que quiera que la barra de búsqueda se oculte cuando un usuario se desplaza por una lista. Puede ajustar esto con la propiedad HidesSearchBarWhenScrolling.
Márgenes
Apple ha creado una nueva propiedad, directionalLayoutMargins, que se puede usar para establecer el espacio entre vistas y subvistas. Use directionalLayoutMargins con márgenes interiores leading o trailing. Independientemente de si el sistema es un idioma de izquierda a derecha o de derecha a izquierda, iOS establece correctamente el espaciado de la aplicación.
En iOS 10 y versiones anteriores, todas las vistas tenían un tamaño de margen mínimo al que se alineaban. iOS 11 introdujo la opción para invalidar el uso de ViewRespectsSystemMinimumLayoutMargins. Por ejemplo, establecer esta propiedad en false permite ajustar los márgenes interiores perimetrales a cero:
ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;
Contenido de pantalla completa
iOS 7 introdujotopLayoutGuide y bottomLayoutGuide como una manera de restringir las vistas para que no estén ocultas por las barras UIKit y estén en un área visible de la pantalla. Estas han quedado en desuso en iOS 11 en favor del área segura.
El área segura es una nueva forma de pensar en el espacio visible de la aplicación y cómo se agregan restricciones entre una vista y una súpervista. Por ejemplo, considere la imagen siguiente:
Anteriormente, si hubiera agregado una vista y quisiera que fuera visible en el área verde anterior, la restringiría a la parte inferior de TopLayoutGuide y a la parte superior de BottomLayoutGuide. En cambio, en iOS 11, la restringiría a la parte superior e inferior del área segura. A continuación, encontrará un ejemplo:
var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;
Vista de tabla
UiTableView ha tenido una serie de cambios pequeños, pero significativos, en iOS 11.
De forma predeterminada, los encabezados, los pies de página y las celdas ahora tienen un tamaño automático en función de su contenido. Para no participar en este comportamiento de ajuste de tamaño automático, establezca EstimatedRowHeight, EstimatedSectionHeaderHeight o EstimatedSectionFooterHeight en cero.
Sin embargo, en algunas circunstancias (por ejemplo, al agregar UITableViewController al usar guiones gráficos existentes en Interface Builder), es posible que tenga que habilitar manualmente las celdas de ajuste de tamaño automático. Para ello, asegúrese de que ha establecido las siguientes propiedades en la vista de tabla para celdas, encabezados y pies de página, respectivamente:
// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;
// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;
//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;
iOS 11 ha ampliado la funcionalidad de las acciones de fila. UISwipeActionsConfiguration se introdujo para definir un conjunto de acciones que deben realizarse cuando el usuario desliza el dedo en cualquier dirección en una fila de una vista de tabla. Este comportamiento es similar al de Mail.app nativa. Para más información, consulte la guía Acciones de fila.
Las vistas de tabla admiten arrastrar y colocar en iOS 11. Para más información, consulte la guía Arrastrar y colocar.