SwiftUI Textfield con limitación de longitud y Gráfico Circular

Vamos a ver como gracias a SwiftUI podemos construir un Textfield con límite texto que incluye un gráfico circular indicando el porcentaje de caracteres que aún podemos escribir.

Y gracias al diseño de SwiftUI todo esto lo podemos hacer con no más de 120 líneas de código dividido en dos estructuras y una clase. Vamos a verlo.

El gráfico circular

La vista del gráfico está formada por un ZStack que contiene dos Circle y un Text, todos ellos contenidos en un GeometryReader que usamos para establecer el tamaño de los círculos con respecto a la vista padre que los contiene.

Recordemos que ZStack coloca las vistas que están contenidas en ella apiladas sobre el eje Z, es decir, unas encimas de otras. De esta manera el primer Circle hace las veces de fondo mientras que el siguiente es el vamos modificando, tanto en tamaño como en color, para indicar el porcentaje que nos queda.

¿Y cómo actualiza los datos? Mediante tres Bindings que son gestionados por el ViewModel del proyecto, bien de manera directa o bien mediante el operador onReveice

La Vista

Aquí tenemos el código de la View que contiene el gráfico del apartado anterior junto con el Textfield que está limitado a no más de 35 caracteres de longitud.

Además de los widgets también tenemos unos cuantos @State y el ViewModel que controla el contenido del Textfield así como la cantidad de texto que aún podemos añadir.

Estos States y Published se usan tanto para mantener el límite de texto como para informar al gráfico circular del porcentaje y color que deben mostrar.

El ViewModel

Es la clase que gracias al protocolo ObservableObject permite informar de los cambios acontecidos en aquellas propiedad marcadas con el PropertytWrapper @Published

Estos cambios son detectados automáticamente por la vista o también se pueden recuperar en la vista mediante el operador onReceive tal y como mostramos en este ejemplo.

Todo junto

Y si juntamos todo tenemos algo como…

Enlaces de interés

  • Página principal de SwiftUI en la web de desarrolladores de Apple
  • Tutoriales sobre SwiftUI en la web de Apple