Pernyataan masalah
Anda dapat menggunakan gambar dalam berbagai format, misalnya font png, svg atau ttf, untuk menampilkan ikon di aplikasi Xamarin.Forms. Paling sering, font dengan ikon nyaman untuk menambahkan ikon standar, misalnya ikon materi google. Font dengan ikon memiliki ukuran sekitar 200 ribu dan kegunaan biasanya lebih penting daripada menghemat ukuran aplikasi. Ikon akan terlihat bagus pada resolusi layar apa pun dan akan menjadi hitam putih.
Ada paket nuget yang sudah jadi untuk menggunakan ikon. Saya menggunakan ikon untuk waktu yang lama (nuget -
www.nuget.org/packages/Xam.Plugin.Iconize ; git -
github.com/jsmarcus/Iconize ). Ini memungkinkan Anda untuk menghubungkan lebih dari sepuluh font, menambahkan kontrol baru, seperti IconButton, IconImage, IconLabel, dll. Tetapi di sini ada argumen umum terhadap pustaka siap pakai: fungsionalitas ekstra, ukuran file ekstra, tidak sepenuhnya puas dengan perilaku, bug, dll. Oleh karena itu, di beberapa titik saya memutuskan untuk meninggalkan perpustakaan yang sudah selesai dan menggantinya dengan sepeda sederhana dari sepasang kelas + font.
Ikon dari font ttf digunakan dalam xaml sebagai berikut (iOS):
<Label Text="" FontFamily="MaterialIcons-Regular"/>
Dalam C #:
var label = new Label { Text ="\ue5d2", FontFamily = "MaterialIcons-Regular" };
Saya akan membuat daftar masalah yang muncul.
1. format berbeda untuk menulis kode ikon di XAML dan C # ("& # xe5d2;" / "\ ue5d2")
2. kode ikon tidak terkait dengan ikon itu sendiri, saya ingin menggunakan sesuatu seperti "panah_back", seperti dalam ikon
3. jika aplikasi akan berjalan di android dan iOS, maka Anda perlu menulis nama font secara berbeda - "MaterialIcons-Regular.ttf # MaterialIcons-Regular" di android dan "MaterialIcons-Regular" di iOS
Solusi yang dijelaskan di sini membutuhkan acara TextChanged pada kontrol Label. Tambahkan masalah ini ke daftar:
4. Kontrol Label tidak memiliki acara TextChanged. Kami membutuhkan ini untuk melacak perubahan teks label dan menggunakan binding di xaml
Solusi
Misalnya, ambil ikon ikon materi google. Pertama, tambahkan ke proyek android dan iOS.
Unduh font di siniPencarian ikon di siniUnduh file font - MaterialIcons-Regular.ttf.
Android:
Tambahkan MaterialIcons-Regular.ttf ke folder Aset dan pilih "Build action" AndroidAsset untuknya.
iOS:
Tambahkan MaterialIcons-Regular.ttf ke folder Resources \ Fonts dan pilih BundleResource "Build action" untuknya, lalu tulis font di info.plist:
<key>UIAppFonts</key> <array> <string>Fonts/MaterialIcons-Regular.ttf</string> </array>
Sekarang anggaplah kita menginginkan ikon panah kiri dalam aplikasi kita. Kami pergi ke halaman dengan mesin pencari ikon:
https://material.io/resources/icons/ , masukkan "panah" di sudut kiri atas, pilih panah kiri di hasil. Sekarang klik pada panel "Selected Icon" untuk melihat kode ikon ... tetapi tidak ada di sana:
Usage: <i class="material-icons"> arrow_back </i> <i class="material-icons"> arrow_back </i>
Ya, dan sangat tidak mudah untuk menerjemahkan nama menjadi kode setiap kali, dan kemudian mencari tahu apa ikonnya dalam kode aplikasi. Akan lebih mudah menggunakan nama ikon yang ramah - “arrow_back” seperti ini:
<Label Text="arrow_back">
Untuk solusinya, kita akan menggunakan perilaku yang disebut dalam terjemahan Rusia "Reaksi terhadap Xamarin. Acara Peristiwa" (
https://docs.microsoft.com/ru-ru/xamarin/xamarin-forms/app-fundamentals/behaviors/ )
Untuk melakukan ini, buat kelas GoogleMaterialFontBehavior:
public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { }
Perilaku kami akan merespons perubahan teks label, sehingga Label juga harus diselesaikan:
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()); } } }
Di kelas GoogleMaterialFontBehavior, Anda perlu:
- menimpa metode OnAttachedTo / OnDetachingFrom
- tambahkan penangan perubahan teks: HandleTextChanged
- tambahkan nama font fontFamily
- dan juga menambahkan direktori kode karakter 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(); } }
Dan sekarang tentang referensi iconCodeDict itu sendiri. Ini akan berisi pasangan kode-nama untuk karakter font. Dalam hal ikon material Google, data ini terletak di repositori git di file terpisah:
github.com/google/material-design-icons/blob/master/iconfont/codepointsContoh penggunaan
XAML:
di bagian atas halaman tambahkan 2 ruang nama:
xmlns:uc="clr-namespace:MyApp.UserControls" xmlns:b="clr-namespace:MyApp.Behaviors"
dan tampilkan ikon:
<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";
Opsional
Saya juga sangat menyukai ikon font Jam. Mari kita buat kelas JamFontBehavior untuknya, mirip dengan GoogleMaterialFontBehavior. Lainnya di dalamnya adalah: fontFamily dan iconCodeDict.
Unduh fontnya di sini:
https://github.com/michaelampr/jam/blob/master/fonts/jam-icons.ttfIkon untuk dicari di sini:
https://jam-icons.com/Mesin pencari yang sangat nyaman. Temukan ikonnya, klik padanya dan nama di clipboard. Masih cukup dengan memasukkannya ke dalam kode.
Algoritma ini sama dengan untuk ikon google, kecuali untuk mendapatkan kode ikon.
Kode harus diambil dari file svg yang terletak
di tempat yang sama .
Data dapat dengan mudah ditarik menggunakan editor teks seperti luhur. Pilih baris "data-tag", tekan Alt + F3, multi-kursor dihidupkan. Shift + home berikutnya, ctrl + c, ctrl + a, ctrl + v. Dan sebagainya. Hal ini dimungkinkan dengan bantuan Excel, kepada siapa yang lebih akrab.
Misalnya, panah kiri terlihat seperti ini di file 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" />
Setelah menghapus teks, kami mendapatkan konten dari nama mesin terbang dan bidang unicode:
{"arrow-left", '\ue92b'}
dan tambahkan iconCodeDict ke kamus