Netflix app with CollectionView

[ionixjunior]

I always wished make a screen similar the Netflix or Google Play with Xamarin.Forms, but at moment is not simple make horizontal lists with great performance. However with CollectionView this can be possible.

This is not an existing app that I created. This sample is only for test CollectionView, so don't exists mine implementation with ListView component.

Screenshots

iOS

Android Not yet. The sample failed. Many images don't load.

What went well?

CollectionView is very simple to use. A few minutes reading the docs and I created this sample. The most difficult was prepare data to show. Initially I tried create a grouped collection view but I quickly discover that dont exists support yet.

What didn't go well?

Load images

In Android app some images not was loaded no way. In the iOS was not loaded in the first time, but if wait a few seconds, close app and open it again, the images appears normally. The images are loaded by links. I tried replace this links to a local image reference and in the first time when app opens the images are shown normally (only in iOS). With ListView this problem not occurs.

CollectionView height

I know, what I did was not ok, but when I added many CollectionViews in the page, each collection filled the entire screen. So in the small movie covers existed a big black area, the next collection view was not near. To solve this I put the same Height property of movie inside Height property of CollectionView. I guess this was bad, but solved the problem at moment.

CollectionView item width

In my sample, some CollectionViews exists only one member. In this cases I needed an workaround to do things works. Some movie covers should appear entirely in the container, without scroll. To correct adapt the content width I manually set WidthRequest in constructor of ContentView to add Width of the MainPage. This is a problem when I rotate device, because the image is not resize automatically. I know this sounds weird and my sample is unusual, but this was a problem I had.

How is the performance?

Is hard to tell about performance at moment. I executed my tests in emulators, not in real devices. I need test the sample using profiler to know more information, but my sample is unusual because I created many CollectionViews in the same page.

Missing or Desired Things:

Add support to grouped collections

In this sample I create an ItemSource property in StackLayout provided by BindableLayout to iterate over movie groups. In each movie group I created the CollectionView. This works fine, but I guess that existing many resources used unduly. I guess I read in roadmap that support to grouped collections will not be part of this first step. When this will be implemented this sample will get a better and some workarounds are gone. Anyway the results that I see is cool.