DEV Community

GoyesDev
GoyesDev

Posted on • Edited on

SwiftUI #10: Text

#swiftui #swift #ios

La estructura Text toma un String y retorna una vista que muestra un texto en pantalla.

  • (init(_:)): recibe el texto a mostrar.
  • init(_:style:): Recibe una fecha y un estilo (date, offset, relative, time, timer). 
struct ContentView: View {
  let number = 5.1
//  let today = Date()
  var body: some View {
    Text("Hola mundo \(number.formatted(.currency(code: "USD")))")
//    Text(today.formatted(date: .abbreviated, time: .omitted))
  }
}
Enter fullscreen mode Exit fullscreen mode

Como el objetivo de un Text es comunicar, las vistas tipo Text son ampliamente usadas en SwiftUI.

Pintando fechas

Aunque el constructor init(_:style:) no es tan claro y flexible como usar formatted(_:), hacerlo por el constructor permite que el valor se actualice. Por ejemplo, usar el estilo timer muestra un temporizador que cuenta a partir del momento definido por el primer argumento.

struct ContentView: View {
  let today = Date()
  var body: some View {
    Text(today, style: .timer)
  }
}
Enter fullscreen mode Exit fullscreen mode

Modificadores

El siguiente paso naturalmente será cambiar la apariencia del texto: tamaño, peso, color, itálica, etc.

Un modificador es un método de la instancia View que crea una copia de la vista, hace algo sobre ella (la copia) y retorna la vista modificada.

En el pasado se podría modificar las vistas desde el inspector de atributos del área de utilidades. Sin embargo, hoy en día se debe hacer los cambios de forma programática.

La mayoría de modificadores están definidos para el protocolo View y luego implementado por el resto de estructuras que conforman el protocolo.

Determinar el tamaño de una vista

A continuación presento algunos de los modificadores usados para determinar el tamaño de una vista:

struct ContentView: View {
  var body: some View {
    Text("Hola mundo")
      .frame(width: 250, height: 100, alignment: .leading)
  }
}
Enter fullscreen mode Exit fullscreen mode

Se puede declarar solo el ancho o el alto, y el resto de argumentos serán definidos por el contenido de la vista.

Para obtener una vista flexible, se usan los argumentos maxWidth y maxHeight. Por ejemplo, se puede proponer CGFloat.infinity como el ancho máximo de una vista, para que la vista se expanda para ocupar todo el espacio disponible del contenedor.

struct ContentView: View {
  var body: some View {
    Text("Hola mundo")
      .frame(maxWidth: .infinity)
  }
}
Enter fullscreen mode Exit fullscreen mode

Rellenar una vista

  • padding(_:_:): Añade relleno entre el contenido de una vista y el recuadro que la contiene. El primer argumento (de tipo Edge.Set) es un conjunto con los extremos a los que se va a agregar el relleno. Como es un OptionSet se puede pasar un único valor, múltiples o ninguno.
  • padding(_:): Añade relleno entre el contenido de la vista y el recuadro que la contiene. Recibe un EdgeInsets que especifica la distancia de relleno por cada lado de la vista. 
struct ContentView: View {
  var body: some View {
    Text("Hola mundo")
      .padding(25)
//      .padding([.top, .leading], 25)
//      .padding(EdgeInsets(top: 25, leading: 25, bottom: 0, trailing: 0))
  }
}
Enter fullscreen mode Exit fullscreen mode

Cambiar el estilo del contenido de una vista

Fuente, Font

Con la estructura Font se puede establecer la fuente del texto de tres maneras:

  1. Fuente del sistema,
  2. Fuente personalizada,
  3. Fuente dinámica.

En la medida de lo posible, se sugiere usar fuentes dinámicas para que la interfaz se adapte automáticamente al tamaño definido por el usuario. Estas fuentes son (entre otras) extraLargeTitle2, extraLargeTitle, largeTitle, title, headline, body, caption.

Text("Hola mundo")
  .font(.caption)
Enter fullscreen mode Exit fullscreen mode

Además de las fuentes dinámicas los siguientes constructores obtienen la configuración de fuente del sistema o personalizada:

Al fijar el tamaño de la fuente, esta conservará su tamaño sin importar los cambios que haga el usuario a la fuente del sistema.

Text("Hola mundo")
  .font(.system(size:50))
Enter fullscreen mode Exit fullscreen mode

Fuente incluida en el sistema operativo

Si la fuente ya está incluida en el sistema operativo, solo hay que especificar el nombre y el tamaño.

struct ContentView: View {
  var body: some View {
    Text("Hola mundo")
      .font(.custom("Georgia", size: 50))
  }
}
Enter fullscreen mode Exit fullscreen mode

Fuente externa

Si la fuente no está incluida en el sistema operativo:

  1. se debe copiar el archivo .ttf al proyecto, asegurándose de marcar el "target" destino que corresponda.
  2. se debe modificar la configuración del "target" desde el panel de "Info", agregando una nueva llave llamada "Fonts provided by application" cuyo valor es un arreglo.
  3. Dentro de "Fonts provided by application", agregar un nuevo valor (e.g. "Item 0") con el nombre del archivo de extensión .ttf que contiene la fuente.
  4. Finalmente, se usa la fuente con el constructor Font.custom(_:size:) pasando el nombre de la fuente que corresponda.

Ejemplos 

Text("Hola mundo")
  .font(.system(size: 60))
  .underline()
  .fontWeight(.heavy)
  .foregroundStyle(Color.red)
  .multilineTextAlignment(.center)
  .lineLimit(1)
  .shadow(radius: 1, x: 1, y: 1)
Enter fullscreen mode Exit fullscreen mode 


struct ContentView: View {
  var body: some View {
    Text("Este es un texto muy largo que ocupa más de una línea. Hay que usar alguna estrategia de ajuste de texto para que se vea bien")
      .padding()
      .multilineTextAlignment(.center)
      .lineSpacing(10)
      .textSelection(.enabled)
      .lineLimit(2)
      .truncationMode(.middle)
  }
}
Enter fullscreen mode Exit fullscreen mode

Anidando Texts

Una vista tipo Text puede ser el contenido de otra, para asignar distintos estilos a distintas partes del texto.

struct ContentView: View {
  var body: some View {
  Text("Hola \(Text("Mundo").underline())")
    .font(.largeTitle)
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)