agregando soporte para color de tinte / Sudo Null IT News

Apple sigue deleitándonos con cada actualización de iOS, y iOS 18 no es una excepción. La nueva versión del sistema tiene la capacidad de personalizar íconos y widgets en la pantalla de inicio. Los usuarios pueden oscurecerlos o volver a pintarlos en su color favorito.

Para los usuarios, esto es una auténtica bendición a la hora de personalizar su iPhone. Pero ¿qué pasa con los desarrolladores que tienen que adaptar rápidamente sus aplicaciones a la nueva API? En este artículo, te contaré cómo el equipo de Clover preparó widgets para iOS 18, que de repente dejaron de verse atractivos después de la actualización del sistema.

Dificultades con los widgets de sombreado

Los widgets para una aplicación integrada en Xcode 15 son teñidos por el sistema de forma independiente. El fondo pintado en color se reemplaza correctamente por negro con un degradado y todos los elementos coloreados adquieren el tono seleccionado por el usuario. En este caso, los widgets no se vuelven monocromáticos. Si utiliza imágenes de fondo, el widget probablemente no se verá tan bien.

Después de actualizar Xcode, notamos que nuestros widgets ya no eran legibles al seleccionar un tinte. El sistema pintó de blanco todos los elementos ubicados en el widget.

En iOS 18, todos los elementos del widget, cuando se muestran en modo acento, se distribuyen en dos grupos. primer grupo default — se muestra con un canal alfa (blanco con transparencia). Segundo grupo accentedTiñe el canal alfa a un color seleccionado por el usuario. Después de la actualización, todos los elementos de nuestro widget cayeron en el grupo predeterminado y se volvieron blancos

Apple recomienda no depender de colores específicos para transmitir información en los widgets, ya que el color que seleccione un usuario puede cambiar completamente su significado. En su lugar, sugerimos centrarse en diseñar widgets en un estilo monocromático.

Entonces, después de mudarnos a un nuevo entorno, Apple no nos deja otra opción: debemos determinar cómo debería funcionar el sistema con los colores de los elementos del widget. Si ya estás siguiendo las pautas de Apple, es posible que esto no requiera mucho esfuerzo y este material te ayudará a hacer el trabajo por tu cuenta sin cambios importantes. Sin embargo, si tus widgets son tan multicolores como los de Clover, necesitarás preparar una nueva apariencia de widget monocromático.

¿Qué herramientas existen para trabajar con la acentuación?

Apple proporciona varias herramientas para trabajar con sombreado:

1. Modificador de Vista que indica la necesidad de énfasis: widgetAccentable(_:)

   Se recomienda enfatizar la información importante y relevante. Por ejemplo, resalte el día actual, el evento más cercano o un parámetro monitoreado.

2. Determinar el modo de visualización del widget actual: modo de representación del widget

   Le permite seleccionar de manera flexible colores e íconos para que coincidan con la pantalla actual. Por ejemplo, puede seleccionar un color alternativo si la versión a todo color no necesita contener un canal alfa, pero la versión monocromática sí.

3. Configuraciones de tono para imágenes: widgetAccentedRenderingMode(_:)

   Cuando usa imágenes en un widget (como portadas de contenido o fotografías), puede evitar que el sistema les aplique sombreado o puede especificar cómo se debe aplicar.

   

Grupos de énfasis

De forma predeterminada, todos los elementos del widget no están resaltados, razón por la cual, en nuestro ejemplo, los números de los días en el calendario se fusionaron con el fondo de los grupos seleccionados en el calendario.

Para que el sistema comience a aplicar la acentuación, debe especificar qué elementos deben resaltarse en color configurando el modificador widgetAccentable(_:). Lo principal es determinar correctamente qué elementos teñir y cuáles dejar intactos

Solicitud widgetAccentable() coloca la vista misma y todos sus elementos secundarios en un grupo para enfatizar, y widgetAccentable(false) — en un grupo que se mostrará en blanco con un canal alfa.

Circle()
    .fill(model.isCurrent ? .white : .clear)
    // No need for widgetAccentable(false) as it's not accentable by default

Text("21")
    .font(.system(size: 15))
    .foregroundColor(model.isCurrent ? .black : .white)
    .widgetAccentable(model.isCurrent) // Accent only the current day

