Kivy। Xamarin। प्रतिक्रियाशील मूलनिवासी। तीन चौखटे - एक प्रयोग (भाग 2)

यह एक श्रृंखला का दूसरा लेख है जहां हम कीवी, ज़ैमरीन की तुलना करते हैं। विचार, और प्रतिक्रिया मूल। इसमें, मैं उसी कार्य शेड्यूलर को लिखने की कोशिश करूंगा, लेकिन Xamarin.Forms का उपयोग करके। मैं देखूंगा कि मैं इसे कैसे करता हूं, और मुझे क्या करना है।

मैं टीके को नहीं दोहराऊंगा; इसे पहले लेख में देखा जा सकता है: किवी। Xamarin। प्रतिक्रियाशील मूलनिवासी। तीन चौखटे - एक प्रयोग

तीसरा भाग रिएक्टिव नेटिव: किवी के बारे में है । Xamarin। प्रतिक्रियाशील मूलनिवासी। तीन रूपरेखाएँ - एक प्रयोग (भाग 3)

शुरू करने के लिए, मैं Xamarin.Forms प्लेटफॉर्म के बारे में कुछ शब्द कहूंगा और मैं कार्य के समाधान के बारे में बताऊंगा। Xamarin.Forms Xamarin.iOs और Xamarin.Android के लिए एक ऐड-ऑन है। असेंबली के बाद, सामान्य देशी मानक नियंत्रण के लिए "तैनात" किया जाता है, इसलिए संक्षेप में आपको सभी समर्थित प्लेटफार्मों के लिए पूरी तरह से देशी अनुप्रयोग मिलते हैं।

Xamarin.Forms का सिंटैक्स WPF के सिंटैक्स के बहुत करीब है, और सामान्य भाग .NET मानक में लिखा गया है। नतीजतन, आपको एप्लिकेशन विकसित करते समय MVVM दृष्टिकोण का उपयोग करने का अवसर मिलता है, साथ ही .NET मानक के लिए और पहले से ही NuGet में लिखे गए तीसरे पक्ष के पुस्तकालयों की एक बड़ी संख्या तक पहुंच होती है, जिसे आप अपने Xamarin.For एप्लिकेशन में सुरक्षित रूप से उपयोग कर सकते हैं।

यहाँ आवेदन के लिए सोर्स कोड GitHub पर उपलब्ध है ।

तो, चलो एक खाली Xamarin.Forms एप्लिकेशन बनाएं और आरंभ करें। हमारे पास एक सरल डेटा मॉडल होगा, जिसमें केवल दो नोट और प्रोजेक्ट वर्ग होंगे:

public class Note { public string UserIconPath { get; set; } public string UserName { get; set; } public DateTime EditTime { get; set; } public string Text { get; set; } } public class Project { public string Name { get; set; } public ObservableCollection<Note> Notes { get; set; } public Project() { Notes = new ObservableCollection<Note>(); } } 

मैं MVVM दृष्टिकोण का पालन करने की कोशिश करूंगा, लेकिन मैं किसी विशेष पुस्तकालय का उपयोग नहीं करूंगा, ताकि कोड को जटिल न किया जाए। सभी मॉडल कक्षाएं और दृश्य मॉडल INotifyPropertyChanged इंटरफ़ेस को लागू करेंगे। मैं संक्षिप्तता के लिए दिए गए कोड उदाहरणों में इसके कार्यान्वयन को हटा दूंगा।

हमारे पास जो पहली स्क्रीन होगी, उसमें एक नया बनाने या वर्तमान को हटाने की क्षमता वाली परियोजनाओं की एक सूची होगी। चलो उसके लिए एक मॉडल बनाते हैं:

 public class MainViewModel { public ObservableCollection<Project> Projects { get; set; } public MainViewModel() { Projects = Project.GetTestProjects(); } public void AddNewProject(string name) { Project project = new Project() { Name = name }; Projects.Add(project); } public void DeleteProject(Project project) { Projects.Remove(project); } } 

स्क्रीन कोड ही:

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TodoList.View" x:Class="TodoList.View.ProjectsPage"> <ContentPage.ToolbarItems> <ToolbarItem Clicked="AddNew_Clicked" Icon="plus.png"/> </ContentPage.ToolbarItems> <ListView ItemsSource="{Binding Projects}" ItemTapped="List_ItemTapped"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding Name}" TextColor="Black"> <TextCell.ContextActions> <MenuItem Clicked="DeleteItem_Clicked" IsDestructive="true" CommandParameter="{Binding .}" Text="Delete"/> </TextCell.ContextActions> </TextCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> 

