Organiza tus interfaces de usuario con LabeledContent en SwiftUI

Libranner Santos

29 mayo, 20243min de lectura

SwiftUI nos ofrece una vasta gama de controles prefabricados que podemos utilizar para crear nuestras interfaces de usuario. Es altamente recomendable utilizar estos controles, porque nos facilitan el trabajo y, por lo general, garantizan el correcto funcionamiento de las interfaces de usuario en diferentes dispositivos o configuraciones. Uno de estos componentes es LabeledContent.

LabeledContent nos permite agrupar una etiqueta y una vista para garantizar que la información se muestra alineada y tener una estructura clara de cómo agrupamos la información en la interfaz de usuario. Estos se adaptan a su contenedor, como por ejemplo, un Form.

Veamos un ejemplo de cómo podemos usar esta vista:

Form {
  LabeledContent("Name") {
    Text("John")
  }
  LabeledContent("Lastname") {
    Text("John Doe")
  }
  LabeledContent("Age") {
    Text("24")
  }
}

Este código nos muestra un formulario con un estilo estándar para aplicaciones iOS. Contiene tres elementos y podemos ver cómo el estilo utilizado para cada uno es homogéneo. Para crear cada fila, utilizamos LabeledContent con el constructor que toma una cadena de texto (String) y una vista como parámetros.

Asimismo, LabeledContent cuenta con otros constructores que nos permiten usar una cadena de texto para ambos parámetros (etiqueta y valor), o utilizar vistas para ambos parámetros.

Por ejemplo, podríamos usar LabeledContent de la siguiente forma:

Form {
  LabeledContent {
    Text("A hammer")
  } label: {
    Label("Tools", systemImage: "hammer")
  }
}

En este código utilizamos LabeledContent con dos vistas: un Text y un Label.

Opciones para personalizar LabeledContent

Puedes usar el modificador .labelsHidden() para ocultar la parte del label que contiene LabeledContent. Veamos qué pasa si usamos este modificador con la vista anterior:

Form {
  LabeledContent("How many?") {
    Toggle("One", isOn: $optionOne)
    Toggle("Two", isOn: $optionTwo)
  }
}
.labelsHidden()

En la siguiente imagen, podemos ver a la izquierda cómo se ve esta interfaz de usuario si no usamos el modificador labelsHidden() y a la derecha cómo se ve si lo usamos:

Además, puedes crear tus propios estilos y aplicarlos a las vistas tipo LabeledContent usando labeledContentStyle(_:). Para esto, debes crear un estilo conformando al protocolo LabeledContentStyle.

También puedes aplicar formatos predefinidos a los valores que muestres usando LabeledContent. Por ejemplo:

Form {
  LabeledContent("Progress", value: 54, format: .percent)
  LabeledContent("Balance", value: 54.23, format: .number)
  LabeledContent("Site", value: URL(string: "https://www.asynclearn.com")!, format: .url)
}

Conclusión

LabeledContent es una vista que nos permite asegurar que nuestras aplicaciones sigan los estándares de interfaz de usuario esperados por nuestros usuarios. Es otra herramienta útil para tener en tu conjunto de herramientas cuando estés creando interfaces de usuario.