Declaración del problema.
Puede usar imágenes en varios formatos, por ejemplo, fuentes png, svg o ttf, para mostrar iconos en la aplicación Xamarin.Forms. Muy a menudo, una fuente con íconos es conveniente para agregar íconos estándar, por ejemplo íconos de material de google. La fuente con iconos tiene un tamaño de aproximadamente 200K y la usabilidad suele ser más importante que ahorrar en el tamaño de la aplicación. Los iconos se verán bien en cualquier resolución de pantalla y serán en blanco y negro.
Hay paquetes nuget ya preparados para usar iconos. Solía iconize durante mucho tiempo (nuget -
www.nuget.org/packages/Xam.Plugin.Iconize ; git -
github.com/jsmarcus/Iconize ). Le permite conectar más de diez fuentes, agrega nuevos controles, como IconButton, IconImage, IconLabel, etc. Pero aquí están los argumentos habituales contra las bibliotecas listas para usar: funcionalidad adicional, tamaño de archivo adicional, no completamente satisfecho con el comportamiento, errores, etc. Por lo tanto, en algún momento decidí abandonar la biblioteca terminada y reemplazarla con una bicicleta simple de un par de clases + fuente.
El icono de la fuente ttf se usa en xaml de la siguiente manera (iOS):
<Label Text="" FontFamily="MaterialIcons-Regular"/>
En C #:
var label = new Label { Text ="\ue5d2", FontFamily = "MaterialIcons-Regular" };
Voy a enumerar los problemas que surgen.
1. formato diferente para escribir el código del icono en XAML y C # ("& # xe5d2;" / "\ ue5d2")
2. el código del ícono no está asociado con el ícono en sí, me gustaría usar algo como "flecha_atrás", como en iconize
3. si la aplicación se ejecutará en Android e iOS, entonces debe escribir el nombre de la fuente de manera diferente: "MaterialIcons-Regular.ttf # MaterialIcons-Regular" en Android y "MaterialIcons-Regular" en iOS
La solución descrita aquí requiere el evento TextChanged en el control Label. Agregue este problema a la lista:
4. el control Label no tiene un evento TextChanged. Necesitamos esto para rastrear los cambios del texto de la etiqueta y usar el enlace en xaml
Solución
Por ejemplo, tome los iconos de fuente de material de google. Primero, agréguelo a proyectos de Android e iOS.
Descarga la fuente aquíÍconos buscar aquíDescargue el archivo de fuente - MaterialIcons-Regular.ttf.
Android:
Agregue MaterialIcons-Regular.ttf a la carpeta Assets y seleccione el Asset Android "Build action" para ello.
iOS:
Agregue MaterialIcons-Regular.ttf a la carpeta Resources \ Fonts y seleccione el BundleResource "Build action" para ello, luego escriba la fuente en info.plist:
<key>UIAppFonts</key> <array> <string>Fonts/MaterialIcons-Regular.ttf</string> </array>
Ahora supongamos que queremos un icono de flecha izquierda en nuestra aplicación. Vamos a la página con el motor de búsqueda de íconos:
https://material.io/resources/icons/ , ingrese "flecha" en la esquina superior izquierda, seleccione la flecha izquierda en los resultados. Ahora haga clic en el panel "Icono seleccionado" para ver el código del icono ... pero no está allí:
Usage: <i class="material-icons"> arrow_back </i> <i class="material-icons"> arrow_back </i>
Sí, y no es muy conveniente traducir los nombres a códigos cada vez, y luego averiguar cuál es el ícono en el código de la aplicación. Sería más conveniente usar el nombre descriptivo del ícono - "flecha_respaldo" como este:
<Label Text="arrow_back">
Para la solución, utilizaremos el llamado comportamiento en la traducción al ruso de "Reacciones a Xamarin.Forms Events" (
https://docs.microsoft.com/ru-ru/xamarin/xamarin-forms/app-fundamentals/behaviors/ )
Para hacer esto, cree la clase GoogleMaterialFontBehavior:
public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { }
Nuestro comportamiento responderá a los cambios en el texto de la etiqueta, por lo que la etiqueta también deberá finalizarse:
using System; using Xamarin.Forms; namespace MyApp.UserControls { public class CustomLabel : Label { public event EventHandler<EventArgs> TextChanged; public static readonly new BindableProperty TextProperty = BindableProperty.Create( propertyName: nameof(Text), returnType: typeof(string), declaringType: typeof(CustomLabel), defaultValue: "", defaultBindingMode: BindingMode.OneWay, propertyChanged: TextChangedHandler); public new string Text { get => (string)GetValue(TextProperty); set { base.Text = value; SetValue(TextProperty, value); } } private static void TextChangedHandler(BindableObject bindable, object oldValue, object newValue) { var control = bindable as CustomLabel; control.TextChanged?.Invoke(control, new EventArgs()); } } }
En la clase GoogleMaterialFontBehavior, necesita:
- anular los métodos OnAttachedTo / OnDetachingFrom
- agregar controlador de cambio de texto: HandleTextChanged
- agregar nombre de fuente fontFamily
- y también agregue un directorio de códigos de caracteres iconCodeDict
namespace MyApp.Behaviors { public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { protected override void OnAttachedTo(CustomLabel bindable) { HandleTextChanged(bindable, null); bindable.TextChanged += HandleTextChanged; base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(CustomLabel bindable) { bindable.TextChanged -= HandleTextChanged; base.OnDetachingFrom(bindable); } private void HandleTextChanged(object sender, EventArgs e) { var label = (CustomLabel)sender; if (label?.Text?.Length >= 2 && iconCodeDict.TryGetValue(label.Text, out var icon)) { label.FontFamily = fontFamily; label.Text = icon.ToString(); } }
Y ahora sobre la referencia iconCodeDict en sí. Contendrá pares de nombre-código para caracteres de fuente. En el caso de los iconos de material de google, estos datos se encuentran en un repositorio de git en un archivo separado:
github.com/google/material-design-icons/blob/master/iconfont/codepointsEjemplo de uso
XAML:
en la parte superior de la página agregue 2 espacios de nombres:
xmlns:uc="clr-namespace:MyApp.UserControls" xmlns:b="clr-namespace:MyApp.Behaviors"
y muestra el icono:
<uc:CustomLabel Text="arrow_back" FontSize="30"> <Label.Behaviors> <b:GoogleMaterialFontBehavior /> </Label.Behaviors> </uc:CustomLabel>
C #:
var label = new CustomLabel(); label.Behaviors.Add (new GoogleMaterialFontBehavior()); label.Text = "arrow_back";
Opcional
También me gustaron mucho los iconos de fuente Jam. Creemos una clase JamFontBehavior para ella, similar a GoogleMaterialFontBehavior. Otros en él serán: fontFamily e iconCodeDict.
Descargue la fuente aquí:
https://github.com/michaelampr/jam/blob/master/fonts/jam-icons.ttfIconos para buscar aquí:
https://jam-icons.com/Motor de búsqueda muy conveniente. Encuentra el icono, haz clic en él y el nombre en el portapapeles. Queda por insertarlo simplemente en el código.
El algoritmo es el mismo que para los íconos de Google, excepto para obtener códigos de íconos.
Los códigos deben tomarse del archivo svg ubicado
en el mismo lugar .
Los datos se pueden extraer fácilmente utilizando un editor de texto como sublime. Seleccione la línea "etiquetas de datos", presione Alt + F3, se activa el cursor múltiple. Siguiente turno + inicio, ctrl + c, ctrl + a, ctrl + v. Y así sucesivamente. Es posible con la ayuda de Excel, a quien le resulta más familiar.
Por ejemplo, la flecha izquierda se ve así en el archivo svg:
<glyph unicode="" glyph-name="arrow-left" data-tags="arrow-left" d="M358.997 398.635l168.533-168.533c7.15-7.611 11.543-17.885 11.543-29.185 0-23.564-19.103-42.667-42.667-42.667-11.311 0-21.594 4.401-29.229 11.585l0.022-0.020-241.365 241.323c-7.749 7.706-12.545 18.376-12.545 30.165s4.796 22.459 12.544 30.163l241.367 241.367c7.769 8.036 18.647 13.026 30.69 13.026 23.564 0 42.667-19.103 42.667-42.667 0-12.043-4.989-22.92-13.014-30.678l-168.545-168.545h409.003c23.564 0 42.667-19.103 42.667-42.667s-19.103-42.667-42.667-42.667v0h-409.003z" />
Después de borrar el texto, obtenemos el contenido de los campos nombre-glifo y unicode:
{"arrow-left", '\ue92b'}
y agregue iconCodeDict al diccionario