मार्कअप काफी सरल निकला, केवल एक चीज जिस पर मैं ध्यान देना चाहता हूं वह है परियोजनाओं को हटाने के लिए स्वाइप बटन का कार्यान्वयन। ListView में ContextActions की अवधारणा है, यदि आप इसे सेट करते हैं, तो iOS में उन्हें ज़ोर से मारना होगा, Android में - एक लंबे टैप के माध्यम से। यह दृष्टिकोण Xamarin.Forms में लागू किया गया है, क्योंकि यह प्रत्येक प्लेटफॉर्म के लिए मूल है। हालाँकि, अगर हम Android में स्वाइप करना चाहते हैं, तो हमें इसे एंड्रॉइड के मूल भाग में अपने हाथों से लागू करना होगा। मुझे इस पर बहुत समय बिताने का कोई काम नहीं है, इसलिए मैं मानक दृष्टिकोण से संतुष्ट था :) नतीजतन, आईओएस में स्वाइप और एंड्रॉइड में संदर्भ मेनू को काफी सरलता से लागू किया गया है:

 <TextCell.ContextActions> <MenuItem Clicked="DeleteItem_Clicked" IsDestructive="true" CommandParameter="{Binding .}" Text="Delete"/> </TextCell.ContextActions> 

परीक्षण डेटा को प्रतिस्थापित करते हुए, हमें निम्न सूची मिलती है:



अब आइए घटना हैंडलर पर चलते हैं। चलो एक सरल से शुरू करते हैं - एक परियोजना को हटा दें:

 MainViewModel ViewModel { get { return BindingContext as MainViewModel; } } async Task DeleteItem_Clicked(object sender, EventArgs e) { MenuItem menuItem = sender as MenuItem; if (menuItem == null) return; Project project = menuItem.CommandParameter as Project; if (project == null) return; bool answer = await DisplayAlert("Are you sure?", string.Format("Would you like to remove the {0} project", project.Name), "Yes", "No"); if(answer) ViewModel.DeleteProject(project); } 

उपयोगकर्ता से पूछे बिना कुछ को हटाना अच्छा नहीं है, और Xamarin.Forms में मानक DisplayAlert पद्धति का उपयोग करके ऐसा करना आसान है। इसे कॉल करने के बाद, निम्न विंडो दिखाई देगी:



यह विंडो iOs की है। एंड्रॉइड का एक समान विंडो का अपना संस्करण होगा।

अगला हम एक नई परियोजना के अलावा लागू करेंगे। ऐसा लगता है कि यह सादृश्य द्वारा किया जाता है, लेकिन Xamarin.Forms में मेरे द्वारा हटाए गए पुष्टि के समान संवाद का कार्यान्वयन नहीं है, लेकिन आपको पाठ दर्ज करने की अनुमति देता है। दो संभावित उपाय हैं:

• अपनी स्वयं की सेवा लिखें जो मूल संवाद बढ़ाएगी;
• Xamarin.Forms के पक्ष में किसी प्रकार का वर्कअराउंड लागू करें।

मैं मूल निवासी के माध्यम से संवाद बढ़ाने में समय बर्बाद नहीं करना चाहता था, और मैंने दूसरे दृष्टिकोण का उपयोग करने का निर्णय लिया, जिसके कार्यान्वयन को मैंने धागे से लिया था: एक सरल इनपुटबॉक्स संवाद कैसे करें? , अर्थात् टास्क इनपुटबॉक्स (इनवीगेशन नेविगेशन) विधि।

 async Task AddNew_Clicked(object sender, EventArgs e) { string result = await InputBox(this.Navigation); if (result == null) return; ViewModel.AddNewProject(result); } 

अब हम परियोजना को खोलने के लिए पंक्ति द्वारा टैप की प्रक्रिया करेंगे:

 void List_ItemTapped(object sender, Xamarin.Forms.ItemTappedEventArgs e) { Project project = e.Item as Project; if (project == null) return; this.Navigation.PushAsync(new NotesPage() { BindingContext = new ProjectViewModel(project) }); } 

जैसा कि आप ऊपर दिए गए कोड से देख सकते हैं, प्रोजेक्ट विंडो पर जाने के लिए, हमें इसके व्यू मॉडल और विंडो के पेज ऑब्जेक्ट की आवश्यकता है।

