Xamarin.Forms - अनुप्रयोग में आइकन फोंट का सुविधाजनक उपयोग

समस्या का बयान

आप विभिन्न स्वरूपों में छवियों का उपयोग कर सकते हैं, उदाहरण के लिए png, svg या ttf फोंट, Xamarin.Forman एप्लिकेशन में आइकन प्रदर्शित करने के लिए। अक्सर, आइकन के साथ एक फ़ॉन्ट मानक आइकन जोड़ने के लिए सुविधाजनक होता है, उदाहरण के लिए Google सामग्री आइकन। आइकन के साथ फ़ॉन्ट का आकार लगभग 200K है और प्रयोज्य आमतौर पर अनुप्रयोग के आकार पर सहेजने से अधिक महत्वपूर्ण है। आइकन किसी भी स्क्रीन रिज़ॉल्यूशन पर अच्छे दिखेंगे और काले और सफेद होंगे।

आइकन का उपयोग करने के लिए तैयार किए गए नगेट पैकेज हैं। मैंने एक लंबे समय के लिए आइकनिज़ का इस्तेमाल किया (nuget - www.nuget.org/packages/Xam.Plug.P.Iconize ; git - github.com/jsmarcus/Iconize )। यह आपको दस से अधिक फोंट कनेक्ट करने की अनुमति देता है, नए नियंत्रण जोड़ता है, जैसे कि आइकनबटन, आईकैमेज, आईकॉनबेल, आदि। लेकिन यहां तैयार पुस्तकालयों के खिलाफ सामान्य तर्क हैं: अतिरिक्त कार्यक्षमता, अतिरिक्त फ़ाइल आकार, व्यवहार, बग आदि से पूरी तरह से संतुष्ट नहीं। इसलिए, कुछ बिंदु पर मैंने तैयार लाइब्रेरी को छोड़ने का फैसला किया और इसे कक्षाओं की एक जोड़ी से एक साधारण बाइक के साथ बदल दिया + फ़ॉन्ट।

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" जैसी किसी चीज़ का उपयोग करना चाहूंगा, जैसा कि iconize में है

3. यदि एप्लिकेशन एंड्रॉइड और आईओएस पर चलेगा, तो आपको फ़ॉन्ट का नाम अलग-अलग लिखना होगा - Android में "MaterialIcons-Regular.ttf # MaterialIcons-Regular" और iOS में "MaterialIcons-Regular"।

यहाँ वर्णित समाधान को लेबल नियंत्रण पर TextChanged घटना की आवश्यकता है। इस समस्या को सूची में जोड़ें:

4. लेबल नियंत्रण में TextChanged इवेंट नहीं है। हमें लेबल पाठ परिवर्तनों को ट्रैक करने और xaml में बाइंडिंग का उपयोग करने की आवश्यकता है

निर्णय

उदाहरण के लिए, फ़ॉन्ट Google सामग्री आइकन लें। सबसे पहले, इसे Android और iOS प्रोजेक्ट्स में जोड़ें।
यहाँ फ़ॉन्ट डाउनलोड करें
प्रतीक यहां खोजते हैं

फ़ॉन्ट फ़ाइल डाउनलोड करें - MaterialIcons-Regular.ttf।

एंड्रॉयड:
Assets फ़ोल्डर में MaterialIcons-Regular.ttf जोड़ें और इसके लिए "बिल्ड एक्शन" AndroidAsset चुनें।

iOS:
संसाधन \ फ़ॉन्ट्स फ़ोल्डर में MaterialIcons-Regular.ttf जोड़ें और इसके लिए "बिल्ड एक्शन" बंडल का चयन करें। फिर 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-freeamentals/behaviors/ ) पर करेंगे।

ऐसा करने के लिए, GoogleMaterialFontBehavior वर्ग बनाएं:

 public class GoogleMaterialFontBehavior: BehaviorBase<CustomLabel> { } 

हमारा व्यवहार लेबल पाठ को बदलने के लिए प्रतिक्रिया देगा, इसलिए लेबल को भी अंतिम रूप देना होगा:

 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
• फ़ॉन्ट नाम फ़ॉन्ट जोड़ें
• और चरित्र कोड 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/codepoint

उदाहरण का उपयोग करें

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> 

C #:

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

इसके साथ ही

मुझे वास्तव में फॉन्ट जैम आइकन भी पसंद हैं। GoogleMaterialFontBehavior के समान, इसके लिए एक JamFontBehavior क्लास बनाएं। इसमें अन्य लोग होंगे: fontFamily और iconCodeDict।

यहाँ फ़ॉन्ट डाउनलोड करें: https://github.com/michaelampr/jam/blob/master/fonts/jam-icons.ttf
यहाँ खोज करने के लिए प्रतीक: https://jam-icons.com/

बहुत सुविधाजनक खोज इंजन। आइकन ढूंढें, उस पर क्लिक करें और क्लिपबोर्ड पर नाम। यह केवल इसे कोड में सम्मिलित करने के लिए रहता है।

एल्गोरिथ्म गूगल आइकन के समान है, आइकन कोड को छोड़कर।

कोड उसी स्थान पर स्थित svg फ़ाइल से लिया जाना चाहिए।

उदात्त जैसे पाठ संपादक का उपयोग करके डेटा आसानी से निकाला जा सकता है। लाइन "डेटा-टैग" चुनें, Alt + F3 दबाएं, बहु-कर्सर चालू है। अगली शिफ्ट + होम, ctrl + c, ctrl + a, ctrl + v। और इसी तरह। यह एक्सेल की मदद से संभव है, किससे अधिक परिचित है।

उदाहरण के लिए, बाएं तीर 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'} 

और शब्दकोश में आइकनकोड जोड़ें