Guía para el soporte de Dynamic Type
Las aplicaciones de iOS deben escalar el contenido para garantizar que no haya pérdida de información o funcionalidad para los usuarios que requieren tamaños de fuente más grandes para cumplir con WCAG 1.4.4 Cambiar tamaño de texto. La información debe estar disponible para todos. Esta guía cubrirá las formas recomendadas para soportar Dynamic Type para garantizar que la experiencia del usuario sea adecuada para todos.
Dynamic Type es una función de accesibilidad dentro de iOS que permite escalar el tamaño de las fuentes en todo el dispositivo según las preferencias del usuario. La configuración de Tipo Dinámico se puede ajustar en la Configuración de Accesibilidad de su dispositivo. Lea más sobre Apple en Visualización de texto aquí.
Prepare su Vista
Antes de implementar el tipo dinámico, las vistas de su aplicación deben estar listas. Lea las siguientes consideraciones antes de la implementación.
Para las vistas en SwiftUI, algunas de las siguientes consideraciones se proporcionan de forma predeterminada. Revise cada uno para asegurarse de que los elementos de texto se comporten según la guía.
Asegúrese de que el contenido se pueda desplazar
Un paradigma de diseño de plataforma popular mantiene el contenido y los elementos disponibles en la vista principal sin necesidad de desplazarse. Si bien es excelente para contenido digerible y mantener la interfaz de usuario minimalista, es importante destacar que estos diseños no deberían desplazarse con la configuración predeterminada, no que no puedan desplazarse.
Para brindar soporte adecuado a sus clientes mediante tecnología de asistencia, como tamaños de fuente más grandes, es importante implementar consistentemente un UIScrollView o ScrollView en cualquier pantalla con contenido. Una vez que el contenido se escala a tamaños de fuente más grandes, una cantidad sustancial de contenido podría quedar fuera de la pantalla. Si alguien que usa Dynamic Type carga su aplicación y esta no contiene una vista desplazable, la información no será legible.
Asegura que el contenido pueda expandirse
Al trabajar con restricciones, tenga en cuenta que las vistas principales también deberán expandirse para acomodar tamaños de fuente más grandes en los elementos de texto. Utilice contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo y lessThanOrEqualTo para permitir que sus vistas se amplíen según sea necesario. Limite el establecimiento de una altura y una anchura constantes para una vista que contiene contenido.
Asegúrese de que la usabilidad no se vea afectada
Las restricciones incorrectas pueden reorganizar vistas y controles importantes, lo que afecta negativamente a la usabilidad. Pruebe con varios tamaños de fuente para asegurarse de que las vistas de contenido se muestren como se espera.
Asegúrese de que los controles de texto admitan el tipo dinámico
Cualquier control que incluya texto puede admitir Dynamic Type. Compruebe que cada control se puede expandir para adaptarse a varios tamaños de fuente sin empujar el contenido fuera de la pantalla.
Establezca el número de líneas
Cualquier texto que pueda desbordarse debe tener la propiedad numberOfLines establecida en 0. Esta propiedad permitirá que la vista se expanda para cualquier número de líneas necesarias. Para un UIButton, establezca la propiedad numberOfLines en 0 en su titleLabel; esto permitirá que el control se expanda verticalmente.
Sin un control que se expanda para el texto creciente, los puntos suspensivos reemplazarán parte o la totalidad del texto.
Mantén los encabezados breves y al grano
Los encabezados son extremadamente útiles para la navegación de VoiceOver. Deben ser lo suficientemente descriptivos para proporcionar contexto, pero lo suficientemente cortos como para permanecer en una línea al cambiar el tamaño del texto.
Siga las directrices de Apple
Apple ha creado varias directrices para ayudar a los desarrolladores a admitir Dynamic Type.
Compatibilidad con Dynamic Type
Vistas de SwiftUI
En iOS 14 o superior, puedes admitir Dynamic Type de dos maneras.
Uso de fuentes personalizadas
Al utilizar una fuente personalizada, configure la propiedad .font en .custom(_:size:relativeTo:) para garantizar que las fuentes se escalen relativamente al estilo de fuente del elemento de texto.
Uso de fuentes predeterminadas
Al utilizar una fuente predeterminada por tamaño, el texto se escalará automáticamente; sin embargo, si no se establece ningún estilo de fuente, los elementos de texto no se escalarán según su estilo. Por ejemplo, el texto que funciona como título tendrá una escala diferente que el texto que funciona como cuerpo del texto: a medida que el texto se hace más grande, el texto del título siempre será más grande que el texto del cuerpo.
Para obtener la mejor experiencia, asegúrese de especificar el estilo de fuente para que coincida con el comportamiento esperado del elemento. Al utilizar un modificador como: .font(.system(.largeTitle, design: .rounded)), puede esperar que el texto sea el texto más grande de la página y sirva como un título adecuado.
Vistas de UIKit
Al crear vistas UIKit, actualmente hay cuatro formas de admitir Dynamic Type. Cualquiera de los métodos siguientes dará como resultado un comportamiento similar para el usuario final.
Uso de fuentes predeterminadas
Usar la fuente predeterminada de iOS es la forma más sencilla de admitir Dynamic Type; es la única compatible con storyboards y código.
Este artículo de Apple cubre cómo configurar Dynamic Type en un storyboard
Para utilizar fuentes predeterminadas mediante programación, siga los pasos a continuación.
Establecer la fuente de la etiqueta en un estilo de texto específico
Apple proporciona TextStyles, una forma de categorizar el texto en su aplicación, por lo que cada estilo tiene diferencias visibles. Por ejemplo, el TextStyle "Title 1" será más grande que el TextStyle "Title 2", y ambos TextStyles serán más grandes que el TextStyle "body". El uso de una fuente personalizada se explica más adelante en Usar métricas de fuente con escala de fuente automática.
Para establecer la fuente de una etiqueta en un determinado estilo de texto, utilice la función preferredFont(forTextStyle: ...) :
label.font = UIFont.preferredFont(forTextStyle: .body)Dado que cada TextStyle está asociado con diferentes tamaños y estilos de fuente, se escalará de manera diferente. Puede encontrar más información sobre cada TextStyle en la documentación de Apple.
Establecer adjustsFontForContentSizeCategory
Aunque la fuente se puede escalar, eso no significa que se escalará automáticamente por defecto. Utilice adjustsFontForContentSizeCategory en todos los elementos de texto para permitir el cambio de configuraciones de Tipo dinámico:
label.adjustsFontForContentSizeCategory = trueUso de fuentes personalizadas
A continuación se muestran tres formas de admitir Dynamic Type con fuentes personalizadas.
Métricas de fuentes con escalado automático de fuentes
Si la fuente personalizada admite escala UIFontMetrics , ¡permite que el sistema operativo haga todo el trabajo!
label.font = UIFont(name: <fontNameHere>, size: UILabel.defaultFontSize)Con UIFontMetrics, puedes adjuntar una fuente personalizada con un estilo de texto específico. Las Pautas de diseño de Apple mencionan el uso de diferentes tamaños de puntos para cada TextStyle. En lugar de configurar manualmente el tamaño de punto para cada configuración de Tipo dinámico (que se muestra más adelante), utilice los tamaños de fuente TextStyle proporcionados y vincule la fuente personalizada con el TextStyle relacionado. Por ejemplo, se puede configurar una fuente para todos los subtítulos dentro de la aplicación con el TextStyle "caption 1":
guard let font = UIFont(name: <fontNameHere>, size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true¡Asegúrese de establecer adjustsFontForContentSizeCategory en verdadero para que la fuente pueda responder automáticamente a un cambio de tamaño de letra!
Responding to Dynamic Type Size Notifications and Overriding TraitCollectionDidChange son útiles si una fuente personalizada no se escala bien o los tamaños de puntos para cada TextStyle no son apropiados para la fuente utilizada.
Responder a notificaciones de tamaño de letra dinámico
Los observadores de notificaciones originales continúan siendo compatibles (incluido el código Objective-C). Crear un escuchador para la notificación:
NotificationCenter.default.addObserver(self,
selector: #selector(changeTextSize),
name: UIContentSizeCategory.didChangeNotification,
object: nil)Luego, define el selector. A continuación se muestra un ejemplo:
func changeTextSize() {
let newFontSize: CGFloat
switch self.traitCollection.preferredContentSizeCategory {
case .extraSmall: newFontSize = 14
case .small: newFontSize = 15
case .medium: newFontSize = 16
case .large: newFontSize = 17
case .extraLarge: newFontSize = 19
case .extraExtraLarge: newFontSize = 21
case .extraExtraExtraLarge: newFontSize = 23
case .accessibilityMedium: newFontSize = 28
case .accessibilityLarge: newFontSize = 33
case .accessibilityExtraLarge: newFontSize = 40
case .accessibilityExtraExtraLarge: newFontSize = 47
case .accessibilityExtraExtraExtraLarge: newFontSize = 53
default: break
}
guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
self.font = UIFont.preferredFont(forTextStyle: .body)
return
}
self.font = font.withSize(newFontSize)
}Anulación TraitCollectionDidChange
La anulación TraitCollectionDidChange es similar a responder a la notificación de tamaño de tipo dinámico pero sin el escuchador de notificaciones.
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
let newFontSize: CGFloat
switch self.traitCollection.preferredContentSizeCategory {
case .extraSmall: newFontSize = 14
case .small: newFontSize = 15
case .medium: newFontSize = 16
case .large: newFontSize = 17
case .extraLarge: newFontSize = 19
case .extraExtraLarge: newFontSize = 21
case .extraExtraExtraLarge: newFontSize = 23
case .accessibilityMedium: newFontSize = 28
case .accessibilityLarge: newFontSize = 33
case .accessibilityExtraLarge: newFontSize = 40
case .accessibilityExtraExtraLarge: newFontSize = 47
case .accessibilityExtraExtraExtraLarge: newFontSize = 53
default: break
}
guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
self.font = UIFont.preferredFont(forTextStyle: .body)
return
}
self.font = font.withSize(newFontSize)
}