मैं नेविगेशन के बारे में कुछ शब्द कहना चाहूंगा। नेविगेशन प्रॉपर्टी को विज़ुअलाइमेंट क्लास में परिभाषित किया गया है, और आपको अपने हाथों से इसे रोल करने के बिना अपने आवेदन के किसी भी दृश्य में नेविगेशन पैनल के साथ काम करने की अनुमति देता है। हालांकि, काम करने के लिए इस दृष्टिकोण के लिए, आपको अभी भी इस पैनल को स्वयं बनाने की आवश्यकता है। इसलिए, App.xaml.cs में हम लिखते हैं:

 NavigationPage navigation = new NavigationPage(); navigation.PushAsync(new View.ProjectsPage() { BindingContext = new MainViewModel() }); MainPage = navigation; 

जहां प्रोजेक्ट्सपेज बिल्कुल खिड़की है जिसका मैं अब वर्णन कर रहा हूं।

नोटों के साथ खिड़की परियोजनाओं के साथ खिड़की के समान है, इसलिए मैं इसे विस्तार से वर्णन नहीं करूंगा, मैं केवल दिलचस्प बारीकियों पर ध्यान केंद्रित करूंगा।

इस विंडो का लेआउट अधिक जटिल निकला, क्योंकि प्रत्येक पंक्ति को अधिक जानकारी प्रदर्शित करनी चाहिए:


विंडो की सामग्री में, हमारे पास फिर से एक सूची दृश्य है, जो नोटों के संग्रह से जुड़ा हुआ है। हालाँकि, हम सामग्री में कोशिकाओं की ऊँचाई चाहते हैं, लेकिन 150 से अधिक नहीं है, इसके लिए हमने HasUnevenRows = "True" सेट किया है ताकि ListView कोशिकाओं को उतनी जगह ले सके, जितना वे पूछते हैं। लेकिन इस स्थिति में, पंक्तियाँ 150 से अधिक की ऊँचाई का अनुरोध कर सकती हैं और सूची दृश्य उन्हें इस तरह प्रदर्शित करने की अनुमति देगा। सेल में इससे बचने के लिए, मैंने अपने वारिस को ग्रिड पैनल: MyCellGrid का उपयोग किया। माप ऑपरेशन पर यह पैनल आंतरिक तत्वों की ऊंचाई का अनुरोध करता है और इसे 150 से अधिक होने पर वापस कर देता है:

 public class MyCellGrid : Grid { protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint) { SizeRequest sizeRequest = base.OnMeasure(widthConstraint, heightConstraint); if (sizeRequest.Request.Height <= 150) return sizeRequest; return new SizeRequest(new Size() { Width = sizeRequest.Request.Width, Height = 150 }); } } 

चूंकि टीओआर के अनुसार हमें टैप और स्वाइप के अलावा एडिट और डिलीट करने में सक्षम होना चाहिए, साथ ही लाइन के कोने में बटन पर क्लिक करके खुलने वाला मेनू भी, हम इस बटन को सेल टेम्प्लेट में जोड़ देंगे और उस पर टैप की सदस्यता लेंगे। इस मामले में, यदि उपयोगकर्ता बटन पर क्लिक करता है, तो यह इशारे को स्वीकार करता है और हम लाइन पर क्लिक करने की घटनाओं को प्राप्त नहीं करेंगे।

 <Button Grid.Row="0" Grid.Column="2" BackgroundColor="Transparent" Image="menu.png" Margin="5" HorizontalOptions="FillAndExpand" Clicked="RowMenu_Clicked"/> 

परीक्षण डेटा के साथ, हमारा फॉर्म इस तरह दिखता है:



इस रूप में उपयोगकर्ता क्रियाओं को संसाधित करना पूरी तरह से उसी के अनुरूप है जो परियोजना सूची विंडो के लिए लिखा गया था। मैं लाइन के कोने में हमारे बटन द्वारा केवल संदर्भ मेनू पर रोकना चाहता हूं। सबसे पहले, मैंने सोचा था कि मैं इसे Xamarin पर करूंगा। बिना किसी समस्या के।

दरअसल, हमें बस कुछ इस तरह का दृश्य बनाने की जरूरत है:

 <StackLayout> <Button Text=”Edit”/> <Button Text=”Delete”/> </StackLayout> 