Consejo: modificador de lugar widgetAccentable() lo más cerca posible del elemento que necesita ser enfatizado. Solicitud widgetAccentable(false) a sus elementos internos no tendrá ningún efecto.

Administrar recursos con widgetRenderingMode

Apple proporciona la propiedad medioambiental. Modo de representación de widgets. Esta propiedad le ayuda a descubrir cómo el sistema muestra el widget: en modo de visualización a todo color (fullColor) o en modo de teñido de un solo color (vibrant, accented).

Usando esta propiedad, puede adaptar la paleta del widget sobre la marcha dependiendo del modo de renderizado que esté activo. Por ejemplo, puede cambiar la paleta a un solo color si el sistema usa sombreado o sustituir un icono diferente.

struct PeridoDayView: View {
  @Environment(\\.widgetRenderingMode) 
  private var widgetRenderingMode
    
  var body: some View {
    DayRangeView()
      .foregroundStyle(
        widgetRenderingMode == .fullColor ? .periodColor : .white60Color
      )
  }
}

En Clover, los widgets se desarrollaron en 2020 y no se han actualizado desde entonces. Luego simplemente usamos la misma paleta y método de visualización del calendario que en la aplicación principal. Se suponía que los colores reflejarían las diferentes fases del ciclo menstrual, pero ahora necesitamos hacerlos monocromáticos de alguna manera y al mismo tiempo comprensibles para nuestras usuarias

En nuestro caso, decidimos reconstruir el widget usando diferentes niveles de transparencia para los elementos. A los colores tradicionales hemos añadido alternativas blancas con diferentes grados de transparencia: 20%, 30%, 60% y 100%.

Hicimos que los elementos importantes fueran más densos y acentuados, y los menos significativos, más transparentes. Esto nos permitió restaurar la legibilidad de los widgets, aunque tuvimos que sacrificar la información que antes transmitían los diferentes colores.

Soporte de renderizado para imágenes

Si tu widget usa imágenes, necesitarás un modificador widgetAccentedRenderingMode(_:). Se aplica a Image comenzando con iOS 18. Cuando un widget se muestra en modo acento, el sistema usa la regla establecida:

• accented — coloca la imagen en un grupo de elementos teñidos. Se mostrará en sus colores, pero con un color de acento superpuesto en la parte superior;

• accentedDesaturated — decolora la imagen y aplica un color de acento;

• desaturated — convierte la imagen a blanco y negro;

• fullColor— deja la imagen en su versión original a todo color sin aplicar tonificación.

Image("userAvatar")
	.resizable()
    .widgetAccentedRenderingMode(.fullColor)

Evidentemente, las imágenes a todo color son adecuadas para situaciones en las que es importante preservar el reconocimiento de los objetos: portadas de álbumes, imágenes de productos o avatares de usuarios. Las imágenes desaturadas en blanco y negro se ven geniales como fondos de widgets, como lo hace la aplicación Fotos. En mi opinión, las opciones de acento deberían utilizarse en todos los demás casos en los que la información de la imagen sea claramente legible sin conservar el color.

Consejos clave:

• Verifique la visualización de widgets al compilar a partir de diferentes versiones de Xcode.

• Cree diseños de widgets monocromáticos para ayudar a resaltar los elementos más importantes para darle énfasis.

• Establezca la saturación del tinte de acento en el dispositivo a cero: en un widget completamente monocromático es más fácil detectar errores en la superposición de elementos de los grupos predeterminados y acentuados.

• Evite el uso de colores para transmitir información; será difícil de interpretar si cambia el color de acento.

Conclusión

Adaptar los widgets a los nuevos requisitos de iOS 18 no es una tarea fácil, especialmente si inicialmente te desviaste de las pautas de Apple. Sin embargo, si sigue las recomendaciones, puede hacer que sus widgets sean tan elegantes y modernos como los de Apple.

Recuerde que esta actualización no es solo una solución para problemas técnicos. Esta es una oportunidad para repensar los diseños de los widgets y mejorarlos. Su objetivo principal es crear widgets que sean fáciles de usar y que se vean bien en cualquier color que el usuario elija para su teléfono.

Materiales adicionales: