Truco: SystemImage, ¡Más de 2.400 símbolos a tu disposición!

Desde Xojo 2020r2, tienes a tu disposición una forma tremendamente sencilla de utilizar símbolos de alta resolución y escalables como imágenes para tus dibujos sobre Canvas y como iconos en las Barras de Herramientas de tus proyectos iOS.

Y para ello sólo necesitas utilizar el método compartido SystemImage de la clase Picture, pasando el nombre del Símbolo gráfico que quieres usar, su tamaño, peso (piensa en ello como el peso de una fuente) y, opcionalmente, el ColorGroup que quieres emplear para entintar (dar color) al símbolo; así como la imagen de “respaldo” a emplear en el caso de que el símbolo en cuestión no esté disponible en la versión de iOS del dispositivo sobre el que se ejecute la app.

Pero comencemos por el principio.

Esta característica está basada en los símbolos proporcionados por las fuentes SF Symbols instaladas con las últimas versiones de iOS y macOS. De hecho, deberías de comenzar descargando e instalando la utilidad SF Symbols en tu Mac para ver, obtener información y seleccionar el nombre de los símbolos que querrás utilizar en tus diseños. Por ejemplo, algunos de ellos están disponibles a partir de iOS 13.0, mientras que otros sólo están disponibles si el dispositivo iOS está ejecutando iOS 14.0 o posterior.

Una vez que tengas el nombre de los símbolos que quieres usar, es momento de emplearlos en tu código Xojo. Por ejemplo, el siguiente fragmento en el manejador de evento Opening de la pantalla por omisión añadirá tres botones a la barra de herramientas usando los símbolos “pencil.tip.crop.circle”, “pencil.tip.crop.circle.badge.plus” y “pencil.tip.crop.circle.badge.minus” (o glifos de la fuente).

Var PencilAdd As New MobileToolbarButton(MobileToolbarButton.Types.Plain,"",Picture.SystemImage("pencil.tip.crop.circle.badge.plus",50))
Var PencilTip As New MobileToolbarButton(MobileToolbarButton.Types.Plain,"", Picture.SystemImage("pencil.tip.crop.circle",50))
Var pencilMinus As New MobileToolbarButton(MobileToolbarButton.Types.Plain,"",Picture.SystemImage("pencil.tip.crop.circle.badge.minus",50))

Me.Toolbar.AddButton(PencilTip)
Me.Toolbar.AddButton(PencilAdd)
Me.Toolbar.AddButton(PencilMinus)

Mientras que estas dos líneas de código dibujarán el glifo “moon” en el Canvas1 añadido a la pantalla Screen1 por omisión del proyecto (en su evento Paint):

Var p As Picture = Picture.SystemImage("moon",50)
g.DrawPicture(p,0,0)

Observa que, en este caso, el símbolo se dibujará al tamaño indicado; mientras que cuando se añaden como ToolBarButton, este ajusta el tamaño al estándar esperado para cualquier botón en la barra de herramientas bajo iOS.

Como puedes ver en la utilizada SF Symbols, hay una inmensa cantidad de símbolos gráficos entre los que puedes elegir y usar al tamaño deseado; y su implementación como parte de tu proyecto iOS no podría resultar más sencilla.