Geekly Articles each Day
⬆️ ⬇️

Preparing Xamarin.Forms: Setting Up the Environment and First Steps





Friends! We continue the column on the development of mobile applications on Xamarin. AND

after a short break, we are ready to return to considering the features of using Xamarin.Forms in developing business applications for iOS and Android. All articles from the column can be found and read on the link #xamarincolumn


In today's article we will look at the issues of application performance and optimization of the development process itself.



Correct bees



In a wonderful fairy tale about Winnie the Pooh, the bees were divided into right and wrong. Similarly, the environments in which applications will be developed can be conditionally divided into right and wrong.

')

We begin with the computers on which the development will take place.



In our practice, we use Windows 10 and Visual Studio 2015 as the main medium, so we are faced with the fact that building applications (primarily Android) takes an inadmissibly long time.



We began to find out what was going on here and revealed several bottlenecks that slow down development:



Especially advanced, we can recommend the use of RAM as a section for storing projects and the system Temp folder — for this you need to use one of the RAM Disk class programs. Accurate measurements were not made using SSD + RAM Disk, but the difference is enormous.



So, we consider that we dealt with the right environment.



XAML - evil or good



One of the important mechanisms of Xamarin.Forms is the ability to use XAML (based on XML) to describe the user interface.



In our opinion, this is a good solution from the point of view of production technology, since the separation of logic from the interface description takes place and UI development itself becomes very similar to HTML layout, even control styles can be set in the same place as with CSS (literacy by styles by reference ), including minor tuning for different platforms (Device.OnPlatform).



Everything would be great if it were not for one big “BUT”, which is typical for Xamarin.Forms version 1.x - XAML files were interpreted on the fly, including creating all the necessary controls and placing them on the screen. Because of this, each opening of a new window with a complex layout took longer than desired.



In version 2.0, this deficiency was eliminated by implementing a preliminary compilation of XAML. You can use it for individual pages and View on XAML, and for the entire project as a whole.



Enable compilation of a separate XAML page (MainPage.xaml.cs file, for example)





using Xamarin.Forms.Xaml; ... [XamlCompilation (XamlCompilationOptions.Compile)] public class MainPage : ContentPage { ... }




Activate the compilation for the whole project - add a new line to the end of the Properties / AssemblyInfo.cs file in the PCL project:





 ... [assembly: XamlCompilation(XamlCompilationOptions.Compile)]




However, in some cases, especially when implementing cells for ListView, it may be more efficient to describe the layout for ViewCell / View / Page with your hands in C # code or go down to the iOS / Android level .





But we’ll go back to ListView.





Pictures, icons and performance



The first thing that novice Xamarin.Forms developers face is sticking when scrolling in lists based on ListView. What a sin to conceal, this is one of the painful places of the platform, casting a shadow on the rest of the functionality, since the lists are used in large quantities and in almost all applications.



To begin, we will look at working with images, since very often this is one of the reasons for sticking.



The standard component for displaying Image is good, it even supports caching, but it is of little use when used in real projects. When we came up against the limitations of Image a year ago, we had to make our own simple image cache with automatic scaling - a smaller version was transferred to the cell, since lists with large images simply died (this is not a Xamarin.Forms problem, but any application development, but on Xamarin.Forms it was very sharp).



Then we tried several different libraries and eventually settled on an excellent component called FFImageLoading .







It is available in Nuget () and allows you to solve several problems at once:





This is how to use the component when developing on XAML:





 <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Sample.Pages.MainPage" xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" Title="FFImageLoading Demo"> <ContentPage.Content> <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="300" HeightRequest="300" DownsampleToViewSize="true" Source = "https://unsplash.it/600/600/?random" LoadingPlaceholder = "placeholder.png"> </ffimageloading:CachedImage> </ContentPage.Content> </ContentPage>


This is how you can further improve the performance of FFImageLoading (AppDelegate.cs class for iOS and MainActivity.cs for Android):





 var config = new Configuration { HttpClient = new HttpClient(new ModernHttpClient.NativeMessageHandler()), //     FadeAnimationDuration = 250, //   }; FFImageLoading.ImageService.Instance.Initialize(config);


We work with lists in Xamarin.Forms



Using FFImagemageLoading, we optimized the display of images in lists and now we can proceed to the next step.



The first recommendation concerns the ListView mechanisms. In earlier versions of Xamarin.Forms, the mechanism of re-use of created cells was not supported, which led to the creation of ViewCell instances each time they were needed to display - this was the first serious reason for sticking during scrolling.



In the latest versions of Xamarin.Forms, a reuse mechanism for the created cells is implemented, and to activate it, you must set the CachingStrategy property to ListViewCachingStrategy.RecycleElement.



Implementation in XAML:



 <ListView CachingStrategy="RecycleElement"> ... </ListView>


Implementation in C #:



 var listView = new ListView(ListViewCachingStrategy.RecycleElement);




After that, the created ViewCell instances begin to be reused and the necessary data models are simply connected to them (via Binding) as they are displayed.





Another interesting way suggested by my colleague Cyril - just stop loading and displaying pictures while scrolling through the list. This method is also recommended by the creators of FFImageLoading.



To do this, you need to make your own renderer for the ListView for each platform and override scrolling events.



Example for Android:



 _listView.ScrollStateChanged += (object sender, ScrollStateChangedEventArgs scrollArgs) => { switch (scrollArgs.ScrollState) { case ScrollState.Fling: ImageService.Instance.SetPauseWork(true); //      break; case ScrollState.Idle: ImageService.Instance.SetPauseWork(false); //    //           ShowMyImage(); break;</p> } };




If necessary, you can also create your own ViewCell implementations through the Custom Renderer mechanism for each platform - this approach may be relevant for complex cells with a large number of embedded controls.





Also, good results when working with large amounts of data and complex cells can be achieved using the native components UICollectionView (for iOS ) and RecyclerView (for Android ), but this solution can be recommended to advanced developers.



An example of using these classes is presented in the TwinTechs library - a must-see, as there are video clips with optimization results.



So, at the beginning of Xamarin.Forms development, you need to pay special attention to working with lists and approaches to improving performance . This will allow not to be distracted by these features in the subsequent development.





Conclusion



In our today's article we looked at the basic mechanisms for optimizing the working environment and the first steps towards developing business applications based on Xamarin.Forms.



In the next article, we will discuss the use of Font Awesome icon fonts, the Fody tool for shortening the code in ViewModel, and mechanisms for manually drawing its interface elements using the NControlView library.



Stay in touch and add your comments and questions!



About the authors





Vyacheslav Chernikov - head of development at Binwell . In the past, he was one of the Nokia Champion and Qt Certified Specialists, currently he is the Xamarin and Azure platform specialist. He came to the sphere of mobile in 2005, since 2008 he has been developing mobile applications: he started with Symbian, Maemo, Meego, Windows Mobile, then switched to iOS, Android and Windows Phone.



Other articles by the author:





useful links



Source: https://habr.com/ru/post/303630/

More articles:



All Articles