Erklärung des Problems
Sie können Bilder in verschiedenen Formaten verwenden, z. B. PNG-, SVG- oder TTF-Schriftarten, um Symbole in der Xamarin.Forms-Anwendung anzuzeigen. In den meisten Fällen ist eine Schriftart mit Symbolen praktisch, um Standardsymbole hinzuzufügen, z. B. Google-Materialsymbole. Die Schriftart mit Symbolen hat eine Größe von ca. 200 KB und die Benutzerfreundlichkeit ist normalerweise wichtiger als das Speichern der Anwendungsgröße. Symbole sehen bei jeder Bildschirmauflösung gut aus und sind schwarzweiß.
Es gibt vorgefertigte Nuget-Pakete für die Verwendung von Symbolen. Ich habe iconize lange Zeit verwendet (nuget -
www.nuget.org/packages/Xam.Plugin.Iconize ; git -
github.com/jsmarcus/Iconize ). Sie können mehr als zehn Schriftarten verbinden und neue Steuerelemente wie IconButton, IconImage, IconLabel usw. hinzufügen. Aber hier gibt es die üblichen Argumente gegen vorgefertigte Bibliotheken: zusätzliche Funktionalität, zusätzliche Dateigröße, nicht vollständig zufrieden mit Verhalten, Fehlern usw. Aus diesem Grund habe ich mich irgendwann entschlossen, die fertige Bibliothek aufzugeben und durch ein einfaches Fahrrad aus zwei Klassen + Schriftarten zu ersetzen.
Das Symbol aus der Schriftart ttf wird in xaml wie folgt verwendet (iOS):
<Label Text="" FontFamily="MaterialIcons-Regular"/>
In C #:
var label = new Label { Text ="\ue5d2", FontFamily = "MaterialIcons-Regular" };
Ich werde die auftretenden Probleme auflisten.
1. anderes Format zum Schreiben des Symbolcodes in XAML und C # ("& # xe5d2;" / "\ ue5d2")
2. Der Icon-Code ist nicht mit dem Icon selbst verknüpft. Ich möchte etwas wie "arrow_back" verwenden, wie in iconize
3. Wenn die Anwendung unter Android und iOS ausgeführt werden soll, müssen Sie den Schriftnamen anders schreiben - "MaterialIcons-Regular.ttf # MaterialIcons-Regular" in Android und "MaterialIcons-Regular" in iOS
Die hier beschriebene Lösung erfordert das TextChanged-Ereignis im Label-Steuerelement. Fügen Sie dieses Problem der Liste hinzu:
4. Das Label-Steuerelement verfügt nicht über ein TextChanged-Ereignis. Wir benötigen dies, um Änderungen am Etikettentext zu verfolgen und die Bindung in xaml zu verwenden
Lösung
Nehmen Sie zum Beispiel die Google-Materialsymbole für Schriftarten. Fügen Sie es zunächst zu Android- und iOS-Projekten hinzu.
Schriftart hier herunterladenHier wird nach Symbolen gesuchtLaden Sie die Schriftartdatei herunter - MaterialIcons-Regular.ttf.
Android:
Fügen Sie MaterialIcons-Regular.ttf zum Ordner "Assets" hinzu und wählen Sie das AndroidAsset "Build Action" aus.
iOS:
Fügen Sie MaterialIcons-Regular.ttf zum Ordner Resources \ Fonts hinzu, wählen Sie die BundleResource "Build Action" aus und schreiben Sie die Schriftart in info.plist:
<key>UIAppFonts</key> <array> <string>Fonts/MaterialIcons-Regular.ttf</string> </array>
Angenommen, wir möchten ein Linkspfeilsymbol in unserer Anwendung. Wir gehen zur Seite mit der Symbolsuchmaschine:
https://material.io/resources/icons/ , geben "Pfeil" in die obere linke Ecke ein und wählen den linken Pfeil in den Ergebnissen aus. Klicken Sie nun auf das Fenster "Ausgewähltes Symbol", um den Symbolcode anzuzeigen ... aber er ist nicht vorhanden:
Usage: <i class="material-icons"> arrow_back </i> <i class="material-icons"> arrow_back </i>
Ja, und es ist nicht sehr praktisch, die Namen jedes Mal in Codes zu übersetzen und dann herauszufinden, was das Symbol im Anwendungscode ist. Es wäre bequemer, den Anzeigenamen des Symbols zu verwenden - "arrow_back" wie folgt:
<Label Text="arrow_back">
Für die Lösung verwenden wir das sogenannte Verhalten in der russischen Übersetzung von "Reaktionen auf Xamarin.Forms-Ereignisse" (
https://docs.microsoft.com/ru-ru/xamarin/xamarin-forms/app-fundamentals/behaviors/ ).
Erstellen Sie dazu die GoogleMaterialFontBehavior-Klasse:
public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { }
Unser Verhalten reagiert auf sich ändernde Etikettentexte, daher muss auch das Etikett finalisiert werden:
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()); } } }
In der GoogleMaterialFontBehavior-Klasse benötigen Sie:
- OnAttachedTo / OnDetachingFrom-Methoden überschreiben
- Textänderungshandler hinzufügen: HandleTextChanged
- Schriftart hinzufügen fontFamily
- Fügen Sie außerdem ein Verzeichnis mit Zeichencodes iconCodeDict hinzu
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(); } }
Und nun zur iconCodeDict-Referenz selbst. Es enthält Name-Code-Paare für Schriftzeichen. Bei Google-Materialsymbolen befinden sich diese Daten in einem Git-Repository in einer separaten Datei:
github.com/google/material-design-icons/blob/master/iconfont/codepointsAnwendungsbeispiel
XAML:
Fügen Sie oben auf der Seite 2 Namespaces hinzu:
xmlns:uc="clr-namespace:MyApp.UserControls" xmlns:b="clr-namespace:MyApp.Behaviors"
und zeigen Sie das Symbol an:
<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";
Optional
Mir haben auch die Font Jam-Symbole sehr gut gefallen. Erstellen wir dafür eine JamFontBehavior-Klasse, ähnlich wie bei GoogleMaterialFontBehavior. Andere darin sind: fontFamily und iconCodeDict.
Laden Sie die Schriftart hier herunter:
https://github.com/michaelampr/jam/blob/master/fonts/jam-icons.ttfHier zu suchende Symbole:
https://jam-icons.com/Sehr bequeme Suchmaschine. Suchen Sie das Symbol, klicken Sie darauf und den Namen in der Zwischenablage. Es bleibt einfach, es in den Code einzufügen.
Der Algorithmus ist der gleiche wie für Google-Symbole, außer dass Symbolcodes abgerufen werden.
Codes müssen aus der SVG-Datei entnommen werden, die sich
am selben Ort befindet .
Daten können einfach mit einem Texteditor wie sublime abgerufen werden. Wählen Sie die Zeile "Daten-Tags", drücken Sie Alt + F3, der Multi-Cursor wird eingeschaltet. Nächste Schicht + nach Hause, Strg + C, Strg + A, Strg + V. Usw. Es ist mit Hilfe von Excel möglich, wem was vertrauter ist.
Der linke Pfeil sieht beispielsweise in der SVG-Datei folgendermaßen aus:
<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" />
Nach dem Löschen des Textes erhalten wir den Inhalt der Glyphennamen- und Unicode-Felder:
{"arrow-left", '\ue92b'}
und fügen Sie iconCodeDict zum Wörterbuch hinzu