और इसे बटन के बगल में दिखाएं। हालाँकि, समस्या यह है कि हम बिल्कुल नहीं जान सकते कि यह "बटन के बगल में" कहाँ है। यह संदर्भ मेनू सूची दृश्य के शीर्ष पर स्थित होना चाहिए और, जब खोला जाता है, तो खिड़की के निर्देशांक में तैनात किया जाता है। ऐसा करने के लिए, आपको विंडो के सापेक्ष दबाए गए बटन के निर्देशांक को जानना होगा। हम बटन के निर्देशांक केवल सूची में स्थित आंतरिक स्क्रॉल दृश्य के सापेक्ष प्राप्त कर सकते हैं। इसलिए जब लाइनों को स्थानांतरित नहीं किया जाता है, तो सब कुछ ठीक है, लेकिन जब लाइनों को स्क्रॉल किया जाता है, तो हमें यह ध्यान रखना चाहिए कि निर्देशांक की गणना करते समय कितना स्क्रॉल हुआ। ListView हमें स्क्रॉल मान नहीं देता है। इसलिए इसे मूल निवासी से बाहर निकालना चाहिए, जो मैं वास्तव में नहीं करना चाहता था। इसलिए, मैंने एक अधिक मानक और सरल एक के लिए रास्ता लेने का फैसला किया: मानक सिस्टम संदर्भ मेनू दिखाएं। परिणामस्वरूप, बटन क्लिक हैंडलर निम्नलिखित को बंद कर देगा:

 async Task RowMenu_Clicked(object sender, System.EventArgs e) { string action = await DisplayActionSheet("Note action:", "Cancel", null, "Edit", "Delete"); if (action == null) return; BindableObject bindableSender = sender as BindableObject; if(bindableSender != null) { Note note = bindableSender.BindingContext as Note; if (action == "Edit") { EditNote(note); } else if(action == "Delete") { await DeleteNote(note); } } } 

DisplayActionSheet विधि को कॉल करना नियमित संदर्भ मेनू दिखाता है:



यदि आप ध्यान दें, तो नोट का पाठ मेरे MyLabel नियंत्रण में प्रदर्शित होता है, और नियमित लेबल में नहीं। यह किस लिए किया जाता है। जब उपयोगकर्ता नोट के पाठ को बदलता है, तो बाइंडरों को ट्रिगर किया जाता है, और नया पाठ स्वचालित रूप से लेबल में आता है। हालांकि, Xamarin.Forms एक ही समय में सेल आकार को पुनर्गणना नहीं करता है। Xamarin डेवलपर्स का दावा है कि यह काफी महंगा ऑपरेशन है। हां, और ListView के पास खुद कोई ऐसा तरीका नहीं है जो इसे इसके आकार के बारे में बताए, InvalidateLayout भी मदद नहीं करता है। इसके लिए उनके पास एक ही चीज़ है सेल ऑब्जेक्ट का ForceUpdateSize तरीका। इसलिए, इसे प्राप्त करने के लिए और सही समय पर हां करने के लिए, मैंने अपना लेबल वारिस लिखा और मैं इस विधि को हर पाठ के लिए खींचता हूं:

 public class MyLabel : Label { protected override void OnPropertyChanged([CallerMemberName] string propertyName = null) { base.OnPropertyChanged(propertyName); if (propertyName == "Text") { ((this.Parent as MyCellGrid).Parent as Cell).ForceUpdateSize(); } } } 

एक नोट को संपादित करने के बाद, ListView नए पाठ को फिट करने के लिए सेल आकार को स्वचालित रूप से समायोजित करेगा।

नया नोट संपादित करते या बनाते समय, सामग्री में संपादक और टूलबार पर सेव बटन के साथ एक विंडो खुलती है:



यह विंडो टीके में हमारे द्वारा थोड़े अलग से है: सबसे नीचे एक गोल बटन की कमी है। यदि आप इसे बस संपादक के शीर्ष पर रखते हैं, तो इसे छोड़ने वाले कीबोर्ड द्वारा अवरुद्ध कर दिया जाएगा। उसी समय, मुझे एक सुंदर समाधान नहीं मिला कि इसे कैसे स्थानांतरित किया जाए और त्वरित खोज के साथ मूल में न जाएं। इसलिए, मैंने इसे हटा दिया और शीर्ष पैनल में केवल सहेजें बटन छोड़ दिया। यह विंडो अपने आप में बहुत सरल है, इसलिए मैं इसके विवरण को छोड़ दूंगा।

