Xamarin.Forms ListView vs. CollectionView - Which to use and why!

all right everyone you did it you asked me the question so today we are going to break down list view versus collection view an epic battle to display lists of data in your xamarin forms apps so tune in [Music] hey everyone i'm james montemagno and i'm back for another xamarin 101 video today i'm literally taking your questions from our recent videos on the xamarin forms list view which is why aren't you just using the collection view because that's supposed to be the replacement for the list view so thanks to you everyone that reached out on my twitter and on youtube below on the recent videos i'll put them up over there and make sure of course you subscribe so you get notified every single time i put out a new video here on the channel now you asked in the comments and on twitter why exactly did i not just go right to the collection view because that's the evolution right that's the next step why even talk about the list view so today what i wanted to do is break down list view versus collection view when you would want to use either of them and how you can actually reuse a lot of your mvvm architecture and almost a lot of the data bindings you have already inside of them now i went to the list view and i said in the first video if you go back you can watch that was that the listview just kind of works it's a way to display a data in a list there are some really cool context actions for like long pressing and swiping built in pull the refresh is built in and to me um i grew up with the list view you know it was like the very first thing and it's sort of the same battle that i think ios developers have which is ui table view or ui collection view like what do you use and a lot of people just opt for the table view because it does a lot of really nice things but the collection view in xamarin forms is that evolution of the list view and in fact it adds tons of new features and capabilities inside of this control so you can really create stunning applications and all the things that you could do in the list view you can do in the collection view and more obviously which which makes a lot of sense so let's head over and get started all right so what i want to show you is that this is our app this is the one that we were building out we have our mvvmification of our list view and this is using groups so we actually have different coffee here blue bottle some different coffee down here we even have a button that says load more it can load more data and group them into this list okay so as we scroll down we see that there it's pretty snappy i can tap on one or long press on one get these favorite or delete icons if i tap on one get selected now if we look over in the code over here it's not too crazy we have a list view we're telling it to recycle elements we are have having grouping enabled pull to refresh is enabled we're not using any separator visibility at all just set to none so you don't see any separator in between the items then down over here we have the item template so some unique things on the list view itself is that it has context actions that's that long press or in ios it would be swipe off to the right and here i have a favorite and a delete for is destructive now below i just have a simple frame and that's what's displaying those items and i also have this header and footer over here now if we take a look at this application again here's our header coffee of the world this is our group header over here and in fact if you look i'm just have a data binding here you can customize these i'm just using the default ones out of the box but you can give it a template you can kind of put anything you want inside of it so it is relatively flexible now this is using this simple view model that we have over here and it has a few things inside of it like a collection of coffee grouped coffee has a refresh command so if i pull the refresh here it goes off hits the pull to refresh i've added a few other items inside of here so we have a selected coffee a favorite coffee a refresh a load more a delay load more and a clear we'll talk about what i have those here in a second but that is our list view i mean it displays data it looks pretty good it works pretty good i'm pretty happy with it but i also have a collection view version over here and you're probably saying wow james like that looks very similar yes it does look very similar and that's the point is that i wanted to show you that you can make the collection view look nearly identical to the list view now the collection view is optimized using the recyclerview and the ui collection view on ios and that means that you're probably going to get better performance because things are cached automatically out of the box not the gate right it's all there for you if i go over to this collection view xaml page what i want to show you is that it's actually not too crazy different from the list view so the first thing that we're going to note here in our code is that i have a refresh view now the collection view inherently does not have pool to refresh built in but the xamarin forms team added a refresh view many many releases ago and that allows you to control pull to refresh on just about anything that's scrollable so scroll view a list view a collection view so i wrapped a collection view here inside of a refresh view if i go back over here and pull to refresh i get the same exact functionality right here in fact i'm using the same commands the same as refreshing command and even can control that refresh color now i also want to show you that i have very very similar things to my list view in fact i copied and pasted this code from my list view into the collection view and i just change this to collectionview.header and collectionview.footer and when we come over here we can see coffee of the world and if i scroll down load more clear okay okay so a few things here one we're going to note that i have is grouped set to true so that's a nice one if we look at our list view over here is grouping enabled those are the same things the difference here is that while i do have the coffee groups as the items source i have to give it a group header template over here also it'll just give me a two string which may work okay but here i'm going to give it a specific data template and just define it here now the nice part about this is that just like list view you can customize it as well it works exactly the same so if you had a group header template from your list view you could bring it over so so far not too different except for you will notice here that there's a lot more properties on this collection view that i'll go into notice item source selected item they're the same here i'm going to tell you selection mode is single so if i tap on one the same data binding is working here like i said the data binding context here is exactly the same one nice thing is that there is multi-select you can set this to none or single or multi-selection and use the visual state manager to give different states when different items are selected now i am just going to go ahead and use single though but you can use a multiple so if you had a list of different items you can go ahead and put those in there that's the first big difference that you'll see all right now there's this other thing called empty view this is pretty neat actually here is you can give it a view to display when there's no items inside of the list so are the collection view here i had a clear button there it is if we scroll in here it says no coffee no coffee no coffee if i pull to refresh here it's gonna go reload the coffees from scratch and now it's gone so that's a nice view because you don't have to do anything special you just say here's an empty view and when the list is empty you're good to go we take a look at the documentation you'll actually note that there's all sorts of ways to control this and really go deep on it all right now let's talk about the item view because there is no specific um view cell in the collection view they got rid of the view cell you know representation here which means they also got rid of the context actions which is really really good and here inside of the item template we're going to see a few different things actually we're going to notice that i added a swipe view okay we'll talk about that in a second but i have the same exact view this is literally the same exact code from right here i just copied and pasted it okay but i did get rid of the view cell so i got rid of the view cell because it is just inside of the data template and that's sort of a nice like one layer removed one less thing in the view hierarchy now since there are no context actions how are you going to swipe to delete how are you going to long press on different things well there's the swipe view you know this is fully 100 stable and released in xamarin forms 5.0 which i'm running right here and of course you can grab this code on github links in the show notes below but a swipe view allows you to add swipe items i've just added some defaults here which is a swipe item which is a background color text and a command so i'm reusing the favorite command all that nicety there the same data bindings that we had inside of it and if i go ahead and swipe over here pretty cool that means i get swipe on both ios and android now i want to also tell you that you can use these swipe views inside of the list view too right you could you could add this in there there's no reason that you couldn't so you get that one to one inside the list view but the nicety here is that hey you know it's just the default you really get to control that cool thing is that you can do left right top and bottom so you're not really restricted you can have multiple items and these can be fully customized these are control templates so you can give it anything you want i'm just using the default here for reference okay so you can tap you can swipe to delete swipe to do anything here's another cool one that's actually built in automatically which is this thing called remaining items threshold this is sort of the load on demand lazy loading that can happen here this is cool remaining threshold says hey when there is one item when you're scrolling and there's one item from the bottom go do something so go load more data so here i'm using this delay load more items inside of here so this is kind of cool what i'm saying is when i scroll to the bottom here if it's less than 10 items which currently it's five just go ahead and return let's go ahead and load more items so first i'm going to do is hit load more items and we're going to see that now i should have about 10 items in there and as i scroll to the bottom hit load one more time we're going to get more items here and now as i scroll we're just going to load more items until i reach 20. so automatically now here i'm going to pull the refresh and clear it out again we'll get 10 one more time and as i load more items and now we have 15 and this is going to keep loading more data there you see more data just loaded there refresh the view so as i'm going through i'm able to actually continuously load on demand as i scroll through and that's just built in to the collection view okay so that's another nice thing that the collection is going to give you over the list view now on top of that one thing that you may note here is that this has a vertical list that's really really cool because that's the default however i can change this let's go and stop this over to a horizontal list or is horizontal list and what i'll do down here is instead of doing uh right items i'm going to say top items because obviously if i'm scrolling horizontally left and right that's not going to be good you know at that point so we're going to go ahead and boot this up again and this is really really neat because now we're able to see our items left to right instead of up and down automatically using just the simple items layout and the nice thing here is that these are just some of the fundamentals built into the collection view but there are a lot more complex things built in so you can have custom item layouts and do really really complex things automatically okay so let's go ahead and get this booted up i'm going to load over here and now as we go left and right it's you know i didn't optimize anything but we can see here i can scroll left and right automatically a little more items and i can even swipe down and i'll probably want to customize this a little bit that's the whole view to be able to favorite and delete which is quite neat actually inside of there so that's one thing that i super duper like right inside of the collection view so you're saying okay james like you have this collection view you're telling me that it's awesome and what else can i do with it and when should i use it when shouldn't i use it well i really think that you should use it probably if you outgrow the list view like if the list view is there and it's working for you and it's great go for it but if you're thinking about adding swipe swipe views if you're thinking about adding pool to refresh in there those optimize new views are going to give you more flexibility and more customization out of the gate especially if you're doing grouping i think the grouping part of the collection view is very very nice and you can go really really complex on it so if you ever want horizontal or you want up and down you want multiple grouping you're good to go the other thing i didn't show inside of here is that the collection view also can do columns so you can specifically have multiple items in a column which is really really important when you're laying out your different controls so for here i was just showing a vertical list however you can do multiple two so let's take a look at that all right so now what we're going to do is instead of using the built-in items layout what i'm going to do is i'm just going to paste in some code here and here we can see that i am saying grid items layout orientation vertical span two all right let's go ahead and reload this now this is really nice because there are a bunch of different layouts built in by default we saw the horizontal items layout and the vertical items layout so this is a grid items layout which means that you can create your own custom layouts you can do crazy things with the collection view because it's really optimized to do crazy things so this one's really cool again it's going to be vertical but now we're going to see a span of two items inside of here so here we go let's go ahead and boot this up and what we'll note inside of our view when we go into the collection view now we have two items inside of here i didn't do any work just automatically built in and actually the the top items are still pulling down from the top you can see i can see this inside of here and this is really cool because you can then optimize it and say if i'm on a tablet show two else show one on a phone so just like that and you get multiple items you get the grouping inside of here and this is really really cool check this out i load more items as i scroll down we're going to do that continuous load and it all works as expected you probably don't want it to go from the top and bottom like that on the pull to refresh so maybe we would change that up a little bit but it is kind of cool just to kind of see it all working there there's a lot of fine grain control in this thing and in fact what i want to show you is that the documentation is absolutely spectacular so inside of the collection view you'll see data layout selection empty views scrolling and grouping okay there's all sorts of stuff in here so inside of here these are the things that we talked about you define your appearance inside of here so you can see the list of monkeys that are going on here you can use item template selectors as well just you could inside of the list view so all that stuff works over here they talk about the context menus which again are the swipe views so you can define those inside of your code there is pull to refresh so again to pull the refresh just like we saw earlier is going to work exactly the same and then that loading data incrementally it's all there for you i love this look at this we have things such as our horizontal list of data which we saw you can do multiple rows horizontally vertically inside of there you can give a different item spacing in between each of the items you can dynamically resize the items based on the height although so different things and it has full right to left support too i mentioned the collection view selection all this great documentation showing you how to do different selection states inside of here multi-select as well and of course you can clear the selections you can pre-select items by setting the selected items instead of selected item there's all sorts of stuff talked about the empty view give it an empty view if you want to you can literally just give it text you know there's some simple things inside of here or you can give it a custom one you can do all the scrolling detection you can scroll to a specific item there's really really complex things you get all sorts of data inside of here and then of course the grouping is what we talked about fully customizable grouping header and footer templates on side of the collection view all right so i said it earlier when should you use a collection view when should you use the list view i like to start with the list view there's sort of less options for me so i can just put data inside there you can use both of them right there's no reason not to use multiple controls based on what is right for your application and your page and the data that you're displaying i hope that you really like this if you have feedback and you have comments and you have questions or you have opinions on the collection view versus the list view leave them down in the comments below and of course let me know what you would love to see here on my youtube channel as we continuously build out this application in my xamarin 101 series now i said i was going to do some some different event to command videos but i really wanted to jump on this topic because i got a flood of just great comments on twitter and on youtube asking for this breakdown here you can grab this code on my github but more importantly don't forget if you like this video please give it a thumbs up that helps that youtube magical algorithm so other people can find the video and of course subscribe and hit that notification bell so you get notified every single time i release a new video here right on my channel finally before i go don't forget i do twitch stream on fridays over at twitch.tv slash james montemagno there you'll find me building out all sorts of applications currently i'm building out a peloton clone where i use list view i use collection view i use shell a whole bunch of really cool things including the xamarin community toolkit you definitely want to check those out and past episodes are here on my youtube so make sure you subscribe because i release those videos weekly as well alright thanks everyone for tuning in again please leave some comments below and please ding that notification button and a bell and until next time i appreciate your time and have a good [Music] you

Channel: James Montemagno

Views: 12,718

Keywords: xamarin.forms, collectionview, listview, xamarin, ios, android, collection view, list view, display data

Id: _lVM9gpFSbw

Length: 20min 14sec (1214 seconds)

Published: Thu Feb 18 2021