Truco: Usar Símbolos SF en tus apps macOS

Desde la publicación de la entrada “Truco: SystemImage, más de 2.400 símbolos a tu disposición”, algunos usuarios han preguntado sobre como pueden hacer esto mismo en macOS. Continúa leyendo para mostrarte una de las posibles técnicas.

Por supuesto, el primero paso es asegurarte de que tengas instalada la fuente SF Pro en tu Mac; algo que puedes hacer descargándola desde aquí y usando posteriormente la utilidad Catálogo Tipográfico para instalar la fuente en la carpeta Fuentes como parte del Sistema.

Además, probablemente también querrás instalar la utilidad SF Symbols que puedes descargar desde este enlace, dado que esta te mostrará todos los glifos correspondientes a los símbolos de la fuente, así como los nombres asociados con cada glifo.

El problema es que en macOS no contamos con el método Picture.SystemImage para obtener y mostrar cualquiera de dichos símbolos. ¿Cómo podemos hacerlo entonces? Bueno, estos son glifos de una fuente después de todo… y eso significa que sólo necesitas obtener el valor Unicode para cualquiera de los símbolos que quieras usar en tus apps, en combinación con el método compartido Text.FromUnicodePoint.

El principal problema aquí es encontrar una forma sencilla de obtener la equivalencia de código de punto para cada nombre de símbolo mostrado en la utilidad SF Symbols.

Para allanar el camino, puedes descargar este proyecto de ejemplo sencillo de Xojo, en el que se incluye una clase realmente básica que se encarga de mapear estas dos piezas de información. Así, sólo tendrás que usar el método SFSymbol.Name pasando como parámetro cualquiera de los nombres de símbolo disponibles, y obtendrás como resultado la String que contiene el glifo asociado.

Por supuesto, para que los controles del diseño de tus ventanas puedan mostrar correctamente el símbolo en cuestión, también tendrás que definir la propiedad FontName del control a, por ejemplo, “SF Pro Display” o “SF Pro Compact“, así como la propiedad FontSize al valor deseado para el símbolo. Por tanto, puedes utilizar estos símbolos como el texto de etiqueta para los Botones, el texto dibujado en cualquier Canvas o para cualquier otro elemento.

Por ejemplo, aquí puedes ver los Símbolos SF aplicados sobre dos botones estándar de Xojo y también en la primera columna del Listbox (mostrando el nombre asociado del símbolo en la segunda columna).

¡Eso es todo! Usando estos símbolos, tal y como ya haces con el resto de las fuentes, te aseguras el máximo de calidad y definición en cualquier tamaño que decidas usarlos. Además, también reaccionarán correctamente a los cambios entre los Modos Claro y Modo Oscuro de macOS.

Por supuesto, el uso que puedes hacer de la fuente SF Pro en tus apps está recogido en los términos y acuerdo de licencia proporcionados por Apple. Además, macOS 11 incluye una nueva API que es equivalente a la encontrada en iOS… pero veremos como usarla en una próxima futura.

¡Truco adicional!

Probablemente querrás usar algunos de estos símbolos como el icono mostrado sobre cualquiera de los botones de Xojo; y si además también quiere asociar un color a la etiqueta, entonces hay modo de hacerlo mediante el uso de Declare. Sólo tienes que echar un vistazo al método ColorForButtonCaption que encontrarás en la ventana SymbolList del proyecto de ejemplo.