LABEL en SWIFTUI en Español
Label en SwiftUI

LABEL en SWIFTUI en Español

Label en SwiftUI 2.0 es una vista que nos permite tener un icono y un texto en el mismo componente. Antes de SwiftUI 2.0 se solía crear un HStack para meter un icono y luego el texto, pero con este componente lo tenemos todo en uno en nuestras apps iOS.

SwiftBeta
Aprende SwiftUI desde cero

Usamos Label en SwiftUI para mostrar un icono y un texto en nuestras App. Esta vista fue introducidad en SwiftUI 2.0 y la presentaron en la WWDC de 2020. Su uso es muy simple, y nos permite añadir un icono y un texto en un mismo componente.

Label en código

Para poder usarlo solo tenemos que poner:

struct ContentView: View {
    var body: some View {
        Label("Suscribiros a SwiftBeta",
              systemImage: "hand.thumbsup.fill")
    }
}
Código de un Label en SwiftUI

En el primer parámetro añadiremos una string, un título que queremos que aparezca en nuestro Label y en el segundo parámetros pondremos el nombre del icono, si os acordáis hace un par de posts hablamos sobre los iconos y SF Symbols 2.0 en SwiftUI, podéis mirar el posts para ver la cantidad de iconos que Apple nos ofrece de forma totalmente gratuita.

Estilos de un Label

También podemos aplicar distintos estilos

  • TitleOnlyLabelStyle: Imagínate que rotas el device y tienes menos espacio, de esta manera ocultarías el icono y priorizarías que apareciera el texto.
struct ContentView: View {
    var body: some View {
        Label("Suscribiros a SwiftBeta",
              systemImage: "hand.thumbsup.fill")
            .labelStyle(TitleOnlyLabelStyle())
    }
}
Código para mostrar solo el título de un Label en SwiftUI
  • IconOnlyLabelStyle: Justo al contrario de TitleOnlyLabelStyle, para priorizar y solo mostrar el icono.
struct ContentView: View {
    var body: some View {
        Label("Suscribiros a SwiftBeta",
              systemImage: "hand.thumbsup.fill")
            .labelStyle(IconOnlyLabelStyle())
    }
}
Código para mostrar solo el icono de un Label en SwiftUI
Como curiosidad, antes te comentaba que Label fue introducido en SwiftUI 2.0, pero antes para poner un icono y un texto poníamos un HStack, lo que pasaba es que si ponías varios HStacks al final los iconos y el texto no estaba alineado.

Antes de acabar, comentarte que podemos crear nuestros propios LabelStyle pero esto sale del scope del video, lo veremos más adelante.


Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


SwiftUI desde cero