Introduction:
Fast and Furious Image Loading (or FFImageLoading) in my opinion—and many others—is a must have in most Xamarin applications. If your application deals with a lot of images, it’s crucial to have this awesome library.
FFImageLoading supports a wide range of Platforms: Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac / Xamarin.Tizen, and Windows (UWP, WinRT).
Features
FFImageLoading has tons of features (as listed below), but today we are just gonna cover caching images in Xamarin.Forms. If you’re curious about the available features here’s a pretty comprehensive list:
- Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac, Xamarin.Tizen and Windows (WinRT, UWP) support
- Configurable disk and memory caching
- Multiple image views using the same image source (URL, path, resource) will use only one bitmap, which is cached in memory (less memory usage)
- Deduplication of similar download/load requests. (If 100 similar requests arrive at the same time, then one real loading will be performed while 99 others will wait).
- Error and loading placeholders support
- Images can be automatically downsampled to a specified size (less memory usage)
- Fluent API inspired by Picasso naming
- SVG / WebP / GIF support
- Image loading Fade-In animations support
- Can retry image downloads (RetryCount, RetryDelay)
- Android bitmap optimization—saves 50% of memory by trying not to use transparency channel when possible.
- Transformations support
- BlurredTransformation
- CircleTransformation, RoundedTransformation, CornersTransformation, CropTransformation
- ColorSpaceTransformation, GrayscaleTransformation, SepiaTransformation, TintTransformation
- FlipTransformation, RotateTransformation
- Supports custom transformations (native platform ITransformation implementations)
Overview:
Almost every application uses images for one reason or another, and using FFImageLoading makes it easier for you to cache, download, and use these images in an optimized manner. Let’s work through an example.
Installing the NuGet:
In your Xamarin.Forms application, right click on your solution to add the following package. Search for Xamarin.FFImageLoading.Forms and install it in all your projects:
Initialize the FFImageLoading library:
In your Android MainActivity’s OnCreate method, add the following line of code before calling the LoadApplication method.
In your iOS AppDelegate’s FinishedLaunching method, add the following line of code before the load application method is called.
In your UWP MainPage’s Constructor, Add the following line of code after the InitializeComponent(); method before the load application is called.
Using the FFImageLoading Cached Image
Like any other custom control or library, you need to add the FFImageLoading’s namespace into the XAML:
Once you have added the namespace, you can use the control, as shown below:
<ffimageloading:CachedImage
Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTQaaGxVT4EB_BgS8BGOhc4PVrQ2nBmz-48qMq4EzFPSrJnIMg"
LoadingPlaceholder= "LoaderImage
ErrorPlaceholder= "ErrorImage
CacheDuration= "50"
RetryCount= "3"
RetryDelay= "600"
DownsampleToViewSize = "true"
/>And Voila! The cached image is now ready to show.
Important API’s
There are a bunch of important API’s that FFImageLoading has to offer, and all of them are documented in their GitHub repo.
I will go through the ones that I have used above, and the ones that are especially relevant:
- CacheDuration: Defines the timespan that our image will be cached on the device. Gets/Sets a TimeSpan value. Has 90 days as the default value.
- RetryCount: Defines the number of retries that will be done, if the loading of the image fails. Gets/Sets an Integer value. Has 3 as the default value.
- RetryDelay: Defines the delay that will be applied for the RetryCount to be triggered. Gets/Sets an Integer value. Has 250 as the default value.
- LoadingPlaceHolder: The image that will display while our image source is loading.
- ErrorPlaceHolder: The image displayed when an error occurs.
- DownsampleToViewSize: Defines if the component should resize the image according to the view size. Gets/Sets a bool value. Has false as the default value.
Summary
This blog described how to use FFImageLoading with Xamarin.Forms applications. I will be covering more about FFImageLoading in the near future so stay tuned for more :D.
If I’ve missed something, go ahead and add it in the comments. I’ll make sure to add any needed changes to the post. Also, if you find something incorrect in the blog, please go ahead and correct me in the comments.
Smash that clap button if you liked this post.
You can reach out to me on LinkedIn or StackOverflow! I am always available! 😛
Comments 0 Responses