Xamarin.Forms - الاستخدام المريح للخطوط رمز في التطبيق

بيان المشكلة

يمكنك استخدام الصور بتنسيقات متعددة ، على سبيل المثال خطوط png أو svg أو ttf لعرض الرموز في تطبيق Xamarin.Forms. غالبًا ما يكون الخط الذي يحتوي على رموز مناسبًا لإضافة الرموز القياسية ، على سبيل المثال أيقونات مواد google. يبلغ حجم الخط الذي يحتوي على الرموز حوالي 200 كيلو بايت وعادةً ما تكون قابلية الاستخدام أكثر أهمية من الحفظ على حجم التطبيق. ستبدو الرموز جيدة في أي دقة شاشة وستكون بالأبيض والأسود.

هناك حزم nuget جاهزة لاستخدام الرموز. كنت أيقونة لفترة طويلة (nuget - www.nuget.org/packages/Xam.Plugin.Iconize ؛ git - github.com/jsmarcus/Iconize ). يتيح لك الاتصال بأكثر من عشرة خطوط وإضافة عناصر تحكم جديدة ، مثل IconButton و IconImage و IconLabel وما إلى ذلك. ولكن هنا توجد الحجج المعتادة ضد المكتبات الجاهزة: وظيفة إضافية ، حجم ملف إضافي ، غير راضٍ تمامًا عن السلوك ، الأخطاء ، إلخ. لذلك ، في مرحلة ما ، قررت التخلي عن المكتبة النهائية واستبدالها بدراجة بسيطة من زوج من الفصول + الخط.

يتم استخدام الرمز من الخط ttf في xaml كما يلي (iOS):

<Label Text="&#xe5d2;" FontFamily="MaterialIcons-Regular"/> 

في C #:

 var label = new Label { Text ="\ue5d2", FontFamily = "MaterialIcons-Regular" }; 

سأذكر المشاكل التي تنشأ.

1. تنسيق مختلف لكتابة رمز الرمز في XAML و C # ("& # xe5d2؛" / "\ ue5d2")

2. رمز الرمز غير مرتبط بالرمز نفسه ، أود استخدام شيء مثل "arrow_back" ، كما في الرمز

3. إذا كان سيتم تشغيل التطبيق على نظامي Android و iOS ، فأنت بحاجة إلى كتابة اسم الخط بشكل مختلف - "MaterialIcons-Regular.ttf # MaterialIcons-Regular" في android و "MaterialIcons-Regular" في iOS

الحل الموصوف هنا يتطلب الحدث TextChanged على عنصر التحكم تسمية. أضف هذه المشكلة إلى القائمة:

4. لا يحتوي عنصر التحكم تسمية حدث TextChanged. نحن بحاجة إلى هذا لتتبع تغييرات نص التسمية واستخدام الربط في xaml

قرار

على سبيل المثال ، خذ رموز المواد google الخط. أولاً ، قم بإضافته إلى مشاريع Android و iOS.
تحميل الخط هنا
أيقونات البحث هنا

قم بتنزيل ملف الخطوط - MaterialIcons-Regular.ttf.

الروبوت:
أضف MaterialIcons-Regular.ttf إلى مجلد الأصول وحدد "إنشاء إجراء" AndroidAsset له.

دائرة الرقابة الداخلية:
أضف MaterialIcons-Regular.ttf إلى مجلد Resources \ Fonts وحدد BundleResource "إنشاء إجراء" له ، ثم اكتب الخط في info.plist:

 <key>UIAppFonts</key> <array> <string>Fonts/MaterialIcons-Regular.ttf</string> </array> 

لنفترض الآن أننا نريد أيقونة السهم الأيسر في طلبنا. نذهب إلى الصفحة باستخدام محرك البحث على الأيقونة: https://material.io/resources/icons/ ، وأدخل "السهم" في الزاوية العلوية اليسرى ، وحدد السهم الأيسر في النتائج. انقر الآن على لوحة "الأيقونة المحددة" لرؤية رمز الأيقونة ... لكنها ليست هناك:

 Usage: <!--For modern browsers--> <i class="material-icons"> arrow_back </i> <!-- For IE9 or below. --> <i class="material-icons"> arrow_back </i> 