अंत में मैं जो कहना चाहता हूं।

Xamarin.Forms उन लोगों के लिए अच्छी तरह से अनुकूल है जो .NET बुनियादी ढांचे से परिचित हैं और लंबे समय से इसके साथ काम कर रहे हैं। उन्हें नए आईडीई और ढांचे में अपग्रेड नहीं करना पड़ेगा। जैसा कि आप देख सकते हैं, एप्लिकेशन कोड किसी अन्य XAML आधारित एप्लिकेशन के कोड से बहुत अलग नहीं है। इसके अलावा, ज़ामरीन आपको विंडोज़ के लिए विजुअल स्टूडियो में iOS एप्लिकेशन विकसित करने और बनाने की अनुमति देता है। परीक्षण और इसे बनाने के लिए अंतिम आवेदन को विकसित करते समय, आपको मैकओएस मशीन से कनेक्ट करना होगा। और इसके बिना पुस्तकालय किए जा सकते हैं।

Xamarin.Forms पर एप्लिकेशन लिखना शुरू करने के लिए, आपको कंसोल के साथ किसी भी लाल-आंखों की आवश्यकता नहीं है। बस विजुअल स्टूडियो स्थापित करें और एप्लिकेशन लिखें। बाकी सब कुछ पहले से ही आपके लिए ध्यान रखा गया है। उसी समय, कोई फर्क नहीं पड़ता कि Microsoft भुगतान किए गए उत्पादों के साथ जुड़ा हुआ है, Xamarin मुफ़्त है और विज़ुअल स्टूडियो के मुफ्त संस्करण हैं।

तथ्य यह है कि Xamarin.Forms हुड के तहत .NET मानक का उपयोग करता है, आपको पहले से लिखे गए पुस्तकालयों के एक समूह तक पहुंच प्रदान करता है जो आपके अनुप्रयोगों को विकसित करते समय जीवन को आसान बना देगा।

Xamarin.Forms आपको आसानी से अपने एप्लिकेशन के मूल भागों में कुछ जोड़ने की अनुमति देता है, यदि आप कुछ प्लेटफ़ॉर्म-विशिष्ट लागू करना चाहते हैं। वहां आपको समान C # मिलता है, लेकिन API प्रत्येक प्लेटफॉर्म का मूल निवासी है।

हालांकि, निश्चित रूप से, कुछ कमियां थीं।

सामान्य भाग में उपलब्ध एपीआई, बल्कि अल्प होता है, क्योंकि इसमें केवल वही होता है जो सभी प्लेटफार्मों के लिए सामान्य है। उदाहरण के लिए, जैसा कि मेरे उदाहरण में देखा जा सकता है, सभी प्लेटफार्मों में सतर्क संदेश और संदर्भ मेनू होते हैं, और यह बात Xamarin.Forms में उपलब्ध है। हालांकि, मानक मेनू जो आपको पाठ दर्ज करने की अनुमति देता है वह केवल iOS में उपलब्ध है, इसलिए Xamarin.Forms में यह नहीं है।

घटकों के उपयोग में समान प्रतिबंध पाए जाते हैं। कुछ किया जा सकता है, कुछ असंभव है। किसी प्रोजेक्ट या नोट को हटाने के लिए वही स्वाइप केवल iOS में काम करता है। एंड्रॉइड में, यह संदर्भ कार्रवाई एक मेनू के रूप में प्रस्तुत की जाएगी जो एक लंबे टैप पर दिखाई देती है। और अगर आप एंड्रॉइड में स्वाइप करना चाहते हैं, तो एंड्रॉइड भाग में आपका स्वागत है और इसे अपने हाथों से लिखें।

और हां, प्रदर्शन। Xamarin.Forms पर आवेदन की गति किसी भी मामले में मूल आवेदन की गति से कम होगी। तो Microsoft स्वयं कहता है कि यदि आपको डिज़ाइन और प्रदर्शन आवश्यकताओं के संदर्भ में बिना किसी तामझाम के एक आवेदन की आवश्यकता है, तो Xamarin.Forms आपके लिए है। यदि आपको सावधानी या गति की आवश्यकता है, तो आपको पहले से ही मूल के नीचे जाना चाहिए। सौभाग्य से, ज़ामरीन के मूल संस्करण भी हैं जो पहले से ही अपने मूल प्लेटफ़ॉर्म एपीआई के साथ तुरंत काम करते हैं और रूपों की तुलना में तेजी से काम करते हैं।