En este artículo vamos a ver los modifiers en SwiftUI de Font y Text y como usarlos para nuestras text views en nuestras aplicaciones iOS. La tipografía y las fuentes juegan un papel importante y fundamental en nuestro diseño de la User Interface, influenciando en la experiencia de usuario de nuestra app.
Es importante que en nuestra aplicación iOS la interfaz de usuario sea intuitiva.
La tipografía y las fuentes son elementos cruciales del diseño UI/UX que tienen un gran impacto en la experiencia del usuario. Ayudan a crear el ambiente, transmitir información y hacer que el uso de una aplicación o un sitio web sea más agradable. Tomemos como ejemplo la vista detallada de una aplicación de recetas para comprender por qué la tipografía y las fuentes son importantes en nuestra aplicación iOS.
La aplicación presta atención a la tipografía. Para los títulos, utiliza una fuente limpia y moderna para que se destaquen y estén organizados. Para el texto principal, elige una fuente legible y atractiva para que la lectura sea cómoda.
La aplicación también utiliza diferentes pesos de fuente para mostrar la importancia de la información. Los títulos de las recetas están en negrita para llamar la atención, mientras que la lista de ingredientes y las instrucciones utilizan el peso normal para facilitar la lectura.
Prestando atención a los textos la aplicación crea una mejor experiencia de usuario.
Manténgase al día con la coherencia: la coherencia es clave cuando se trata de estilos de texto en su aplicación iOS. Elige un estilo de texto esencial o un estilo de texto que coincida con el marcado de tu aplicación y cúmplelo durante toda la aplicación. El uso de estilos de texto predecibles crea una experiencia de cliente sólida y limpia.
Piense en la comprensibilidad: concéntrate en la lucidez al elegir estilos de texto para tu aplicación. Asegúrese de que los estilos de texto seleccionados sean claros y fáciles de leer, incluso en diferentes tamaños de texto o en diferentes dispositivos. Evite estilos de texto demasiado brillantes o desconcertantes que puedan bloquear el significado.
Diseñe una progresión ordenada visual: use estilos, cargas y tamaños de estilo de texto para diseñar una progresión ordenada visual en el punto de conexión de su aplicación. Separe encabezados, títulos e información importante del texto estándar utilizando cargas más negritas o tamaños más grandes. Un orden visual inconfundible guía a los clientes y mejora la experiencia general del cliente.
Prueba de apertura: asegúrese de que los estilos textuales que elija estén disponibles para clientes con capacidades visuales fluctuantes. Pruebe los estilos de texto de su aplicación con varias configuraciones de apertura, incluida la clasificación dinámica, para garantizar que el texto permanezca descifrable y no pierda su lucidez o separación. Considere utilizar estilos de texto o presupuestos que puedan adaptarse a las inclinaciones de disponibilidad de los clientes.
Adopte la personalización: si bien los estilos de texto del marco brindan coherencia en todos los dispositivos iOS, asegúrese de integrar estilos de texto personalizados cuando se alineen con los objetivos de diseño y marcado de su aplicación. Los estilos de texto personalizados pueden agregar carácter y singularidad a su aplicación. Simplemente asegúrese de que los estilos de texto personalizados mantengan la coherencia y se coordinen consistentemente con el plan de aplicación general.
Quiero creer que puedo impulsarte a trabajar con estilos y textos textuales. Son una pieza importante del trabajo de mejora diario. Ahora deberíamos entender cómo se utilizan en SwiftUI.
Cómo diseñar la fuente de texto en SwiftUI
El texto es una vista que muestra al menos una línea de texto en SwiftUI.
Text("Hello, world!")
Podemos reemplazar este estilo de texto predeterminado por uno personalizado. Podemos establecer un estilo de texto personalizado para una vista de texto utilizando el modifier font(_:).
Deberíamos investigar varias formas de modificar un texto en SwiftUI.
El estilo de texto es una forma de comunicar un estilo de texto con respecto a su capacidad.
Por ejemplo, si necesita establecer un estilo de texto para el texto del título de su vista, puede configurarlo en Estilo de texto del título sin determinar la dimensión del texto. Apple realiza el difícil trabajo de caracterizar el tamaño ideal para cada estilo de texto.
Adoptar el estilo de texto le permite explotar la clasificación dinámica donde, en consecuencia, su texto cambia de tamaño, seguimiento y conducción en vista de la inclinación del cliente.
Apple tiene 11 estilos de texto en este momento: largeTitle, title, title2, title3, headline, body, callout, subheadline, footnote, caption y caption2.
Text("Swift Programming")
.font(.largeTitle)
Text("Swift Programming")
.font(.title)
Text("Swift Programming")
.font(.title2)
Text("Swift Programming")
.font(.title3)
Text("Swift Programming")
.font(.headline)
Text("Swift Programming")
.font(.body)
Text("Swift Programming")
.font(.callout)
Text("Swift Programming")
.font(.subheadline)
Text("Swift Programming")
.font(.footnote)
Text("Swift Programming")
.font(.caption)
Text("Swift Programming")
.font(.caption2)Que compilado en XCode da lugar a esto:
Como cambiar el tamaño del texto en SwiftUI
En el caso de que el tamaño del estilo de texto no coincida con sus necesidades, puede establecer una dimensión de texto determinada al inicializar un estilo de texto.
Text("Hello, world!")
.font(.system(size: 31))Puedes establecer un tamaño para la fuente personalizada en relación con el estilo del texto con Font.custom(_:size:).
Como cambiar de diseño de fuente en SwiftUI
Tenemos cuatro diseños de fuentes para elegir.
default
monospaced
rounded
serif
Podemos configurarlo en el momento en que creamos una fuente.
Si deseas personalizar el diseño de fuente de un estilo de texto, puedes configurarlo así:
Text("Hello, world!")
.font(.system(.largeTitle, design: .serif))En XCode quedaría de la siguiente manera:
Como cambiar el grueso de la letra en SwiftUI
Podemos usar el modifier weight(_:). Esto es un metódo de instancia Font, por que usamos esto en nuestra fuente, no en un texto.
Podemos usar, heavy, light o bold.
Por ejemplo en:
Text("Swift programming")
.font(.largeTitle)
Text("Swift programming")
.font(
.largeTitle
.weight(.bold)
)
Text("Swift programming")
.font(
.system(
.largeTitle,
design: .rounded
)
.weight(.light)
)
Text("Swift programming")
.font(
.system(size: 34)
.weight(.heavy)
)Éste sería el resultado en XCode:
También puede utilizar .weight en una fuente personalizada, pero es posible que no todos los weights estén disponibles en esa fuente. El weight más cercano se utilizará como alternativa si no se puede cumplir lo especificado.
Poner el font weight con el inicializador Font
Puedes ponerlo cuando inicializas una custom system font. Por ejemplo:
Text("Swift programming")
.font(
.system(size: 31, weight: .bold)
)Cambiar el grueso de la letra con el fontWeight(_:) modifier
La vista de texto también tiene una forma de modificar el peso de la fuente. Puede configurarlo con el modificador fontWeight(_:).
Dado que es un método de instancia de texto, lo usamos en un texto, no en una fuente.
Text("Hello, world!")
.font(
.system(size: 31)
)
.fontWeight(.bold)Cambiar el peso de la fuente con el modifier bold()
La vista de fuente y texto también tiene otro método para aplicar un peso de fuente en negrita al texto, bold().
Text("Swift programming")
.font(
.system(size: 31)
)
.bold()
