4D para móviles: Formateadores de datos personalizados para apariencias claras y oscuras

Traducido automáticamente de Deepl

Durante algún tiempo, usted ha podido crear sus propios formateadores de datos personalizados y convertir cadenas, booleanos o enteros en imágenes en su aplicación generada.

Esta nueva función de 4D v19 R2 le permitirá aprovechar al máximo esos formateadores para iOS y Android, y asegurarse de que las imágenes se vean bien tanto en apariencia clara como oscura.

¡Veamos cómo!

Puede hacerlo de tres maneras diferentes :

  • utilizando colores en blanco y negro
  • utilizando diferentes imágenes en función del modo activo
  • mezclando las dos opciones anteriores

Utilizando colores en blanco y negro

Esta opción le permitirá obtener imágenes con colores optimizados en función del modo configurado en su dispositivo móvil (claro u oscuro).


{"name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54,
"tintable": true
}
}

Para todos sus formateadores clásicos, el archivo manifest.json del formateador ya debería contener la siguiente información :

  • una «choiceList » que contenga los valores que van a ser sustituidos por imágenes
  • propiedades de las imágenes (o activos) como «size» (tamaño)

La diferencia significativa aquí es que la clave «tintable » se establece en true para que el color de la imagen (blanco o negro) pueda adaptarse dinámicamente según el modo de tema de la UI.

Esto es lo que obtienes en tu teléfono cuando cambias de modo:

Utilizar diferentes imágenes según el modo

Esta opción te permite establecer que se muestren diferentes imágenes optimizadas en función del modo establecido en tu dispositivo móvil.


{"name": "textToImage",
"type": ["text"],
"binding": "imageNamed",
"choiceList": {"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets": {
"size": 54
}
}

Aquí, el formateador es el mismo que el anterior. Lo que cambia es el nombre de la imagen. Si una imagen lleva el sufijo «_dark», se utiliza para el modo oscuro.

Ejemplo: «clear_dark.png» se establece como la versión oscura de «clear.png»

blank

Este es el resultado:

blank

Mezcla de ambas opciones

Esta opción le permitirá aprovechar las dos opciones anteriores. Esto significa que puede establecer la clave «tintable » en verdadero, y al mismo tiempo especificar las imágenes y los colores optimizados que se mostrarán dependiendo del modo establecido en su dispositivo móvil.

blank

Ahora está listo para utilizar sus formateadores tanto si su dispositivo iOS y Android está en modo oscuro como claro.

Sí, ¡esta función también está disponible en Android!

blank

No dude en darnos su opinión en el foro de 4D, y consulte la documentación dedicada para más detalles.

David Azancot
• Propietario de Producto 4D for iOS - David Azancot se unió al equipo de Producto 4D como Propietario de Producto en 2017. Está a cargo de escribir las historias de usuario y traducirlas en especificaciones funcionales. Su papel también incluye asegurarse de que las implementaciones de funcionalidades satisfagan las necesidades de los clientes. David se graduó con un MBA en Mercadeo, Internet y Movilidad en el Instituto Leonard De Vinci y comenzó su carrera en 2011 con una empresa móvil de nueva creación, posteriormente adquirida por Madvertise (un grupo de mercadeo móvil). Apasionado de las interfaces móviles, fue la elección natural para desarrollar formatos de anuncios móviles interactivos para el grupo en 2015. Paralelamente, David desarrolla sus propias aplicaciones para iOS y Android desde 2012.