نعم ، وليس من السهل جدًا ترجمة الأسماء إلى أكواد في كل مرة ، ثم معرفة الرمز الموجود في رمز التطبيق. سيكون أكثر ملاءمة لاستخدام الاسم المألوف للرمز - "arrow_back" مثل هذا:

 <Label Text="arrow_back"> 

بالنسبة للحل ، سوف نستخدم السلوك المسمى في الترجمة الروسية "ردود الفعل على أحداث Xamarin.Forms" ( https://docs.microsoft.com/ru-ru/xamarin/xamarin-forms/app-fundamentals/behaviors/ )

للقيام بذلك ، قم بإنشاء فئة GoogleMaterialFontBehavior:

 public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { } 

سوف يستجيب سلوكنا لتغيير نص التسمية ، لذلك يجب أيضًا وضع اللمسات الأخيرة على Label:

 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()); } } } 

في فئة GoogleMaterialFontBehavior ، تحتاج إلى:

• تجاوز أساليب OnAttachedTo / OnDetachingFrom
• إضافة معالج تغيير النص: HandleTextChanged
• إضافة اسم الخط fontFamily
• وأيضا إضافة دليل رموز الرموز 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(); } } // private static readonly string fontFamily = Device.RuntimePlatform == Device.Android ? "MaterialIcons-Regular.ttf#MaterialIcons-Regular" : "MaterialIcons-Regular"; private static readonly Dictionary<string, char> iconCodeDict = new Dictionary<string, char> { {"3d_rotation", '\ue84d'}, {"ac_unit", '\ueb3b'}, {"access_alarm", '\ue190'}, … } } } 

والآن حول iconCodeDict الرجوع نفسها. وسوف تحتوي على أزواج اسم رمز لأحرف الخطوط. في حالة رموز مواد google ، تكمن هذه البيانات في مستودع git في ملف منفصل: github.com/google/material-design-icons/blob/master/iconfont/codepoints

مثال للاستخدام

XAML:

في الجزء العلوي من الصفحة ، أضف 2 من مساحات الأسماء:

 xmlns:uc="clr-namespace:MyApp.UserControls" xmlns:b="clr-namespace:MyApp.Behaviors" 

وعرض الرمز:

 <uc:CustomLabel Text="arrow_back" FontSize="30"> <Label.Behaviors> <b:GoogleMaterialFontBehavior /> </Label.Behaviors> </uc:CustomLabel> 

جيم #:

 var label = new CustomLabel(); label.Behaviors.Add (new GoogleMaterialFontBehavior()); label.Text = "arrow_back"; 

بالإضافة إلى ذلك

أنا أيضا حقا أحب الرموز جام الخط. دعونا ننشئ فئة JamFontBehavior لها ، على غرار GoogleMaterialFontBehavior. الآخرين في ذلك سيكون: fontFamily و iconCodeDict.

قم بتنزيل الخط هنا: https://github.com/michaelampr/jam/blob/master/fonts/jam-icons.ttf
أيقونات للبحث هنا: https://jam-icons.com/

محرك بحث مناسب جدا. ابحث عن الرمز ، وانقر فوقه والاسم الموجود في الحافظة. يبقى ببساطة إدخاله في التعليمات البرمجية.

الخوارزمية هي نفسها بالنسبة لرموز google ، باستثناء الحصول على رموز الرموز.

يجب أن تؤخذ الرموز من ملف svg الموجود في نفس المكان .

يمكن بسهولة سحب البيانات باستخدام محرر نصوص مثل sublime. حدد السطر "علامات البيانات" ، اضغط على Alt + F3 ، يتم تشغيل المؤشر المتعدد. التحول التالي + المنزل ، CTRL + C ، CTRL + A ، CTRL + V. و هكذا. من الممكن بمساعدة Excel ، لمن هو أكثر دراية.

على سبيل المثال ، يبدو السهم الأيسر هكذا في ملف svg:

 <glyph unicode="&#xe92b;" 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" /> 

بعد محو النص ، نحصل على محتويات حقل الحروف الرسومية وحقول يونيكود:

 {"arrow-left", '\ue92b'} 

وإضافة iconCodeDict إلى القاموس