Beginning Collections Views in Swift 5 and iOS | DevTechie Interactive | Skillshare

Beginning Collections Views in Swift 5 and iOS

DevTechie Interactive, Learn new everyday

Beginning Collections Views in Swift 5 and iOS

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (3h 57m)
    • 1. First Collection View

    • 2. Collection View Number of Columns in Row

    • 3. Cell Selection

    • 4. Cell Selection to Details

    • 5. Adding data refresh control

    • 6. Alternate approach for new data insert

    • 7. Cell delete function plan

    • 8. Custom cell in Collection Views

    • 9. Cell editing mode

    • 10. Cell selection in edit mode part 1

    • 11. Cell selection in edit mode part 2

    • 12. Cell deletion

    • 13. Moving cells around

    • 14. Programmatic Collection View Data Model

    • 15. Programmatic Collection View Data Source

    • 16. Programmatic Collection View Cell

    • 17. Programmatic Collection View

    • 18. Custom CollectionView Layout Demo

    • 19. Setting up View Controller

    • 20. Custom CollectionView Layout Class

    • 21. Custom CollectionView Final Wrap up

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn to harness power of UICollectionView and take control of your app's layout

A collection view is a way to present an ordered set of data items using a flexible and changeable layout. The most common use for collection views is to present items in a grid-like arrangement, but collection views in iOS are capable of more than just rows and columns.

In this course you will learn to harness the power of Collection Views. Build an app from scratch, and customize it by creating and manipulating custom collection view cells. You will also learn how to create UICollectionViews programmatically and add supplemental views to display custom header for each section of your collection view.

This course is designed for anyone who wants to create flexible grid layout using collection views. This course takes practical approach by teaching you each aspect in order to create an efficient collection view along with tip and tricks associated with collection views.

Meet Your Teacher

Teacher Profile Image

DevTechie Interactive

Learn new everyday


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. First Collection View: Hello and welcome back. And, uh, the city if you're gonna start while creating our very first collection view. So let's go ahead and get started. So what we're gonna do is I'm gonna have this South Blank Project open. I've created this mastering collection view. A new project doesn't have anything in it, so let's go ahead and put some content in it. So first thing I'm gonna do is I'm gonna select this for you, controller, and we're going to wrap this inside a navigation controller. So we have a nap bar at the top because you're gonna be as a part of the exercise like during the during this, Um, probably a building, this thing app to learn about collection. We were going to be adding some buttons for adding and deleting stuff. So, uh, eso yeah, that's what we're gonna use navigation bar to basically had those buttons. And we're also gonna when we navigate from one screen to another, we're gonna basically, um, take advantage of navigation controllers automatic rendering off back button and down when we can actually be able to freely used that service s. So that's why I never getting control. It's quite useful so we can call this one now, maybe home screen toe. Let's go and see if you can provide a title home. It's Queen like so. All right. Now we are ready. So let's go ahead and run this before we put more content in it so we can see what's what. What do we have? All right, So it's launched and first time it takes it takes a bit time, but they go. You have You have the home screen already s. Oh, that's good. Now let's go ahead and press command shift L to open objects ivory or alternate reality can do is you can press on this button right here to open your object library and would be looking for you. Say collection view. So let's go ahead and select the collection and drop it on your screen. Um, and then I'm gonna actually stretch it to cover the entire screen. I think so. And then you can add some constraints. So constraints you want is your place from all sides. Okay. And thinking that at thes focal strength, um, now let's take a look like, you know, some of the properties of collection view so Ah, First of all, if you notice the number of collection items, so this items is basically thes are cells of reasonable cells that we have, so you can increase them. Like, you know, if you have the take two or three different variations off cells, then you can increase it to two or three and designed those prototype sells according to those three different variations. Now, in our case, how we re how one So we're gonna have, like, you know, stick to that one. And, uh, we're gonna get this one a really identify itself. All right? I've just increased its with and hide a bit to make it look a little bit bigger. I mean, all those size, we're gonna set a little bit later. Ah, six, look at other properties. So you have layout. This actually is, uh, the layout that actually provides the by default you get like, flowing out. Where if let's say you're scrolling vertically, so school directions related to it. So the safe your schooling vertically like in this direction, like a table view. Then your items are gonna eso items are gonna flow next to it. And when this space is occupied him and collection. We cannot fit any other item within the screen than it's gonna flow into the next one. So that's why it's called slowly out now, the other option that he have its custom where you actually create your own custom layout. So this is where you get the opportunity to provide your own class on, and we're gonna look at in the advanced section how to create your own. Got some layers. So we're not gonna talk about it right now. Ah, celestic to flow out now, next thing that he have is basically a score direction. So you're collection where you can go, doctor bottom. So basically it can go just like they will be making a doctor bottom or it can scroll horizontally. That means can Chris against grow this direction. Horizontal direction is all. So we're gonna take a look how those two look when we change the directions, okay. And damn next thing is like, you know, if you overwrite any section headers section footers talk about those get a proper talk about like dragon dob, and stuff like that has all now ah, school view indicators, so you can actually use C five style now a default style does is basically depending upon you have, like a darker content. It shows a lighter indicator. And if you have light ah, content that is Children darker indicate us their daughter Michael. You just that you can have it to show like in both horizontal indicator and vertical indicator for four of you, Or you can have like enough showing them he can enabled stable scrolling. You can enable disabled Beijing. So paging means like you know one. It's like, you know, in this particular visible space my scrolls up to next, How next set of cells? Uh, then it actually schools as a page. So all the cells in the next page are gonna show up. What is a continuous scrolling? So that's what beating meets direction Lark is something you can love The direction off scroll now bounces basically, when you scroll upper town. Ah, you might have noticed, like, you know, for photos up and stuff like that. When you scroll up and down, you actually get a bounce where you can stretch your eye. You can stress you i to a certain level and then you leave it and then it actually bounces back into its own place. That effect has basically that's what this is so balanced risk, er our bows to zoom He can DuPont's horizontally impala cortical e then, Ah, you have, like, you know, delaying touch down that way like you make it actually scrawl I can cancel scroll. So basically, it allows you to cancel the scrolls for some reason. If you don't want to let you know, you don't want to continues calling, you can cancel scrolls. Um, other than that, they're like, you know, some pretty basic of youth related properties have so you can actually said the background begins at the 10 color or bake it and then stuff like that. Okay, so that's a bit like in a really high level about collection properties. But are we gonna explore these, like, you know, and little bit greater detail back in our in various different videos when we start to utilize these property? So for now, what you do is gonna add in image so possible color this background to be like a blue car like that, and I want to drop a label and who do is we can actually put some emerges here. So we're gonna put the moody's for, um, or animals in this case, so two horizontal and vertical center on the screen. Let me give this a white font color. And what you can do is we're gonna increase the phone size to be, like, about 100 and, uh, changed. If the label to have it's a few oppressed control command space on your keyboard. You gonna lunch? He should be able to watch this movie a mosey ah, selection window. And then you can actually select one of the several of us choose Butterfly. And I said enter. And then we have our butterfly butterfly showing out there. Okay, so, um, that's our prototype self. Basically, it's just the cell prototype that we're gonna be using. And, uh, we don't want to go into a detail of creating our own basically our own cell yet because we haven't talked about it. What we can do in this case is we can give our label a tag. So let's say there is a tag property that we have right here, so I'm going to give this a bag off 100 so basically we can refer the stag. And we can prefer this view based on this unique Miley off back. Okay. Oh, it's not. It's not the wrong way. So the right way, it's not the preferred, but it's not the preferred way of doing takes. I'm just showing you because, like, you know, we're so early on to get started The collection with you. I want to show you a port in one ways where you can refer the views within your screen. OK, so that's the reason why this Okay, now does he have this already? Or we can do is we can go to our controller? Yeah. Simply say at I b outlet require collection. You you I collection for you. Okay. And gonna go back to our storyboard select Are you controller selector Arkle Inspector and connect this you controller this collection view do their collection you so all right, we apply, it is connected. And now we have ready to write a bit of a goat for a collection. You So let me copy some data and this data has obvious different morty animals. Um I have to make stuff everything see and c based and sometimes sources like that Okay, so first thing we need to do is we need to conform to collection views to delegates there so that we create that first and then talk about it. You are collection, you delegate, and you are a collection you data source. So, deli, it actually provides the ability for you to do some actions. So take some actions. Like should Ah, sure, highlight item. She should not highlight item did highlight item should on highlight. Just select the item. Right index bad Should de select and all these actions that he can take basically on the cells on the collection. The cells that are defined under your eye collection of you Delegate. Now, that's what If you had collection to you, data source goes As the name implies, it's basically the It's basically protocol that's responsible for providing dinosaurs and information about that data. So, like a number off items that needs to be displayed within the section number cell that needs to be displayed for an item at in expat or number of sections there are within that collection. No, you have some other properties, like beautiful supplemental element kind and can move item at when you're actually doing dragging up, move item at a different location index titles. So it basically returns indexed titles to display in the next few. And then you have index pat for index type. So there is a different kind of collection that he create a heady provide in expats for that, right? These are the properties that are defined. What is the functions that are defined under ur collection view data source. Okay, but most of them are optionals, as you can see there. Optionals, optionals, Optionals. Right here. The ones that don't have optionals in front of them. For example, the motive items in section and sell for index ad and expect. Ah, these two are required. Okay, so that's what the warming is that we're getting here. So what we can do, we simply gonna say yes. Please fix this morning for us, and they don't get our two off the stubs created for us. So here we're going to simply say return data dot count. So this is not data, then the count for that data, and it's gonna give us, like, in a number of items and for settle for row at index set itself or item, ad and expert. This is that we can actually provide that Sell what we need to display in their self assembly. Say, let sell easy call to collection you that de que for the year it'll identify sell. So this reasonable identified It has to be exactly same as the one that you have given right here. So you can simply copy that from here. And, uh, make sure to copy, not cut, and then base it here for an expat that we have in expats. Think expat that was provided to us right here. All right. Next. How what we're gonna do is ever going to say if let label, it is equal to sell that view quick tag and gonna provide that 100 if you know, are you has tag number or I d r number basically has 100. Yes, that you are label. So if it can find that if the cell can find that view with this tag, i d, Then it's gonna sign that that has had the while able to the sleep of variable. Okay, so we're simply going to say label dark text. It's equal to data index path and out. I don't. Okay. And now beginning to simply return. That's out. Okay, with that being almost ready to run our court. But before we do, we want to make sure that we tell our view controller that for collection view, the are the delegate and we are the data source. Okay, so let's go ahead and run this and take a look. All right? You can see we have our ourselves showing up, and right now we have set it to horizontal scroll. So that's why you can see, like, you know, all these items being a scrolled horizontally. And now, if I go back in the mean storyboard and change this layout school direction to be vertical and rerun this, you're gonna see it from a differently our perspective. So there we go again. See, uh, we have this, um Her article was calling enable now, but minarets have that, like ourselves. Don't really look nice. And you have these two cells and we have this health. A big space are big gap in between eso What do you do in the next video? We can actually fix just that in make our cell basically from the problematic from the program side or from the code, we can write it. So it's not two columns, but we provide harmony columns. We want to show within that our cell that we begin adjusted from the coat. Okay, so this isn't for district. Awesome job creating your first collection. Ain't I'm going to see you next video, every gonna fix the layout issue. And I didn't mind. How many columns do we need to show our role in the South? So I'll see you guys it next year. 2. Collection View Number of Columns in Row: I don't want Mac. And, uh, this video. We cannot fix this layout issue, so given continue from where we left in the last video. So let's go ahead and get started. Um, so we're gonna do is first of all, um, I'll be gonna get the wits off the view because you won't actually first compute. How so? Let's say if you're going to see if you're gonna show three columns, right In that case, what you do is he going to compute the with off the view? Eso get the bit off the view? Divide that by three. So it's going to create three sections for that to you, so it's gonna give enough size for three things to fit in, okay? And then we're gonna see, like, you know how that works out for us. And based upon that calculation, we're gonna make some adjustments. So let's go ahead and let's compute her wit So we can say self doubt, view dot frame dark sides, Dr. Do I My time And then we're gonna get the layout. So plus, began, say collection dot collection view dot collection really out has so I collection for you slowly out Okay, so we know it's a it's a floating out. So that's why we're forced force casting it How into the fully out. And then I'm gonna say simply layout that item sites is equal to CG sites in this American acuity event, and height s quit because you want a short as a square. Okay, so with that, if I run this now, what we should see, as basically, we should see three South. But we are only seeing seeing two Sorry, three columns, but we're only thing to cells making our two columns. Uh, there is like, this big gap right here and reason that gap is there because we didn't account for thes basing that sexually between these cells. So where is that? If you're going your main storyboard if you select yourself. And if you go in the size, Inspector Sorry, collector collection for you. Going the size inspector he gonna notice is there is a spacing off. Minimum spacing for cells is 10 and four lines. It's 10. So each cell has 10 points or spacing between them, and each line has tense face between them. So this calculation is worth getting messed up because What's happening is, although we're getting we're getting frame divide by three. But because of that spacing, the cell cannot fit in that space, so it's actually flowing into the next role. Okay, so in order to fix that, what we're doing is we're gonna count from that 20 point so we can simply subtract that 20 point from the wit because, you know, that's actually from the left and right. We can actually subtract that. So 10 and 10 for two. So because you want to show three So that's why we're subtracting, too, If you want to show for it, will take a look at the example. Actually, in a match, let's first handle Ah, this case. So if I just subtract the trainee and then we run this, we should see three self in a row likes up. Okay, so let's see, if you want to just shoot for okay, let's run this with four, and you gonna notice that you have the same problem. So now, in this case, let's say if I do 30 then you're gonna get four south and they're evenly distributed. Okay, So basically Ah, they, uh the calculation is what they were. You have the number s. So let's say you can define it as number number off column is equal to, let's say four. And here you can say number off are numb off color, minus one times 10. Okay. And numb. Oh, call him like so. So in this case, if you be change, just number of column, um, it should actually consider Hey, should actually consider our But we need to convert this into a CD float. That's, I think, uh, valley is expected or CG correct. Um and reason is, sees direct his more. Okay, that it doesn't help at all. Okay, so I say if we do like this, that air waas was so critic. Okay, Um, I guess what we gotta do is this wit is off type. Let's see, what's the type of this? Okay. So seedy size has, um, type city float. Yeah. So we gotta convert these two CD floor, so let's see if that fixes the problem. CD float. And, uh, Okay, that is really weird. Um oh, because of this division, justice needs to be 80. Florida's also I take it out of that fixes issue. Yeah. So all types have to be the same. That's why a sexually is throwing that. Okay, so that's good. Now, we can actually change this to three. And you're gonna notice that our little formula right here does the magic off displaying sales from Okay, So So, Yeah. So that's how you basically set. How many number of columns you on a show within a within a row in the collection. You okay? So yeah. So that's Ah, that's about it. For for this video. In the next video, we're gonna start looking into how we can add a detail view. Ah, and basically, when you click on a cell, um uh, okay, so let's first. And next year we're gonna talk about self selection. So just to show you how can select it's a particular cell and display that data. And really, after that, we're gonna discuss how we can navigate to a different view on self selection and pass that data into that. A new TV. Okay, so I will see you guys in next video. Thank you. 3. Cell Selection: all right. Hello and welcome back. And in this video, we are going to be talking about self selection. So right now, if you select these cells, you noticed nothing happens. And that's because we haven't provided any kind of functionality to those selections. Now, how can we do that? Well, that's why we are here to look for two answers that question. So let's go ahead and take a look at this. You I collection you delegate and see if you can find anything in this class. How are in this protocol? Okay, so what do you notice is as soon as you walk into this, how does them? There's a function that has a parameter dis select item at, so that seems to be that seem to that should work. So I'm going to copy this without optional and gonna go back. And by the way, when I'm trying to go into the definition, I'm holding the command key. I hold the command key, click and, uh, then not like jumped definition. Alternatively, what you can do is you can simply right click and say jump to definition. It will take you the same place or third of aviation is if you write If you right click after holding the command key, you're straight into that definition. Okay, through base to go to the to the to the class definition. Now we have copied that function, and we're going to paste it right here of it. Uh, comment, self selection hand and that paste it right here. But that's how we are ready to handle selection. So what happens is out whenever you whenever user taps on a cell, Uh, this particular delegate function is called They'd select items at Index Pat. So what we need to do is we get the index pat so we can look up inside our data. Which index was clicked and we can actually do some operation on that particular index off our data. So, for example, we can simply say let indexed So are selected. Select data is equal to data, and we're gonna use index path dot item property because that's going to give us liking a which index it was tapped on. And then we get the selected data. We simply print that's selected data inside out consulate. So if I run this right now, what's gonna happen is we are going to see a dog, uh, cat mouth, anything that you're selecting here, being printed in the council. Okay. And this is that this operation is very useful because But there are situations where when , Let's say in future when we're gonna be. But we're gonna try to delete the cells how you provide a selection mechanism, where we gonna allow users to select the cells before deleting them. And then once they're selections are done, we're gonna allow them to delete it. But we need to know what they have selected. So we can actually create a some sort of ferree that gives a track off what items user has really selected. So that's why I like, you know, and obviously for for many reasons, you will actually show which selected Index water, like, you know, take them to a detailed view and stuff like that. For that reason, this function is important. Okay, so in the next video, we get a handle this to do something more than printing it in the council. So what we're gonna do is we're gonna create a detailed view and gonna pass this information into that detail view. And I'm gonna also going to show you a a a very common error that I mean, it's an issue that happens that, sir, it can crash your ab, and you're gonna be baffled by, like, you know why it is happening. So I'm gonna I'm gonna show you that, like, you know, that that happens and how you can avoid that. Okay, So I will see you guys an extra year, and we're gonna continue from here on the displaying selected text into a detailed view. So I'll see you next year. Thank you. 4. Cell Selection to Details: Oh, no, Come back! And and that's what we're gonna be creating a detailed view. So let's go to our main dust reward. And once again, I'm gonna hit command shift L to open the object, Levy. And this time, going to get a car and look for view controller. Drop that, you Controller seven around here. Okay. And now I'm going to select this yellow button and hold control key in drag and drop into this new view controller to create a Segway. Okay, so this is how we're gonna get to this thing screen now this next green from here. Okay, so we can have a name to Segway. Um, detail now, alternatively, what gets done is eager drag directly from the cell to this heart to this free controller. Now, what that would have done is that would have created a sec, wait on self selection. So as soon as you tap on the cell, he can actually move to that to that of you can't over wherever you have predicted. That secretary. The reason we didn't do that because you're gonna have, like, more control over. Over. What's that quasar being triggered. And if you create a Segway from you, control or TV controller. And you put identifies on them. You can actually trigger those Segways based upon your own conditions in the cold, which is more production level called then Theun doing this like you know, then doing this and what we're trying to learn here is how to write efficient production level code. So that's why I'm not teaching you all those other techniques. But he can obviously try it out and see for the learning purposes. Although this technique is much more important because in the professional world, this is what you're gonna see people doing. Okay, So with that said, let's go ahead and create a new class for this, you control. Here we go. We're going to select Coca Touch class, and I'm gonna name this one detail. You control her. Hey, we're gonna find a place and save this. All right? Once this is faint, how are we gonna do is we're gonna create a baby selected data off type string hand. This is an optional. Now, what we don't do is how you wanna actually show this data. So I threw dismissed. Gonna show this. Whatever Rodriguez they're selected onto the screen something So I'm gonna put a label. So once again, command ship tell, I'm gonna put the legal at the center of the screen. How we gonna give this a background? Something select Sustained background? Yes. Give this about maybe 200 points in this case and sent through this. So center in container and then give it a color. White. Go and, uh, control command space. Disliked a new guy. They go. OK, so the Soviets show. So we can I show this whatever, get using a selected 100 points larger. Um, and then we're gonna go to our detail. We create an outlet. So at i b outlet, require data label. Do I label and let's go back to our controller sites. Are you goingto go to operate, inspector? And look for that outlet that we have just created out. We can give it a class. So let's first make sure that we have custom cloth detail view for this particular he tells you what this particular view controller and then we see Don't leave. Oh, okay. I said now we are already Okay. So this is something that's ah, very common mistake that I've seen. Especially when you were starting to use. And you don't know, Like, you know, the lifecycle of these of you controllers so he could say self doubt data labeled a text how are basically did set and say, whenever this selective date I said, Do data label dot text is equal to whatever that selected data is. Okay, I'm gonna force on Rapid because that's not the issue. They choose something else. I want to show you what they show is by crashing the up bust. So what you gonna do here is we have the selected data and, uh, weekend, uh, trigger a Segway. What was The item is selected so we can say self dot Perform Segway. Okay. And we can give detail as identify and sender as selected data. So this is how you can pass a data to your to your Segway through your say great. Okay, So we're gonna send this, uh, this selective data into our performs with center of property and for this to work, basically, we can have to, uh, influence this over ice dysfunction. Prepare for cyclists, ender. And we simply going to say if so here are we going to do few checks. Okay, so our checks are going to be a swell. A guard let selected item is equal to center as a string health. You don't know what kind of center it it's it against. Simply returned. Keep Segway. Thought identified is equal to detail. Standing as a guard. Let destination you going Told her is equal to Segway. That destination as detail. Ethan told her. So if you know the secretary identifier, it's equal to detail. That means it could be the destination is detail. Because if you can resolve that as though then good, otherwise return. If he can resolve all these, then begin to say hip, let Index. Hi, destination. Easy. Not selected data Haiti called to basically we're now gonna say selected. I don't. So whatever we have received right here, okay? And, uh, that's that's that's about it. So, um, said now, while we have our ah selection performing the Segway and we're sad passing our data to the Segway through center and we're gonna receive that in, prepare for Segway and then try to set that into the destination view controller. Now, let me run this and take a look. Uh, I guess if it's gonna work or not and trying to get why it's not working. So I'm going to click on it. And what we get is a fatal error saying and expectedly found nil. Now you can spend hours debugging this, but this issue is so cryptic that if your first time doing this, you're probably not gonna know what's causing this issue, let me show you. So D Day data. If I said data level, you'll notice the data label is actually milk. So what happened? Basically, what happens is your your selected data is already initialize along with this. Uh, we got David. We control detail, we controller. And it's being said now, Now, your data label hasn't has the opportunity do be created within the view controller because we control is not initialize yet. All right, so, uh, that's why when you're trying to set this data labeled a text to selective data, you're gonna get this error. Now, believe me, this just looks the cells like, you know, something await review, but it actually throws a lot of people off, so I just want to show us the right way. Is so what we do is you simply wait for beauty unload? Because by that time, you know, all the views have been laid out. All the dinner has been set related to the view. All the constraints have been set. Then you're ready to take a look and set text for that data label so you can say selective data. You can even do it in viewed it appear, but something off a life cycle of the V comptroller, Not directly like, you know, inside straight, like inside the pickle tore. Plus, you have to rely on some life cycle, some lifecycle method to complete before you can set this. Okay, so let's go ahead and run this and see if this one works and have tested. So that so I know. Hate works. Okay, so there we go. We have our dark showing up. If you go out back, we have our line showing up and you are froggy. It's duck. Okay. So yeah. So this is how you handle self selection. And, like I was telling you, because we have this navigation controller, because the rapid this inside the navigation controller, We're getting this, um, bag button for free. We didn't do anything extra for this. So you're getting this for free. So that's actually not something. Now, there's something else you can do is they can say self start title, which is the navigation title from this one is equal to, um, you can say selected data details. Thanks. So So if I run this, um, well, what's gonna happen is gonna actually show me optional. So let me force unwrapped. It's because I know by this time this is gonna be there. Um Okay. So this details this details, like so so that I can set your, um, here. We control this title from the if you have a navigation bar from the code. Okay. All right. So, uh, this is the end off our selection video and exhale watching. 5. Adding data refresh control: hello and work Mac. And and this again we're gonna be talking about inserting new data into our collection view . So let's go ahead and get started. We're gonna do is we're gonna goto our main b can't over and a little drop he bar put. So look for you. High bar button item so far wouldn't item And just drop it at the corner off your navigation control mur. And we can simply select this button right here and, uh, Jane just's item to be at. Okay, so it's gonna show that plus sign right here. Now, if you go back to your view controller And if you go to here, we control our section and we're gonna create a new high reaction. So I be action bunk. And again it named this one add item. Okay. And, uh, what this is gonna do is basically it's gonna call our ad knew it. Basically our property insert serving it, inserting that, saying certain united on this gonna basically insert a new item. So, in order to insert in your item collection, we provides insert item's function. And so let me show you that. So let's say if you say collection. We got insert items, and if we command right click on this, are we gonna be taken into this definition? And what this does is basically it's inserts the item inside the collection with you and refreshes the collection you Now you're seeing other bettors like, you know, really old items he could use real item so you can add your date. I inside data and can reload the collection view that were You can also show newly added items. But the problem with reload data is it's very inefficient because whatever you have loaded inside yourself, whatever it's visible inside yourself is gonna be discarded and recreated again in the memory so insulated them. Actually, it takes a gracefully basil approach and incrementally as that at as those new items into their collection, and you're going to see how it actually looks in a minute. So let's just create a text. So I'm gonna add a strawberry in this case. So let's add Strawberry and we simply first thing we're gonna do is we're gonna apparent this data into our data. So bendis text into our data. That's our David that we're saving. Okay. And, um then we're gonna create an index bath, and we're gonna create this with index path and damn, simply rope and section. That's the one that we want. I am going to get data, doctor Count. Now we're gonna subtract one because David wrote count returns total number off items. But what we're trying to get is Index. And because this is zero index index is your base, we're gonna get one index less than the tour account. That's why we have saying they're not count minus one. So when your items start, they're referred to as zeroth Index and first index and second index. But the counter turn says like total number of items there are, So they're 10 items. 20 items is going to return. But if you if you can't if you go like you know, find index, the life's item is gonna be at the index 19 because your index was started at zero. OK, so that's clear. Why we are doing get a dot com minus one. Ah, section is going to be here because we don't have any sexually Don't just have one section , Okay, so now we simply got to say collection, we got insert items het Index bat. Now you must be wondering where it's our data being added. Well, our data is being added inside our data model, so data is already loaded inside our teacher model. We're just creating a new index bath and adding that to that collection view. Now, it's gonna happen. When your collection view reaches that index bath, it's gonna quit e their data model and say, Hey, give me whatever you have for this in expat for this index pattern item are for this index and then you can against the strawberry from there, okay? And that item is gonna be added. OK, so that's cool. I didn't run this hand down now before around this, actually to connect these. So they select be controllers, this yellow button or yellow mate, What do we call it? And we're gonna, uh, going to receiving received actions and got dragon Rob, this one right here. There you go. Okay. Now you have are action connected. So if we rather this r plus Orton should add a strawberry into the list, I get So let's click on the plus button here, and, uh, should have. It's troubling. Now I'm gonna keep this at the bottom and it's add another one. And there we go. Yeah, another one. They got another one. As as he can see, the entire collection really is not reloading, but just that one cell Estimates added, it's basically being animated are faded in. Okay, so, similarly, you can actually do this for multiple light. So let's say for some reason you wanna add multiple items at one click, you can do that. So we cut whatever we wrote and put it in their functions. So, folk add one item. Yeah, insert one item and you do that hanger create another function insert have people. And we're simply what we can do here is we're gonna say collection, you got perform batch update, and this is where we can actually write on patch up there. So I'm gonna put a loop in the video to Preston five, for example, and you're gonna put this stuff inside. Okay, so let's add a different like that broccoli into that, the completion block. It's going to be nailed. And I guess the city the issue and they got So let's call insert multiple items instead of one item. And what do you gonna notice it? As soon as you click on that plus button, the whole bunch of our, like about five broccoli's headed into the list. Okay, so let's clean on that. And they would go. We have about five Broccoli's added into our collection. Click again that find more broccoli's headed. Okay, so yes. So that's how you add items into into the collection view. Now you must have seen in you I table view when you actually ah, like you know, drag and leave. There's, Ah, there's a refresh control that shows up and you can refresh your table, your load, new data or add new data into the tale of you. You can do that here. It's all. So the way you can do it is I can create a function. This is going to be it's righted the bottom refresh control selector. So we're gonna create. It's on upsy because this is recalled from a selector. How toe upsy upend the new. Okay, Can't be simply gonna, uh, do the same thing. So let text It's equal T Let's add something u s maybe not that maybe a star. That's good. Let's add a star data dot insert new element at a new element. So, you know, say text at zero. Okay. And now our index is changing. So basically inserting a new a new, um, item in the in the data set. Okay, So if you do a collection you dot insert item, then that in expat, it's gonna be at zero. So this is where you can, actually, with let's even your adding it had the and the big thing you can do collection. Your doctor, Will you load data, for example, in this case. And, uh, I ran it too soon. Is that we knew what we need to do it with you to create it. Hey, refresh control. So that's creating refresh control. So what? Refresh actual 80. Go to you. I refresh. And this is a scenario where I'm throwing like, No, you're fetching data from Internet or something. Anyone refresh the intense entire data. Um, that case, how are you gonna do something like this? Um, so I see you have, like, you know, here, professional created. Now you go to your beauty load. It's a collection for you dot Refresh control dot And refreshing, because you wanna Ah Oh, actually it That should have Bean and he upended. Hey, and then you actually we load any you, um, you and refreshing. And then in your beauty load, what he do it If I say you refresh control dot ad talk target itself selector is where you're gonna provide the selector. And, uh, you can say Refresh. What do you call that? Um, a pen. Um, so CIA paid you menu item, and, uh, he went It's going to be taught. Value changed. Okay, Now you're gonna take this and added to our collection Fresh control. Uh, you call to refresh patrol, except Okay, now we're on this. You're gonna see a refresh control, and it should be able to pull down and, uh, basically add star at the big name, like so Okay. All right. So this is it for this video. And thanks again for watching 6. Alternate approach for new data insert: Hello and welcome back. And in this video, we're gonna be talking about a couple off alternate approaches to ah, refuting Steffy have done eso. One of the thing that I want to talk about is like, you know how I remember in the last video and Europe ending in new items were actually reloading the collection for you. Ah, this is actually perfect. If you're loading a new data and refreshing your data source Ah, then then you can actually do this. Ah, The alternate approach to this is where you can actually create on index path. So basically create an index path with a row zero in section zero. And then he said just a collection of you dot insert item and then do and expats like So now if you do this, what's gonna happen is basically your ah item is gonna be added at the beginning off the collection view. So if you notice there's a bit of animation and all the other roads shift to the right and ah, if there's no space than the ship to the bottom and that's how it's basically adding a new element every single time Now you must be wondering Ah, worse in this. This right here in the in the council for me, they're showing up. So if in case this is showing up for us all. So that's another thing I want to quickly talk about. So what you can do is you can go to your ah, your target, select the added scheme. Make sure you're at run debug mode and you're at arguments tap and then go ahead and add a new environment Variable. In this environment, variable is called OS underscore activity and the score mode and just give it a value disable. And once you do that and if you go ahead and rerun your ah project, what you're seeing is all those messages should disappear. So basically what they were were just like you. No activity. Ah, activity progress like logs off that X code and so we don't need You don't really need those. So that's why I like, you know, you just removed that. So in case you were seeing that deacon rupe it that way on. Our third thing that I want to talk about is basically how we were passing this data to are to are detailed view so in our detailed even you select a I really selected item you. Actually, what you see is basically this Ah ah, This item there in the next screen and what we're doing is of your passing that Ascender. And then we were receiving that and casting the center as strength and then using it. So if if let's say you don't want to do this or ah, you have something else to stand in center, then Ah, What he can do, alternatively, is you can actually get a collection views index path for selected item. So let's take a look at that option. So what I'm gonna do is, um I think I'm gonna comment this, and I'm gonna use the same very building and we're going to say, Ah, guard, let, um, Index is equal to collection for you, Dr Index Path for and expats for selected item selected items. And we know that we have only have the 1st 1 because you only have one that was selected so we can actually select that one. So this is going to give it the give the index for that particular index for that particular selected item. If it's not there. We simply going to return from here. And what this gives us is basically ah, the item. So we can say selected or I can patient selected item. Um and ah, simply say data index dot item. So index actually has the index pass. Ah, so this is transient expat, and you can t selected item and that selected item has the same item that we were actually passing through center. So now with this change, if he read on our project what you just see as basically, um, same behavior, the behavior is not gonna change. Ah, but you should still be able to pass data back and forth. Okay? And this is also useful. Let's say if you have multiple items selected on the screen and you wanna passed them on to next green, all of them, then you don't have to, like, put first in here. You can just, like, get all the expats, um, using this this property right here for the collection view, and then you can pass all those index you can loop over your data and pass all that data that whatever selected Isil items are there In our case of you're only dealing with single selection. That's why we're actually doing the first selected. Now we're gonna see, like, you know how multiple selection and everything works out when we get on to delete part off collection of you. Because that's where we can actually allow user to select multiple items. And they would be able to delete those multiple items like, you know, whatever they have select made a selection for. Okay, so yeah. So that was it. I just want to make sure, like, you know, we cover all these like, random items that don't fit in a, um in a container. Like if I find anything else that doesn't fit, like, you know, somewhere, or there is an alternate approach. I actually continue doing this where I would actually create e video That's gonna have, like, you know, all these ultimate approaches. Okay, so our stay tuned. And in the next video, we're gonna be talking about the lead items. I think the interesting 7. Cell delete function plan: Hello and welcome back. And in this video, we're going to be creating a custom class for our whitey will view Sell. Ah, sorry. You are a collection of you sell eso right now if you remember, and the at the very beginning What we did basically, for our collection cell to show up is basically this label that we have Ah, for the cell you were referencing that or you're referring to that label using the stag property that used have. Now that's an okay idea, like any as long as you have a very simple user interface. But let's say you have, like, a complex user interface. It's gonna be really hard to manage these tags. So what you can do, basically, is you can create a ah, a custom class and that that custom class will be responsible for basically handling anything that goes on inside that custom that sell now in our kissed because we're ready. Teoh, work on delete operation. Uh, before we do that, like, you know, you want to add one more label here that's going ashore. Check mark to show, like you know, the items that are selected for delete functionality. Um So for that reason, if you have to actually add that, uh, add that new label in place now, like they will be collection, you does not come with built in delete functionality. So you have to actually create it on your own. Eso for that reason why we're gonna what we're gonna do is basically, we're gonna have a new label that's gonna show if the items selected or not been user clicks on it. And then when you hear clicks on it, then are we gonna show the selected state and, ah, when there's done selecting, we're gonna show them a trash Burton where they can hit that button to delete those items. And we're gonna remove those items from our backing data store as a less from the collection. Okay, so that's the plan. But before we actually work on that plan, we need this custom cell that needs to be created. So let's go ahead and create this custom cell, and then we'll basically add those labels and start working towards the elite functionality that we're trying to achieve in this collection view. 8. Custom cell in Collection Views: hello and welcome back and in the studio where you're going to start creating our custom cell. So let's go ahead and get started. So I'm gonna create a new file here, and, uh, this file is going to be you. I collection for yourself off type your collection we sell, and we're gonna call this one custom sell, All right. Ah, and once it's created, basically what we need to do is we need to create two different outlets. Are that one for, um, item? And it's one for select label. Although we don't have any select label right here, what you do is we're going to create a label that's gonna show check box. Oh, are an empty circle, depending upon if user has selected that particular self for dilation. Okay, so this also shows you like how multi selection works eso not necessarily for ah delish in , but he can use it just a regular multi isolation. So, yeah, so that's what you gotta do. So let's create on. I'd be outfit week war you are able, so we're gonna need another label. It's like the Select Image Select label. She's gonna call this and the select label is basically the one that's going to shield selection item label is this just label that contains the EMOJI? Okay, so that's That's good, right? So we're gonna do it so we can override awake from nip Super dot away from them. So there is anything that super class is setting up for this particular function for this particular cell. It would get the opportunity to do it. So that's I call super. Not a week from never. And once it is done, we're gonna call self Start Select label that player. We're gonna make a circular so dark corner radius, it's legal to 50. So we're gonna make that that label circle sensor refusing whole bunch of images. It's actually faster to render a label. And if label can actually get or worth and that they're gonna use that. But it's tough label you could have used. You could have used like the image It'll so image woodworkers, wealthy, just put image size it up and lord the correct image. But I felt like, you know, label is a little bit more complex yet to learn other, but more because you know how to. How do you make make the border circular like how to mask it. £2. I define a border color and stuff like that. So that's ice a little bit more complicated. So this I chose showing label instead of showing it as a image. Okay, So self start select label total air masts to bounce, Is he called? That means anything that flowing over the corner when you got out. That that circle, huh? So let's say if you have, like, you know, a square and you're trying to put a circle inside that you have. Those four corners are still visible. Now, it's not gonna be a Samueli. Look like circle if you have those four corners appearing. So master Bounce basically saying that, mask anything beyond that bounce of, Basically, just show the surgery and discard all the corners. So that's why we're staying master bound. True, you can get a day apart of color. A porter of it, a background color baron, quarter to the labor. Okay, So you like a lot that black with Alfa have a component 0.5. This is gonna be semi transparent. Okay. All right. So let's go back to our main straight aboard and what we won't do here is we'll select cell . We're going to go to its ah, identity inspector and give it custom cell as the class name, and then we're gonna go to itself. Uh, I forget connection, inspector Connection inspector and kids this item label or find this level as item level and we don't have, like you any select label. So let's go ahead and create that safe. If I best command shift l or hit this button right here. Ah, you gonna open the library and I'm gonna open the live on the first floor label and drop it right here somewhere. Make sure that it's inside the cell. So let's go ahead and, uh, paint it eight points from out from the trading and the bottom and give it a bit off 30 and 30 Reason I'm putting 30 because if you remember the corner radius, we gave us 15. Now, in order to show a circle Mr a Square Ah, you create a corner radius off with half off with and hide off a square basically so half off with or hide offer square. So the safety squareness 50 then your corner radius is going to be 25. That way The ark of the way the artist run from one point to the other. It takes 1/2. Ah, like 1/4 circle space are 1/4 circle form to that courage, Er, and that is why you actually have divided by two. Whichever like you can take with her height for square. Both of them are same. So you just take the with our hide and divided by two and whatever really get just a corner radius. Just glad it at that. And, uh, I wanna actually remove everything, Anything that's shown in there and ah, let's go back to our view controller now. And, uh, remember where we were actually selecting this? We were making a selection based on tag values. So whatever we were getting that tag. We're actually trying to properly that attack. Now, instead, we're gonna do is simply going to say here when he dig, you dig cute as custom cell. And you really don't need this where you say it's, um sell that item label dot text is equal to data index path dot item. Yeah, and, ah, let's go ahead and run this If we have done everything that we need to do. Then we should have a circle showing up in the cell and that this issue Okay, you've got to connect our select label that I was showing issue unexpectedly found nil. Reason is and exactly found Neal because it's finding an ill no connection here, setting those rallies, but nothing connected to it. Let's go ahead and connect this guy to something. So select cell, go to an entity inspector and drag and drop your connection to your select label and not go ahead and run it again. Vega. So that is looking good. I think it's a bit close to the image that I wanted to be more than that. So we could do Is Skin sent it to me before and ah, let's take a look at it today. Okay, so that actually looks better for sure. Now we don't want to show this like, you know, like this. We want to show this selection label only when our collection view is in the edit mode. So in the next video, we're gonna prepare our our collection views, edit mode, our property so we can actually double it to be in the end it mode or not. Ah, And then from there we're gonna make it multi selectable and then Adlai for casualty into that. Right? So stay tuned for that, and I will seek as the next you. Thank you. 9. Cell editing mode: onoko Mac. And in this video, we're gonna be working on the ad. It added. Functionality are headed mode off our collection. We So let's go ahead and get started. Uh, So what we need to do, basically, is you need to have some sort of button here where when we click on that collection re actually enters the state, the current state that's shown here so less First, make sure that we have, ah, this label selected and it's actually hidden initially when it's loaded because you don't want to show it All right, off when user lands on that page. So let's go ahead and and hide that end, Run our product one more time. And there you go. So we are in a state where we were before. Okay, so that's good. Now we can do is, um, begin, go to our view controller and there is a radio for sheltie that's available for you. It's ah, it's called editing. Anything mode are any button. So basically, there's the button. There's apartment provided on all the B controllers Holiness to do its ad that, uh, button in somewhere basically couldn't do it in their bar somewhere, either. the top, Never our partner far. So if you can do at the top map are so we simply gonna say navigation item dot left bar button item. It's equal to edit button I don't. So if you add this added but night men and run your project one more time, What are you gonna notice is it's gonna show a button. Now I just want the only thing that it does. It's basically changes back and forth, so towels from headed to dump. But it's really more than that in the background. So there is a function called set editing, and he can override that. It's actually talking dysfunction. They status mattered. So anywhere you travel, this dysfunction gets called. So what we don't do first is for you on the first call Super Dot said anything. So anything that's being edited propagate that. All right now, once we have done this now or reach do is we need to do a few things thus far. We need to allow multiple selection for multiples self selection into our collection view. At this point, if you notice how you only have a single self selection and that's the way settle selection takes us into the detail page. Now we want to stop that and gonna allow our user to be in multi select states. So let's do that. First, the collection we got allow multiple multiple selection is equal to editing. So depending upon what I do, think it's state urine is gonna allow the multiple selection now, you know, just going to see this yet because there's one important change that we need to make in our custom cell. So in our custom, tell if you remember how we have added these select level now, so like level does not have a way to show itself. We have hidden it. And we have an opportunity to basically every single time. And we go back into our ah said editing and V actually tablets hidden state here, or begin handle it in a little bit more in little module array or stuff contained like uniform sheltie way. If this basically this president, it's sort off like M v P. M. And um, I have a course coming up on M v P M. Where we can actually discuss how the entire MVV in process takes, and we're gonna build hoping to fabs to learn and instrument of those concepts. But this sort of false into the same, it's not quite that, but, like, you know, it's basically containing your feature from Sheltie related to that field into that particular plus. Okay, so that's what that's what. This Okay, So we can create Is anything a new property? It's gonna be off type bullion. Default really is going to be false. Okay, It's not gonna be editing when we actually enter the state. How Then we got say, did set on we can I put an observer to set whenever this is said, How we gonna say whatever is hidden s just to opposite off editing. Okay, that way, how whatever you're doing. However, if, if anything, it's true. Ah, then Hedden the label still being it is adding felt Are they hidden at the level? Should be so that change have you are ready to go back and tackle are toggled sheltie. So going into the year, it's simply I say collection you and we're gonna get like, you know, basically, uh, Index pat's for all the cells that are there that have bean that that's visible, so begin simply say? Actually, you know, that's one. But, uh, like, I could be that index path for visible items. Okay. Start for each sake and do for each into it. And, uh, this gives you a and experts. And what do you simply can't do is I say, cell is equal to collection you that sell for item at index path and basically Kosta jets custom cell. Then they say cell that is editing is equal to anything. Okay, so this is going to basically top editing state on enough, so this is good, but there is an issue that we're gonna see it right here. So let me show you. Fashion is I click the edit. All these cells have this. That label is gone once again. OK, so let's go ahead and school this. And if you know this, none of these have it. And some of these have it. And none of these have it sometimes. Solve these. Have it. Okay. And those who had it, they will have it. Okay, so that is that is really weird. Okay, So what's going on here? Well, we we did set for Theis alerting property for all the visible sells for reading and account for those cells that are being recreated or created new. So basically dick you'd and being set. So we didn't account for any of those changes. So we need to do, basically, is we need to go into our cell for item at index Bath and right here you say sell dot In addition, it's wrong. So, extent sell, that is, anything is equal. Do is editing. Now, this is editing is basically the Wii controller level. Our property, that is to find out if you control really actually gives you the editing state. So now if you run this again, he gonna notice that we actually get a much better expected experience. All of ourselves develop in anything said there are in everything state if he's good stuff . Oh, okay. I see a bug hide they see about. Okay, let's take a look at him. Okay, So how if you click, then there's some Selves they were, so I don't know if you noticed, but there were some cells that had, like, the selection. Uh, thing was still on, and ah, it was still basically showing that selections are cold. Okay, so, um, of the have. They said, Let me see if I can do this again. Read this. There you go. If you have the three that have the, um the selection is still on, so that is not good. Let's go ahead and check it out. Uh, it's a factory that aim expat for visible items. Okay, so So we having expats were visible items, and we have a next path for selected items for visible, supplemented views. Okay, there's something going on here. Let me let me do this list. This, um, put this, um, on the back burner, and I'm gonna actually debugged issue and find out. But this is actually totally unexpected. It shouldn't happen, because how would be r entering the edit mode And we were coming out off the edit mode at that point, it actually just reset. Um, Well, like, you know, reset every single, um, everything else fell. So it's only doing it for the visible that I understand. But snl's you it de select. Um, you should update that. But they should've paid for all the other so select to get that. And so these are not even getting select. Okay. Salty book this issue and, uh, but I guess you get the point like, you know how to make your screen total. So, uh, screen terrible for the selected de select eso. That is, that is good for this video we can handle. Actually, you know, we can handle one more thing. So if you notice even if you're in edit mode, if you quick on while the cells, it actually goes into the detail most. So that's something that we don't want to do. So what? Begin, Simply do it wherever we have district item. Hey there, we gonna say, if it is anything, so if not, is editing. So if it's not in the editing mode, then do all this. Okay, so this way, basically, what happens is when it's not in editing mode that it actually, so when it's not anything but it doesn't go anywhere, it just stays on the same screen. But that's only the boots out of the energy mode. It can actually work as usual for the selections. All right, cool. So what is it for this video? And ah, in the next video we're gonna see, basically, we're gonna first day back that issue, and, uh We're also going to see how to how to show the check part check box and make multi selection work. I get so things into watching and I'll see gets the next year. 10. Cell selection in edit mode part 1: Hello and welcome back. And in this video, we're gonna be talking about self selection. So showing basically the selection selected cells and then displaying a check box and when you click done should actually raise, uh oh. Are reset. It's safe. And when you actually look at it again, this should start from fresh. Okay, so that's not gonna build in this video. Ah, quick update on the issue that we found. Ah, where if you offset your So this is the fact issue that I found, like, you know, basically, if you offset one row and you come back, basically you disabled your edit mode and then you bring yourself back. It's still displaced those in the edit mode. So basically, this happens. So let's say, have we do this And, uh, okay, I'm seeing that issue. Say, if you know this, we see that issue you and for sold cells at the top, actually. So Okay, so it mostly happens at the top, where when you have, uh, really have offered it's very have offset. Ah, making a little bit, like in a couple of rows. Then it actually does not update that. But if you don't see you have offset for Ah, whole bunch. And enough. Take a look on your schooling, like, really slow. This is what, like, you know, it shows, uh, I can't seem to find, like, you know why? Uh, it is basically doing that. Um, they're one of the one of the thing that I actually did was super dot Prepare for reuse. And, uh, for select level that is hidden is he will do whatever. Ah, opposite to its editing it. And, uh, when I did this, it did not have any effect at the top for for the rule at the top. So if I do this, he can see the bottom one does not show up, but top one is still there. Now, this issue actually is something with the collection of you. And I could not seem to find any answer for, like, you know why this is happening. Okay, so here's what I need your help. One If you find this, um, like a solution, please. Please. Posted in our Q and A. Okay, So So we get to learn, we all get to learn something new, like how to basically deal with this issue. Alternatively, if you absolutely have to do it. The only option that I found that you could do this reload the collection of you. I know it's not ideal, but like, you know, that's the only way that remains or re Lord that section. Um, now, one more thing. First of all, a thing like you know what the issue is called. So basically, if they shoot the officer cells, So when you scroll, remember that reused identify everything that we have she's still happening. So I know my icis Really weird. Okay, so the reuse identify that we that we have right, that actually dick use a reusable cell whenever ridiculous they're useful sell. It keeps some cells in the buffer, so whatever cells are being displayed on the screen. Other than that, there are a few cells that's going to keep and it's gonna rent it as a buffer so it doesn't have toe render we quickly when user is scrolling like you re vast. Um, so for that reason, it actually keeps those buffer our cells as offset. And that often is basically what's causing this issue. So cells that are visible in offset but not really visible is what? The main issuers. Okay, so I help you understood the issue. And if you find any solution, please post a solution into the community. Okay. All right. So going forward. Ah, with the with the functionality that we're actually trying to build. Um, so we are going to make the selection work. So basically, we're gonna display which row user selected and sure. Ah, check mark around it. So let's go ahead and click on the year custom fell. You already there, and we're gonna override it. Selected state. And we're gonna put a did step her off there were into that. You can see if it is editing. Then we select label. That text is equal to its select it basically whatever is selected eighth, but a Turk artery operator. So he definitely wanted displayed nothing when we don't have it selected. And what will display here is, uh, basically an emoji. So let's go ahead and add it and emoji. And when displayed there, check Mark. So let's see what kind of check Mark two use. Um I don't That's not bad. I had this check Mark and I think this is Are there symbols? One of the math symbols. Yeah. Okay, So say, look, there you go. This one right here? Yeah, that's it. So it's one of the math symbols that we selected. So Ah, so this is what we're gonna put you on the show, so if I actually go ahead and rerun this so this guy didn't stop. Okay, Senator, crashed. Looks like Hi. So looks like I'm having a little bit issue with the X code. So let me go ahead in and pause the video and, uh, how picking out one issue with ex Gardez. I'll be right back. 11. Cell selection in edit mode part 2: Hello? No, Comac. Sorry about that. So I had actually killed my simulator and or to rerun the app it Let's go ahead and check it out. So I have the app running on. Let's go ahead and click on the one second. Just do make sure everything is working. Fine. Okay. So if I could get it, I have a selection state, and I don't know if you noticed, but there is a check mark appearing. So let's go ahead and fix that issue first. So you're gonna make sure that our check box is center aligned is off white color for the foreground and a si You want to find out what kind of font ID is? So I think it's about 25 points. It's got Teoh. Okay, So, yeah, I think, but those things that you do it, Yeah, get this guy, Reroute this. So they said the color in the form size in the line property. So I should actually Okay, so that's looking better. So if you notice now, we're able to select our multiple our cells. Okay. With that one gauge. Now, if you click them and if you click edit again, you know it is that you still have, like, you know, one of these cells selected now, reason we have just one off them selected because, um, when we enter the editing state, that's when we have multiple selection allowed. And we actually disallow multiple selection when the editing is off. So what they were the last index are like, you know what they were. One of the index is that it can find. It just selects that him gives that off, And it's not going to be an issue, because our need is basically, when you hear clicks done of you wanna de select everything and recent the state for all of these. So for that, for that reason or begin to do is we're gonna put this a little logic in place. Battery gonna safe, um, that collection for you, that index path for selected items, Okay, not for each safe. Others, then are any selected items you wanna take those selected? I don't. And in next path for those. So we're going to get the index for help. Those thing as a collection dot de select item at index path Animated true. Okay. However, a major 12 actually because you don't wanna do you take this but beyond make sure that it takes into effect like immediately. So let's make sure well done a living hell. This okay? Hi. He start because this is what happened last time and I had to crash my hair simulator. It showed that they're OK. So if I select a three these for decide, Okay? And I d select everything is perfect. Okay, Cool. So that is that is what we were doing this with you. Now in the next video. Really? What we wanna do is ah s Inez. You click on you enter the editing state of unis show at the bottom A delete basically and NFR on that and that never far apart. Never. And I'm gonna show a delete button on that. And that delete button is basically gonna particular off delish in for the Adams. Okay, so that's what that That's what we're gonna do in the next week. So thanks again for watching out. See you next week. 12. Cell deletion: alone. Welcome back. And in this video, we're gonna continue our delete functional day. So, so far, what we have is a knee click on it. You can actually make multiple selections and click done. Basically, multiple selection goes away, and it raises all those selectors we can start from fresh. Now, there are a couple of things that we're gonna do in the studio. We're gonna add a bottom that bar, um, beer. Also going add a button that's gonna be handling the delete functionality. And we're going to table just ah, plus button because we don't want a user to be adding stuff when we're in the edit mode. So let's go ahead and get this fixed because this is needy vex. So if I go in storyboard and, uh, let me go here and create a new outlet, so I be you're Barbara tonight. Um, Okay, um, while we're at it, let's create like a mother. The other one, basically just one is going to be four. I be outlet we coir for delete. So go eight button. You know, I barber 19 months again, and we'll tablets so we can add that. And you're gonna add maybe outlet for the container for the nap bar. That's holding it because you don't want to show that. Never bar all the time on Lee when we are in edit mode. So bottom like that's good as all doubtless you need, so you can go here. First of all, the select, the consoler, the main U in terror. It, uh, go in the connection, inspector. And but the ad. But let's add it right here. All right. Said that Good. Now let's open object, Liberty, look for navigation bar, and we're going to drop this navigation bar at the bottom, like so Okay. And we don't need any title. So I wrote that, and, uh, we're gonna go back to a library, and we can add one item here, and, uh, why not? I don't and do that. Um, we need bar. But tonight, um, yeah, they better the Barberton item and thinking that changes, they're going to go to an Anchorage inspector will change its item type to trash so it can show this trash. I come right now. We can do is, uh, you can go to our, um, connection, Inspector, my tend to forget names. Yeah, connection, Inspector. Um, and, uh, take the bottom. Have and connect that bottom lab to the navigation bar and basically a delete button to this delay button bar with 19. Right? So that's all the outlets. How that we needed to connect. So again? Go ahead and run this real quick and see if begin, see the bottom. Have are not. There you go. You see it? Eso We can constrained this too. So let's go ahead and constrain it. You know, points from all sides. That way it's always, um yeah, it's always there. I mean, it's a whenever is visible with status. Okay. And next thing you can do is begin said it's hidden property to be shoe. You don't want to show that right away. As soon as users starts off, what we're doing is that's its user clicks edit. Gonna disable this button and show the bottom halves. Okay, so let's go ahead and tackle that, uh, so go back in the vehicle. Told her and the V Comptroller, um, the best place actually to do all this hiding is showing as basically are, um, setting are set editing. Sorry. Not study. Set anything civic and say add far button dot is enabled is equal to its not editing, so opposite of fencing. So if it's editing, then you wanna disable it. If it's not it, then we are in a boat. Ah, bottom nab dot is hidden. It is equal to not editing. That's again. So let's go ahead and check it out. So what should happen is basically, as in as we click on the edit, this should be disabled and they should be How visible. And if I click done Ah, that should be enabled. And the bottom have should be disabled. Okay to that. Now, be ready for family for delete For reality, let's go ahead and and create a delete functions created right here at I b action. Fuck Late selected. Hi, Loss. Okay, so we're gonna do is are we gonna say if let selected. So if we have anything selected ah, selected items It's affected stop index pat for selected items. So if there are any selected titles, then we want to say like items is equal to select it hideouts dot map and we can actually, uh, mapped is basically transformed this and reverse it. So So, uh, that way. What we're doing is, let's say, like when we're because we're deleting from the same, um, same collection. If we sort and remove thes the items that were actually trying to remove our indexes is not gonna be affected. So let's say if you have one, too. And three and four, for example, that he needs to delete. Uh, they said no, not I mean, just all the items you have. But let's say you need to the three and four or 20 is better example. So I say, if you do do making a two and three, then in that case, if he sought them, which is gonna be it's already sorted. So it's gonna be 23 then we were sent. Basically, you first, idiot. Three. So, nearly three, this item moves here. You're in expat for two is not updated. But otherwise, if you just like, you know, without sorting and reversing, if you do it, so too is gonna get deleted. And then at the second index is three actually. But what you're looking for is to so then this is actually going to get confused. Your data sources getting getting messed up So for that reason, in order to avoid for any time in your deleting from the after the dinosaurs, you want to make sure that you delete from the back, not from the front. So we're gonna take, uh, the index bath and item property of the index path we can that sorted and the worst. Thanks. So, um yeah, this needs to be currently and, uh, that should actually do it. Yeah. So now what we can do is begin it right over items and we can say data dot removed item. Okay. Soviet ruling from the back. I want to be our done removing all the items. So first, we update the dear souls once we're actually done the leading items that we need to delete from that data source. We simply gonna say, remove for the lead items from selected items. And this is basically gonna take care at the least, tradition off the cells. Okay. So I see every missing. Any brackets? What is missing? Okay, we are definitely missing something. Uh, cyclic. So got this. Oh, yeah. Course. Okay. Yeah. The one that actually closes the class was interesting. Let's go ahead and connect this so I'm gonna go. So, like the few controller got a connection. Inspector s alive until he selected item's function. Had, uh, got to run this now and run this. You'll notice that we have They fully featured belief functionality. So that's good. And doing the first row, and they would go, So you have to leave it and, uh, he can dio random. There you go. And he looked up. All right, So basically a data sources now updated with all the values, are there not anything. Simply, like, you know, anything that you're try select. That's it. Per se late and the animation that it actually comes for. Delusion it out. It's automatically built in with the our collection you. So it happens that animation part for you and David go we have, like, most of ourselves are deleted. So that's how the delete functionality actually works. Ah, so yeah. So this is it for ah, this video. And, uh uh Next we're gonna actually add a reordering feature within this collection for you. Okay, so ah, do that for this to do. Had that way of watching 13. Moving cells around: alone. Welcome back. And in this video, we're gonna be talking about moving self around, so reordering or moving cells around. So there are a few things that you need to actually take care before you start moving thes self around the collection. Also, let's go ahead and and take a look what those are So I'm gonna say cell Oh, here at the base pay bottom. And, uh, let's go ahead and get started. So first of all, what you need to do is hurt others. There's delegate function called can move items at. So this actually indicates if we can move items, um, around eso you can simply return true, uh, for for everything. So America, in our case, begin a return true for everything. But what you can do, basically is based on the index path you can restrict. So let's say if you have multiple sections, you can actually say Hey, ah, Section zero eyes something where I allow you do. Actually I allow users to move cells, but section one I don't allow you can actually take that control to Ah, so you just have to, like, put a condition on the in expats find out. Which one do you want to allow and which one you don't allow. But in our case, like you know, for them for protests I'm gonna actually really true for all of the index pats, so everything can move. OK, then, the next thing is how you simply say, move item, uh, at and you say move item at. So basically there's a source and extract and destination bat and you be the only thing that you need to basically take care is you need Teoh, take your data source and in your data source, move the items and that's that's about it. And basically was Can happen is once you have moved your data stores, he can use long press gesture. Recognize er to basically update your collection view for that for that move. And we can actually do interactive movement. So we're gonna take a look how we can put that together for long press. Just recognize. Okay, so for here it's a very simple so we can simply say item. So it's simply gonna remove the item from the source index Pat. So we have removed that item and our item is now inside this item variable and simply insert it instead of the item at the data dot destination Don't item. So we're gonna removed from old in expat and inserted at the new and expat. Okay, now, the only thing that remains is that ah, cell s o r Davis was submitted, but cell movement eso for that, we're gonna use a gesture. Recognize Erso. Let's go ahead and and create a function. Uh, here and I could create at sea. So us first, let's add a just recognize on the collection of the collection of you because you're gonna need that. So add long press to collection real okay. And this is simply gonna be gonna create a long press and ah, it's gonna need basically a function that needs to call in the selector Silicon actually fill that one intimate. But you can say some thought collection view that, and gesture recognizing and long press is the historic weather that it needs to add a. We're gonna create enough's see function in order to call it into the selector. And the sun is going to be long. Press gesture. This You recognize her? Okay. We're gonna call this in here so simply long press gesture. There we go. All right, So now what we're gonna do is we're gonna actually find out which state we are in in the gesture process. And according to a state, we're gonna actually trigger some events in the collection. So put the switch statement and switch is gonna re but on gesture that state, okay? And I'm gonna have begin gonna have case for us changed. We're gonna have a case or ended and gonna have to default. So default is easy. So let's fellow, that one cancel interactive movement that won't do in default and it is easier is also simply as a haircut, a collection dot and interactive movement. You're doing that interactive movements and that and, uh, changed is also literally the update. Ah, interactive over in target position. And, ah, this is very gonna did your mind where the change is happening. So this is like as it's happening as you're moving yourself from one pointing to point we and you're somewhere in the middle. So you find out where you are, so we can actually show that drag and, like, you know, sell shifting all those things. So, uh, so you simply going to say yeah, gesture dot Location. And this is in a re gesture, Doctor Location and the doctor. You. So So the update. Ah. Target Interactive movement position is gonna be the location where the where the cell is at the point of the gesture is actually taking the cell and that that location is within the gesture that you okay now? Ah, for our begin. It's a little bit of work. So we first need to find out what selected in next batter is so elected index path. And we simply going to say collection of you dot index path for item at city point. So, you know, line which point Where is the point where the point is at the drag point are or where the where the gesture has started. And is there any, um, is there any item on that in that location? So, uh, we're gonna actually get that item if there is none. If this is not, uh if this just could not find anything that we simply going originally from here and now from here recently, as a collection, we don't begin. Interactive moment for selected index bat. Okay, Now, all we need to do is basically call this in your view, did load. So add long press gestured to collection room and go ahead and run this. So what we should see is and let me limit outward the gesture. Recognize orbit. So when you are holding Ah, the place you hold is you can see the sale actually, sort of, like, lifted from there, and it's now attached to the top position. And now you're moving. And as you can see, it's actually the sales are making space for that move. So, um, if I moved us here ended is where, like, you know, the deserts and everything. It's getting called an updated on everything but ended State is there. Ah, yeah. Interactive moving ends and update is basically it. Just find out where where inthe e in the drag position the cell is. They can actually make room for that self to fit in. Okay, so, yeah, you get actually literally like you. No chance the entire collection of you and play around with it. So So yeah, this is Ah, this is how you basically, uh, do you basically add interactive move for the settles in collection So So this is it. And Ah, thanks again for watching hope You guys enjoyed the video and, uh, thank you. 14. Programmatic Collection View Data Model: hello and welcome back. And in this section we gonna learn how to create collection weeds. Programmatically So we're not going to use any off thea three war or interface builder basically to implement or build our layout. And we're going to do that, all that how programmatically and even gonna launch our collection of you view controller programmatically using from the ab delegate um and, ah, in this section, we also going to talk about how to create your own header our view. So basically categorizing your content into header in showing header of like for each section. So So that's what we're gonna cover. And it's all gonna be programmatic approach that is going to give you a little bit more final again. Control on how you can actually configure your collection views. So let's go ahead and get started. So we're gonna do is first. I'm gonna create a new group without folder, and this group is going to be called programmatic collection of you and we're gonna add a file here. And first, let's create a model for the for the kind of data that we're gonna be saving. So, um, less save this model with the name Emordi data. It's gonna be just a sir File Import Foundation is fine. I'm gonna create a struck with name emoji data, and it's gonna have to be property index off type int name, off type string in category off type A morty category. You must be thinking there's nothing. There's nothing called emoji category. Where is that coming from? So we're going to create that it's gonna be an in, um and this Inam is going to be off type string, and we're gonna make it case it terrible. And cases rules, basically, Ah, something that's new and four point to, um and ah is continued on in five. But he can actually get all the cases for in in, um and basically it right over them. So instead of, like, you know, uh, collecting each and going through each and every inning value and looking into it, you can just make it, case it trouble and call all cases, and it's gonna basically give you access to all the elements that are available in. Can I have three guests? It's head herbal gonna have animals, and we're gonna have flags. And we're gonna use this, uh, this data to basically construct out of sections, and these are gonna be in section names, right? So this is our model. And in the next video, we're going to create our data service and, uh then later on, we After that, we're going to start working into our collection view a programmatic approach for the collection of you. I So I'll see you next year. Thanks. 15. Programmatic Collection View Data Source: Hello and welcome back. And in this video, we're going to be creating our data source That's gonna be providing us all the details that we need to populate our collection view. So let's go ahead and get started. I'm gonna create a new file. And, uh, this pile is a big uncreative xer file and going to call this collection data source, right? And, uh, import from foundation. It's good. Now we're gonna create our collection data source class and gonna need three tables. Are we gonna need emoji? Data are remedies is gonna be an empty array off emoji type, so, you know, populated in a bit, um, I'm creating immutable emerges in case if you need it. So the risks created if we need to store any temporary, um and, um, pretty well, you toe we can actually store them here, but I don't think we're gonna need that. Um, and we may commented out, but, uh, you so some of the examples, like you know, you could use an immutable version off your regional, um, or basically make this immutable and used this on as your main working their sources is basically when you're doing surgeon stuff. So Ah, that's something. Or if you're actually moving stuff around, then he can actually store their original content inside immutable and then change content and the, uh, like, you know, modify content there in the emoji one. And then once you're ready to reset, he can simply publicly or emerges with immeasurable Ahmadi's. Ah, that's what it was for. But I don't think we're gonna need it. Honestly, we can actually just elated when we need it. Just created that we're definitely gonna need section category section category, our categories. Um and this is gonna be an array of string of it Now. We need view functions. Eso we can either create, like, you know, count on the function, or we can create a car. Total count, as a property has to count is something that we're gonna use, basically, for how many helmets are there in the status owes? So we're gonna use this value to return number of items in the collection of you so we can create at the property. So record count off type end and this is going to return. So it's a computer property and it's going to return. Imo. Jeez, don't count. Okay, Next, Uh, you could have a number of sections, so number off sections. And, uh, this is something that is going to be section category start. Okay, So that area is not populated. Yes, a week. And I are gonna populate it. Um, Now, um, let's see. So we have We have our modeling, everything celestic. Look, we can initialize, um, and are any flights or takes no parent er and that what we need to do it our needs. Actually, first of all, you need to populate automotive, so emerges is equal to how there is a function that we're gonna create private funk populate data. Yeah, I copy Bassem called here in a bit, but this is what's gonna returned. Populate data ended it through into the shift return a, uh, ray off emoji data. Thanks. So Okay, so now we need to do is our into creates a emoji data, so I'm gonna copy and paste so we don't have we don't type this or you don't watch me type all these things. What we have here is ah, it's just a result. Variable created emoji data, and this emoji data has our three values how, like, there's the same model in that model has, like, these three values index, name and category. So what it does is basically populates that has a part of constructors. So, uh, next CEO name we just putting, like knowing much it there. So apple. And it's edible or not. And once one category is basically complete, then we actually reset the index, and we get animals category and candidates for that category. So you print that we actually populate those, and then we create one for flags. Flags. Okay, so there are three categories are that you can have We can have edible animals and flags like we created in our emoji category in um Okay, So once we have this data created, yeah, the data is populated inside everybody's. So this data in the emerges is actually ready for sections to be a two repopulated in different sections. So, um, let's go ahead in first, create our, um get a category in popular sections this section category. Babo, uh, can say emoji category in emoji category dot This is their We created that how we made that all cases think eso basically in our if you remember all cases does not form. Okay, so that's good. My Judita, in this case, it's terrible. Okay, so I think it needs to be all cases. Um, yeah, that's what Compiler is going crazy, but it's actually small all all cases. And it's actually basically how you get it right over each element off that innovator are that are that immigration? So we're going to get that value after each enumeration inside that emoji category and we will simply append that, um into, uh, water emoji, apparently it into the section categories. So if you do it like this, it's not gonna work. So what we need to do is we need to get a raw value so rob value after Madi category. Okay, so once you get once you get the Royal you of the magic category, it sir converted into a string and that's actually added inside the section category. Right? Next, we can create a function for number off items, our section okay. And, ah, this takes an index. So we need to find out which section we're talking about and the search terms and anti You're basically number oh, items in that section. So let's section name is equal to emoji category, and we can take the raw value. So we take section category and we get the index And who basically so this gives us the name off the category. We actually pass it inside the raw value. And, uh, I type this emoji category, Robert you and get on in amount. And that emits assigned into section name. Okay, so next, Herbie, simply gonna say in return emerge, ese dot filter. And, uh, we gonna filter out, we're gonna filter. Ah, the emoji who's category is equal to the section name that we have Children here. Okay, a We're gonna get the count for that. That's gonna be our number off items per section. Okay, so it's gonna filter out basically all the items whose categories it's equal to the section name. Okay, so we're gonna get linking efforts terrible. We're gonna get all the edible while use right next to how are we going to get the item? So, Kinsey punk item for section at Index Hath and, uh, Pastie Index blast here, and this actually returns in a multi day now, so section name emoji category. Once again, he actually came toe section categories index path Don't item I So get that value and we extract that section name and we simply say return emoji. So once again we're gonna filter And, uh, you saying emoji hand return emoji dot category is equal to section they okay, and then you simply gonna return index bats dot So this is gonna be section so basically, the way we're gonna know item basically for that for that index. But first, we're gonna get the section, uh, name. So each section is gonna have these four values for five alley right now when? Let's say, in expat for section at for item for section at index path. So let's say if we're past for the zeroed in for section zero Ah, perfection zero item zero. Then it's gonna be referred to edible for the section. And, uh, items you know is Apple. Then if it's sections, you know, and item one that it's orange section to a sex section zero and item to is basically watermelon. So that's why we're actually going to get this is how Begin again, T from the section We're going to get the, um um the category theme emerging January and then from emerging category. Once we have that, we can match that. And we're going to get all the items within that emoji category, and then we're gonna use an expat item to basically extract that one element, one element off that index out. Okay, so that's how we gonna basically extract that item out so that our data source is actually complete eso in the next video we're gonna start using Their status is to populate our collection. So how healthy you guys in the next video. Thank you. 16. Programmatic Collection View Cell: Hello. No, come back. And in this video, we're gonna be creating our collection of you. So, uh, let's go ahead and get started. What I have is her created two files, others one advanced collection be and collection resell. So when production is there, it's actually a subplots off. Hugh, I view controller, and this is very gonna create our collection view. Now, when we create a collection, we've gonna need a cell because, uh, like like, we discussed a collection with everything that you do actually needed to be done from scratch. So that's the level of control it gives you. It's a little bit off added war, but it actually pays off really well because he you have your own playground toe work with . It's like, you know you have, You can build anything you want. So that's what the sentence is. So let's go ahead and first out, populate the cell. Now this sucks. Elk are class called a collection cell, and it had inherits from you I collection view. So Okay, so we're gonna need that, uh, when we create our collection. So let's go ahead and create this one first. So what we do is we gonna simply create a, uh, lady bar you are able name go from that level and let's put some text. So I'm gonna put I'm gonna hit control command space to lunch. Magic it, Woody, uh, window and having a select Jenoff, maybe. And I'm gonna give it it font. So we don't fund doctor with sites and begin to get size 70 times ex alignment and the most important property translated out of sizing mask into constrained do faults. You return that you now we're gonna take our unit and a unit for say so we're not in and for frame just gonna hold But that frame I gotta create a function called set up. So they just put it out there, uh, create another in the required one A de quarter works a D quarter and the same thing set up . And let's create a private function called Set Up that Now, uh, we're gonna add some some properties to configure this view. So we're gonna say bag around my gown color in the youth color, literal. And if you don't live on this, you can choose a color, and then you can say add sub you name. And we also wanna style eyes our view. But first, let's go ahead and give it a layout of same self. And this the layout constraint, not actuate. So leading anchor it's going to be equal to leading anchor off of you. So it's gonna basically cover the entire cell. Hello. That stuff you're doing here height. Okay, so what does he have? This? Uh uh, we can also style eyes. So are so. Give it a rounded corners stuff. So let's create a private funk style. You stylized you baby, We're going to call this style you right here. And he gets a layer dot corner radio is equal to 10. Clear dot masks to bounce is equal. True layer dot Border color is equal to you. Eye color dot great dot Sees you, Carter and layer dot burger with to be to All right, so our collection cell is actually set up. The only thing that we need is basically how we gonna populate this, uh, this name property. So it we defined this as private. How we gonna do it now? The better way, actually is to accept a model. So emoji sift, for example, in Margie, Uh, data, Emordi data. It's gonna be an optional. But whenever this is set, uh, we're gonna check if there is anything in emoji data. So if lead marketing is equal to a more G data, if that is there, then we can say name dot text is equal to emoji data dot name. Thanks. All right. So that's how so we're gonna dio in ourselves. We're gonna set emoji data and that humility data whenever is set, it's gonna take the responsibility to properly Tom name this way. Beer exposing just enough to the outside world, Basically for our cell to interact with it. Okay, so what is it for this video? And in the next two, difficult. And start creating our collection of u N. I'm gonna use this collection, resell and take a look like how our style actually looks like, Okay, so I'll see you guys next to deal. Thank you. 17. Programmatic Collection View: Hello. No, come back and into studio B, starting on our collection view. So let's go ahead and get started. So I'm gonna go to this advanced collection of you doctor served files and, like, said, it's actually completely empty. Uh, this class was just created Advanced collection with you, and it heads from you. I you controller. So we're gonna go ahead and put our collection view right in here, So let's go ahead and start doing back. So lazy bar collection. You all right? It's gonna be up type. You are collection with you, and we're getting used closure to actually create this. So first thing we can do is we're gonna create a layout. So every collection view you, sir. Ah, layout. I need to know how it's gonna basically lay out its element. And one of the default implementation is called Hugh. I collection. You've flown out, um, which we have been using all along. So we're gonna use it. That's one, That's all. Um And then we can simply, uh, create our view, and we're gonna put our layout, lamented the collection. So for the frame, we're going to define it. Zero, because we're gonna use out of layout to lay out our view. So and that's why we have actually said it. Do zio and we're gonna set translate notable selling Mask two. False. And then we're going to say we don't register and we're gonna register our collection cell to be this reasonable sell. Okay? And this is how you programmatically register a cell for to be utilized, basically, and then we're gonna also give it a back up close so we don't background color, white color. OK, having returned to see all right with that, we can, uh, add this collection of you two are of you did load better, so we can say collection of you dot delicate his he called herself, uh, gonna make are ourselves or the three controller as the delegate from this, uh, out for this collection has also be dark heads of you collection of you. So they go, you've added that, and, uh, we also want to define a background color for the view so otherwise, because we're creating it programmatically it's all gonna look dark, like black color. That's a D focal or so that's what we're giving view white color so we can Actually, that's that's how usually veni creator view. It looks like he but he can give, like in any color you want. Okay, lets say set of our loud So and this layout constrained dot Come activate your choose overlord. That takes constant And we got say self Don't viewed out Harvey in itself actually serve you dot Leading anchor constants. You know, says curtain covered the entire screen that way you don't see you, that's all, um gets We are not using any of the any of the constants. So be simply going to say, um and we can actually all these weaken disrobe constant outer. Okay. And the last one is hook bottom. There we go. Ok, um now, eat. Actually result these two errors, it's basically complaining that collection revere saying ourselves is the Davis or sandals their souls in delegate, but s actually, it doesn't seem it is. So let's make sure we conform to that. We're gonna create an extension for this advanced collection. You ain't going to say you are collection, you delegate and you I collection have you data source, and we are simply going to show some things here. Okay, so what does some things are is basically something that gun again once we create our Davison cell on the screen and dinosaurs and that part, uh, is already done in collection collection dinosaurs. So if you were a collection of dinosaurs, the class that recreated, um, is what we're gonna use basically to show this show this. Okay, so we're gonna use those functions. So 1st 1 that we gonna basically use is, uh, going to be number off sections in collection view. And, uh, we're simply going to return data source dot number off items, perfection. And, uh, we're gonna What we're gonna supply here is section or so I thought this is instead of the number of sections. So we have a property called number of sections there taking these add one for number off items. Perfection is very good. Return Tina sourced dot number off idols per section, and we're going to supply section here. Thank you. Now, sell for item at an expat is where we're gonna show our ourself. So we're going to say, sell eyes equal do collection of you dot Thank you Sell but the identifier cell for index bats. And we're gonna Costas as our collection cell, and we can say so that emoji data is equal to data. Now, where's that data come from? Well, we're gonna create this very book, hold data, and you're gonna say data source, doc. Item for section at index back. And we got to supply the index bat eso There's gonna basically take care off getting that. I don't For that in Express is going to get the section is gonna filter out all the element , and it's depending upon the index. It's gonna give us that value back, okay? And we're gonna return Sell here. OK, but that, um Okay, that it seems like everything should be ready. So let's go having and launch this. So don't launch this problematic one. Our gonna do is we're gonna go into this state, finish logic with options, and, uh, first of all, go to project settings, um, find mean and for the main interface and just removed us. So from the very database, remove main. So you don't have that. You have anything that way? When evil up, delegate Eakins simply launch your controller programmatically So simply say, let uh, my friends, you can told her is equal to advanced. You could told her and you're wrapped us inside and never control have control of certain navigation Control says it's have control You I navigation controller, get a route. That's ABC and, uh then is it really safe? Window is equal to you. I window and then select frame the frame is gonna be you. I screen dot main screen our main that bounce and then window don't route you controller, it equals two knave controller And just make it make key end fitspo. Okay, But that every runner project right now what we should see is basically our newly created collection of you should launch if we have done everything right if not Okay, there we go. So that we have, um, all of our other for objects looking just fine. It's just they're really small. The reason is we haven't actually given him Vitor Hydrating things is taking the pre defined riptide, our spacing and everything. So let's go ahead. It fix that. So I don't do is how tough a scalpel it a bit theater. So it is going to be you, dr frame dot sighs doctor went and we are going to subtract So we're gonna show three, um, Cree cells Perot. So each cell has 2010 10 left and right margins. So the Soviets attracting 60 because your show three and then, um, divided by three. So this is going to give us the Are the wit off the cell phone begins here. Layout dot section in set You I edge said So this is for section, and we're going to give it 20 10 2010. Okay. And lay out dot item size. How is equal to CG size and the stakes with a night? So what's he decides within height? That's going to be bu dot frame dot study. This is gonna be with far the wits that we calculate it. Okay, So because gonna be square cell, he's just gonna best for tonight for the same value for both with the night basically, the bit that vehicle. And, uh, then we should be We should be done. Uh, I was thinking, like, you know, if we need to do anything for the header because you don't see it, what you do, actually, as you can see now, our cells are looking much better, much better space and everything but we still don't see our headers. Um, bad we're still providing are this were probably a number of sections and everything, so you can see there's a There's a bit of gaps of There is certainly a section, but there's no ah section there. Now, if you're looking for a title for, um ah, like proper, like function like a title for header cell and stuff like it, they will be you. You're not gonna find it because, uh, collection we handles sections rather differently. Been told we does. Okay, so the way actually collection of you does this is it creates a supplemental view, and the supplemental view is what acts as section, header or footer. So that's what we're gonna create next. So what we can do is we can create a new cell. A new file called Header supplemental. U N is gonna be part off you. I collection a reusable for you Says called reasonable, you and we're gonna call it header. You okay? And we simply going to save that now. Here. We can actually give our creator section. Okay, So for our section, we're gonna keep it really simple. So you gonna say police create lady of our header label Do I label and then, ah, we're going to create our view. You I label gonna give it a fund. So that's it for our label. Now we're gonna overwrite all the all they knit super stopped in it. Okay, so this is what we're gonna set up our, um are you? So we're going to say back in the color is equal to color, literal. And let's go select a different color. So maybe, maybe discover is fine. Let's give it some constrains. You're gonna make it color the entire Now, if if you needed to add something, something new or something, like, you know else. Ah, Then you can just print it and adjust your you can diss created and that just your layer constraints. We only have her label. So we're gonna make it governs the entire, uh, view for the head of able. So there we go. All right, so all of our, um, al fires constraints are set up. Our view is almost ready to set up. I mean, hey, it's completely ready, but it's not ready to utilize begins. We need to actually, if you remember the way we registered our, um but the way we registered our other cell, we're going to register to sell assault. So we're gonna go and wherever being registering that collection self because simply said me, not just her. And make sure to use the one with, um, supplemental yourself right here for you class for supplemental kind. Okay. And, ah, what we gonna do here is we're going to simply say the classes header view dot Heather, you don itself okay and off kind is basically you. I collection view dot element kind. He can actually select header or footer and give it a reuse the plant and fire. So, Hanner Feld, I feel like it's appropriate. Uh, European identifier. Now, you also I want to give our header some reference size. Eso layout dot Header reference size Basically the size that we're gonna give it to our give to our header. It's going BCG size. And, um, now with in height Ah, So it is going to be We want to take it like you know, the which. We are a ticket entire screen. So, Regan, listen, police a self start you dot Oh, are you dot frame dot sighs dot with and for height. Harvey simply can see take quit. So whatever the height is, um are let's give it 40. That's gonna be do, uh, this high. There's gonna be too much. Yeah, parties get Hey, let's go ahead and run this and see if we can get a thing. Well, we are not going to get anything because there's one more method that we need to implement . Okay, so height of everything is showing up fine. So that means, like, you know, this has changed a bit. That means, like, you know, Header, it's ready to be ready to appear, but not quite eso There's one last matter that we need to write a review for, supplemental. Ah, so you for supplementary element off kind, and you need to check if the kind is equal to you. I collection you dot element kind header. Okay, then do this. Otherwise return you I collection reuse both feel okay. So we simply going to say let's sell is equal to collection. You don't dick you supplementary view off kind. So we're gonna stay kind and three is identify his header cell and index patterns and expats. Now we're gonna cost this as header you area Simply say sell dot Header levelled up takes is equal to data sores dot section category and get indexed glass here. So their next blacked out section Okay, lets go Hopes we forgot Do return the cell Let's run it again And they should actually make our section appear like header. So we have edibles and all the animals are listed there have animals. All the animals listed in section and flags are listed its own section. Okay, so that's that's it. You guys successfully not only created a programmatic collection with you, but you've also created the programmatic collection We with affections all programmatically And so how to launch every controller for dramatically. So Ah, that's an awesome job. So give yourself Hey, good clap. And what we're gonna do is how we're gonna wrap this section right here. Thanks again for watching. Thank you 18. Custom CollectionView Layout Demo: alone. Welcome back. And in this video will be creating. Ah, this how custom layout. Ah, for a collection of you. So what we're gonna do, basically we're going to create this leaf like, sell off us, Paul, And then we're gonna provide this snapped resume effect air a collection of your cells that we're gonna be designing a custom layout for this and also industry. I also want to show you how you can combine collection view and a table view in the same we controller and all this programmatically. So that's part of the challenge that we're gonna be tackling and the upcoming a few ah ha videos. So let's go ahead and get started, and we're gonna jump right in. All right, So I'll see you guys the next video, and we'll actually start creating our basic structure for this view, control or see in the next year. Thank you. 19. Setting up View Controller : Hello and welcome back. And in this video, we're going to start building out our custom layout. Eso What I've done is ah added some images into our project. There are some Avenger superhero images, so I've got four of them right here. And then I've got I also got Are these images in major 0123 Just random images that I've actually taken from the internet and of downloaded them Also include them in the assets for simplicity. I'm actually including it within the project, but depending upon your projects, need you may actually download this from the internet directly. So it's totally up to you or like, you know, what you gonna do with that? But like, for simplicity sake, just to focus on the implementation part for the custom layout, I'm gonna actually keep these images in the asset for Okay, Let's go ahead and create a new group and this group we're gonna call custom layout. Um, yeah, that's just getting up. Okay. And I think for someone Do is create Hey, new file called superhero. That's just gonna be a model. That's gonna oh, show uh, this table view eso Let's go ahead and say super hero Dr. And I'm gonna do is, uh, women create, Obstruct. It's a copy based some good right here. So you don't see me tapping, but it's a simple, struck off superhero over three properties. Name, profile, pic here description. And then, um, got this extension, and I'm gonna put right here and the sea. Do we have Iron Man Thor, Black widow, Captain America and Hulk. So let's make sure we have undermanned, sore black Widow, Captain America Hulk. Okay, cool. So what I won't do is ah, this profile. So, Iron Man profile picture. I'm just gonna select the atom man from here. The select over for here. That's elect, uh, black widow and Captain America and hook. Okay, so let me show you what's going on here. Basically would give what we're doing is we're creating extension on superhero that actually, it's a static function that popular jstar the Avengers up and it simply creating array in here. I'm simply creating this very well, Iron man. Uh, and, uh, superhero basically structure in each last name profile pic. And in case you're not aware, this is actually image literal, so you can just type in a literal hit. Enter and it's going to show you this. Ah, this photo kind of thing. And he can simply little clique in select a photo that's added to your assets. Okay, now the benefit is just actually gives your visual visual kind of like a clue off worthless images. Now, for me, I was just dealt clicking, and all the images are showing up because in the, uh, when I created, I just had to double click. And because names are same, it was able to pick up which image to show. So in your case, you might have to Don't quick and actually choose which you Mr joins stuff. But yeah, Then you have description, and we just create this object. And eventually, at the very end, after creating all the superhero objects, I'm just returning Iron Mentor. Black Widow Catherine, we're gonna talk in general. OK, so that's Ah, that's society. How that way. Like, you know, we don't you worry about that now there is another Another view that I wouldn't create basically a blur view. So let's create that one. It's a custom blur view that, uh, I'm gonna try to creates a lessee, Swift. And, uh, we have simply gonna say this one is gonna blur back of you, so it's gonna cover this. Let me show you. So create this must create. Okay, so this blur that you see at the back off the view there's the blurry that we're gonna create. Okay, So we simply going to create a class from that So it's gonna import you. I kit. And in the same class you are Have you says coming. Send you. I've You are never inherit from you. I view. Then we're gonna create your image, Harry. Never that you are images said gonna do some operation here. Okay? What? That operation is gonna be there. Simply gonna create a lazy lar a lady private, uh, private property leave. You are back. Image. You You I image of you and you're gonna create you. I made for you right here. Gonna set the content mode to be scale aspect, Phil, and we're gonna return dispute. Okay. He said that this is going to be in her back of you, and then we're gonna also create a blood of you. Yeah, I visual effect of you. It is gonna basically blood of this image image you. So I'm gonna say you go to you, I we shall effect for you and the u i visual effect. It's gonna be the effect is gonna be you. I blur effect with style to be like, okay. And we also gonna say translates translate auto reciting a mask into constrained to false because we're going to provide our own constraints. Next thing we're gonna do is we're gonna create a private function set up where we gonna set up our entire view. So you simply say ads of you back in, Major, You first, the image you on the top of that, we're gonna add the blur view, and, uh, then we can give our layout constraint. So activate constraints equal to failing constraints equal to trailing Stop and bottom is gonna be the same. So it's just gonna cover the entire screen. Then are we going to do the same thing for the Blur? So you simply gonna take that and I'm gonna say blur you? Same thing kids blurry was sitting on the top off back image. Okay, now, all of us that it was done are, uh, back image is covered has covered the entire screen, and then blurry has covered the entire screen. So it's going to give this blur fact. Now, we're gonna make sure that this is actually called from somewhere, so we're gonna do in it, and we call super dot in it. And this is very gonna call, um, are set up and we also gonna do required in it. Super God. So this one is called when you initialize here view from the 80 quarter run. It's called when he initialized your view from storyboard so de Gortari's past and like, you know, ah, you can let the superb you do whatever processing it needs to do and then call your set up . All right, so with that are a back purview is ready to be used. We just want to make sure that we actually set this set an image on a really Saturn imagery set an image to the back image of you, not image his equals. Teoh. Whatever image that's been supplied right here, every attacked her back blur view is done. Now, let's go ahead and, um, go over and create a view controller. So we're gonna create coca ties classes time and this is going to be you. I collection You have you control are think y you controller and we're going to call this snapped because hit snaps Oh, and he actually move stuff. It snaps right there in the middle. Says snapped. You control her, it's good. And it is a good neighbor camp, so let's go get that. Okay, so now, uh, s create heh. Snappy controller. What we want is basically a collection of you at the top. So first, let's create hey collection of you once again, we are actually creating the entire layout in the code because that's that represents most of the stern industry standard. Most of tech companies, professional environments, actually follow this pattern now where they try to create everything programmatically because it's easier to test it. Easier is change and easier to collaborate on because there are if there are merge conflicts and stuff that that can be result rather easily, rather than dealing with, like, storyboard, that has X emails and everything that you don't know what they mean. Actually look of this links. But Joe XML is created in the background. So you are collection you layout is equal to snappy. So lay out in something that we're gonna have to actually hang onto. Um, I was actually gonna created, but we actually don't have only out yet. So let me create your collection and, um can create frame docks, Ito and simply we gonna Hughes here. You I collection, you play out. I said the cell is gonna be called snappy. Tell, um, because it's gonna snap. So do I. Collection? Have you sell okay and be simply gonna create that. Um well, that's a cell is gonna happen is basically, lady, you are super image. So just just an image here so can call Super image. You. You I I made you and then, uh, gonna create you image view it. First of all, let's returned this view so we don't get in error, and then second thing is translate to false constraint to falls and then contact mode as he got to dot skill aspect fit. Okay, Now, with all these done, are we gonna again set up our a set of you so funk set up the view function where we can actually send of ourselves and here we're simply going to say content Have you act up and serve you super image? You okay? Content you dot clips to bounce a Z culture Truth. So image imagines that they're bigger in size Don't bleed out And then we're gonna give super image you dot later Dr. Corner Reyes Medical. Too funny. Now, um, we are going to make the corner radius 40 point, but we only gonna do corner radius for two for top, right and bottom left. Okay. And the way to do it is basically your super Mitchell. You taught layer dot mosque must corners basically say that. And, uh, it takes in all right. And you say layer and what you want to select its men X um X X men. Why so Mex x men Wyke armor. Now, Max X is magazine value off X on the X axis and minimally on the Y axis. So that's discover right here. So we can select now. And that's Ah, your top right. And then you say layer men X Mex Why, Okay, so in your in your by excess in your Y X is basically what you're saying is like X is not changing, But why is changing and whatever the maximum value lie is, that's very good. Apply that corner radius. So this corner is going to get basically rounded. It's all OK, so that's how you actually begin. Choose which corner. Ah, you wanna basically make a corner radius too? Okay. All right. So with that, our let's give our super imagery doctor layer or not must do bounce to True is also we have this according a radius visible. And then we're also gonna give our image you a border. So blair dot border color is equal to you. I color not white dot cd color GHAZl er takes layers. Marcona takes particular. So remain view. Another one is going to be the border with you. Want more of it to be one and then having gonna set apart constrains activate. You know, copy that and paste it four times and we gotta change trailing top. And but Okay, now we can actually go and oh, we should be calling the set of views from somewhere, so we should call it from are in it. Okay, so that should take care off. Calling, calling in, setting up the setting up the view so we can come here. And we simply can say, snapping cell itself. It's gonna be the class that we need to register for. Reusable lending, fire cell. Okay. Now, um, before we proceed, actually, let's pause the video here. And in the next video, let's go ahead and build out our layout, our collection view, custom collection, really out. So we can actually include that right here. So we don't forget about it. And, uh, and then are we going to continue on for a rest of the set up? So let's go ahead and build out the Thea custom layout in the next video. Okay, So altogether there. Thank you. 20. Custom CollectionView Layout Class: Hello. Welcome back. And that's what you were going to be creating our own custom layout. So let's go ahead and get started. So I'm gonna create a new file, and we're gonna create this file basically, as a Coca Test five class and, uh, gonna create from your collection view flu layout. So that's gonna be a subclass are fully out. And we're going to call this snappy flow layout except and let's go ahead and save this, huh? Now we have Ah, this self you I collection be flow layout and most of the properties that are there, we can actually use them as its but we're gonna be overriding certain stuff. So go ahead, take a look. By control clicking on you I collection relay out to see what all it provides because there is a lot of information and really good documentation that's actually out there. So I would highly recommend you going through this just understanding, like, how are the floor layout? Actually, itself works, and that will give you an idea for your own creative ways off extending these, but ah, we can actually do a few things. So we're gonna create our own property. So first of all, are we gonna create active distance and it's gonna be a CD float type, and we're gonna need this basically to normalize the distance and the view comes to the center. Basically, we're gonna find out, at which point we gonna have view snap to the center of the screen. So kind of like that. So that animation that actually happens, Ah, that discrimination is going to be like, you know, at what distance of you should snap back to the center or it basically, um, go back hiding. So let's say like, you know, if I come have it through, then it should take this view. And if I come, not so much have a truth and distribution remain. And ah, the other view, other cell that's us that was scrolling should go back to its own place. So the sort active distance it's gonna be used for are you also going to need zoom factor is ever gonna create that one as a CD float, that's all. And we're gonna put 0.3 valley for that, so I would actually say like, No, I mean, I've tested these values with this layer that I'm creating. So play around with it, like, you know, chain make changes, See how it affects your layout and everything on it. It's gonna actually b'more learning for us. He actually changed this. How the behavior changes along with these families when you gave them. Okay, we're going to override in it. So we gonna first calls super dot in it. And, uh, we're gonna call a view called SAT Function Call set up so we can have a private funk set up, and you're gonna call that side of it, Okay. He also gonna need ah required in it. Serving it is cold. Who put up at a D quarter and then call set up over here. So okay, now in the set up, her begin to set. Two things have been said to scroll direction. We know our abuse ourselves. Our collection views, discoloration is always gonna be horizontal. So we're gonna just say her sandal minimum line spacing we know is gonna be static. So it's gonna be 40. So the life facing between the views between the cells, it's going to be basically 40 points, and then I'm going to create a new another function get collection for you. And this is just a convenient method to basically get the collection view from the view layout. So when the views and even this layout is initialized, are you gonna have collection view? Ah, and for certain operations, we're gonna need this collection view reference to this collection of you. So it's stuff like, you know, guard letting every single time, and we need it. I'm just going create this convenient function test can. Actually, when it's called, it's gonna unwrap collection view from guard lit. And if collection is not there is gonna throw an error. But if collection is there is going to return that collection view. So simply, guard, let collection of you is equal to collection view else. Fatal error with message collection. You is not percent okay. And otherwise we cannot simply return our collection. We unwrapped. All right. Okay. Next thing we're gonna create how are alright. Prepare now This method is called at the beginning off courtly. Our process and this is the opportunity are basically for you to perform any kind of pre processing. This method will deter mined the size and the position for every cell supplement review and decoration computing the size of the cells. Scalable content area basically is. Basically, this is where are you going to do it? Any sizing layout attributes is in storing them, so they're gonna do it. And basically, this method is where you decide what the layout should be or the world the layout is gonna be for your custom layout. Okay, so that's what prepare method is for. And in our case, we are gonna first create a collection, are you? And we're gonna get the call to get collection of you To get the collection re reference. Are we gonna create a Babel collection of you dot framed out with times to your 0.6 to basically get 60% off of it and seven, Really? We're gonna get the height. That's also going to be 60% off the height. Then we're gonna basically defined her items eyes CD size with right, her next we gonna create our vertical insect SSA basically the work tickle insect for a cell. So we can simply say no article insects and uh huh b collection, view dot frame dot height. And, uh, we're going to subtract collection of you God, just toot content inset dot Top minus collection of you dot I just ate, carted instead. Talk bottom. So, uh, you're gonna have the insect. But if there's any content instead that's defined for the cell. Are we gonna actually subtract those two from the from the collection? Use height first, and then are we gonna subject the height, the height that we have computed that 60%. And we're going to divide this by two. Okay, so there's gonna be her particle in that. Then we gonna have horizontal insets, and this one is going to be pretty similar. So collection view dot framed out with this time, and we're gonna do left and right. So collection of you don't have just stayed content instead dot Right minus the collection . You dot de ST content inside dot left, minus with. And we're going to divide this by you. Okay, so we're gonna have, like, to insects, basically for left and right for the horizontal space. And then we're gonna say section insect is going to be you. I edge insects, and, uh, we're going to give top to be a vertical insets. Um, left to be horizontal insects. Um, the bottom is gonna be once again vertical and right. It's gonna be hot. Example. And Louise single arised name because it's just one inside. So, um, instead of calling insects sexually the is just stay inside. Uh, okay. High school. Now we're simply going to call super, not prepare. So whatever remaining set up that collection view, that collection we flow lee out needs to be are doing we We will allow that to happen in the super Class s. So that's what we're gonna call Super, not prepare after we have done our settings. Okay, the rest of the stuff is going to take place in the super view. Um, Now, what we need to do is basically, we need to define Lee out at Real's for elements. So you need alright, layout attributes for element. And this is there. You can basically create that zoom effect for your cells. So first, let's create that's kept a collection of you. So collection, you get a collection of you, and then we're gonna first get, um, correct address. So super dart layout attributes for element clearance in direct, and we're gonna map this so we're gonna drop this and map this and you say, Ah, train closure We gonna use for the map dollars zero's first element art copy. And simply in a use. Empty ordered for the copy as you I collection for you. Ah, you lee out attributes. So you're gonna get all the attributes for the current rectangle that's in place. Okay, we're going to get all the Lena right abuse for that element. For whatever elements out the rectangle they present rectangle is okay. Um, then are we gonna say visible rectangle visible, Brecht? It's equal to CG direct eso the portion of the collection with that's visible, and we're going to say, or region and the science that's going to take this one. And we can say collection of you dot content off that and the size is going to be collection. View that frame dart sides. Okay. To conduct content offset is going to be what we're gonna use as the SD engine. Um and, uh, the frame collection was frame size is gonna be the size of the visible wrecked that we're gonna be showing. Okay, once they have completed these two, how are you going to say for, um attributes in direct 80 tr's so wrecked directing electro beats Are we going to say 80 tr's dot frame that intersect So if it intersects to second rectangle So basically, if the attributes that we have it's frame intersects with the visible rectangle. Okay, if that happens, there's a closure block. Um, and, uh, what we're gonna do is we're gonna say if it praying about intersex Yeah. Uh oh. So actually, this is slightly different. So we're gonna say there so because for all that reads, get all the attributes, their, uh, actually you start frame intersects with visible. Correct. OK, now And that happens. What we need to do is really to compute distance and we're going to say visible wrecked dot mid X minus 80 tr has dart center at Ruth starts centered out x. Okay, so we need to get the distance between the visible Rex amid made X and attributes. The attribute Currently selected attributes ah center dot exe location or x coordinate that we're going to normalize distance by dividing distance, great active distance that we have defined at the top. Honey. So let me do control I to farm at the code and there's an extra. I think there's an extra princey, so we will that Okay. Hi. So if, uh, if distance that magnitude eso we're gonna get the medic from the distances a less than active distance. So active distance is basically 200. And, ah, if that is the case, then are we gonna say zoom is equal to one plus zoom factor Times one minus normalize distance that magnitude and then begin to take attributes and apply three D transform. So see a transfer pretty make scale. And we can I say, make scales to zoom. Okay, So trees transform of this takes out three rallies X y and Z Z is gonna be one. And X and y and properties are gonna be basically computer based on the zoom factor and the normalized distance magnitude. Um, so we're going to compute that, and then we gonna provide Z index, and that Z index is going to be inter value off zoom dot around it so rounded. So value is what was gonna be easy next alley. So and we're going to return this correct head tributes as a part of this layout, attributes for element function, return parameter now that's actually our sales. Zooming It's done the zoom effect that we're actually giving here. Um, now, are we going to override a trance target content off it. So when transitioning between layouts, the collection of you can call ah this matter to basically give you the opportunity to change proposed content offset and use this basically at the end off the animation. So basically, it actually gives you an opportunity to compute. They I offered her that he can have and you basically override this mattered to give ah sell like, snapping behavior. So, like when? When the transitioning is happening that's snapping behavior suddenly happens that this conflict, that if you if you notice in the animation there's a zoom in zoom out. But sales are snapping into place That behavior it's given using this target content offset that we're gonna be creating next. So we're gonna be over it. So target content off that, and we can use the one that takes with scaling velocity. It's crawling velocity and, um, beginning first get our collection view, okay? And, uh, then you're going to create snapping behavior. So that target correct. He got to see direct. I'm that bit framed up height. Okay, so basically, we're going to create a new rectangle with proposed content after the new our country. Enough that that's actually being moved. Nothing big provider for the sale that's being moved. So we're gonna take Akseli off that Why zero? Because here we're doing only horizontal. I was crawling. And then, which is going to be the collection with his fifth. And the height is gonna be collection within sight. Okay, then we gonna say, Ah, guard, let tract attributes layout attributes for element in target wrecked. So you're going to get ah, attributes for the target fact, if there is nothing, then we're gonna x Simply say there's zero are snapping. So if there's no rectangle being being intersected at that point up in that case, like, you know, we're just gonna return zero, then we're gonna have our offset a testament, so we're gonna just you off it. Great. It's finest magnet magnitude. It's gonna be the value in the youth, and we're gonna say horizontal center. It's equal to proposed content. Affect our X plus collection view dot frame dot with divide by two and then going to say far layout attributes. Um, okay. Far Lee out somebody's and I'm not getting the outer complete. So I see missing return types. So it's pretty return type. Um, but I won't actually calculate so far Layout day buttes in direct at two years. Oh, yes, that's available. Name I Ah, Let item. Horizontal center is equal to layout. Attributes start center dot Exe if item horizontal center minus horizontal center. That magnitude is less than offset adjustment that magnitude and the Israelis are pre computer. I offer playing around with so many different options. This one. Actually, um, I'm just typing those because, uh, based on your need actually can adjust these values and see, like, you know, experiment with these, like, you know, see how to changing thes the's horizontal center computers, computer horizontal center magnitude and offset adjustment. Basically their magnitude if you change these values. How Defects Year collection, res layout. Okay, um but we simply gonna what we're going to do is we're going to return ce point and ah, that's easy. Point is basically content off that that's what we're actually providing. And we're writing at Exxon drive early. So proposed content after Top X and um proposed Contin opted. Really? Don't why? But for the X value, we're gonna also add offset adjustment that we just computed. Okay, so we're gonna actually provide that too. Now, are we also going to override? Ah, this should invalidate layout. Um, that takes her are basically simply returning true. And it's actually just in well, dates to lay out for every single cell when zoomed. Eso basically we can provide that zoomed effect. Eso it's gonna invalidate the layout for that cell and the zoo effect is gonna basically taking place. Ah, that's every actually in safe Should invalidate like should involve eight layout for every self so just converted untrue. Now there's one last function that really do Alright, It's called invalidation context validation context and we're gonna use for abounding change one and basically, what this is is creating validation context Object ah, that is responsible for using context Object to update layout efficient. Now this creates are the invalidation context in response to specific changes like when you rotate your phone are likely on that layer changes o r when the data source changes, for example, you any insert or delete items until dancers and when we call our reload method. That's when this invalidation called the context object is basically changed and it's created. So it actually reflects the validation context for you to use. Ah, and do like, you know, for the new layer So shouldn't invalidate layout. Actually, then triggers and and and makes the more room for, like, you know, New York content to be available seven year on the last sale and you inserted in your cell . That new object is going to be basically available by calling this invalidate context object that was created for you. So we're gonna simply What we're gonna do is we're gonna say collection, view, get collection of you and context. It's gonna be super dot involved ation context for pound and, uh, we're gonna supplying new pounds here. Hey, we're gonna cost us as your collection if you layout flow lee out flow layout invalidation context and we're going to say simply, context up, invalidate slowly out Delegate metrics is equal to new bound start Saif, and we conceivably compare that it's not equal to collection without bounds dot size. Okay, hand, we gotta return this context, but that are snappy flow layout is actually ready to be used. So what we're gonna do is how we're gonna go back into. Are you controller? In the next video, we can ask Simply built out this piece there. We're gonna added to the collection of you and at the collection view to the View controller and and show it. Okay, so let's have on to the next video, and we're gonna basically wake them. Adjustments to show the collection. Were you inside the beacons? I'll see you as the next year. 21. Custom CollectionView Final Wrap up: alone walk back. And on this video, we're gonna be adding our layout, our victim to look election result. Let's go ahead and get started. You're gonna create layout. Ah, ticked. And we're gonna say snappy, slowly out. Okay. And what we're gonna do here is, um we're simply gonna provide this layout instead off writing this layout so we can avoid that snappy, fully out optic. Um, right there. Okay, so then our neutralization and everything is good. OK, so now let's create a, uh, fable lady war for our background For you, uh, background for you. That's gonna be our blur view. So blur back view, And we can add that into our view Control rights all put her back for you. So we can you actually imagine it'll here? So image, petrol, and so click and tell issues could be this Okay, in the U stands has a background image, and now we're gonna create our data. Um, so So our data is equal to data is off type. You are image, and it's simply gonna have all that Your images image, literal image, literal. So gonna select. It's on. So let me do this. Sort off typing and like, you see me typing all these when a copy base got all the images right here. So Okay, so these are all the 12 images that we have. Eso Let's take a look There. 123456789 10 11 12. Okay, so he's told images. So we get to simply go back, eh? So that's gonna be our data source. We're gonna make sure that we are collection views, delicate, and data serves. I'm gonna make sure that have used our background color is white color, and, uh, then we're going to simply add you don't add some view and background of you going at that you dot adds a view collection of you Are we gonna do in its layout constraints that activate. And we're gonna add some constraints to our collection of you. Hey, and background view. So, uh, bank owned for you. It's gonna be leading dot constrain equal to you dot Leading. And since this is gonna be the same, I'm gonna copy paste. So it's gonna be trailing failing top and bottom, Okay. And then we're gonna have a collection of you, so collection for you dot Leading because fain is going to be equal to views leaving constraints. So you dot leaving collection of you doctor trailing anchor. It's going to be equal to for an equal to you dark trailing and then collection views. Top anchor is going to be constrained equal to view dot safe, safe layout. Safe area layout guide. Eso That's, uh, this area right here. Eso because of the navigation, but it's gonna be actually moved down here. Dr. Top that, um So its collection views top. It's gonna be safety s top anchor. That's why we call to that. Okay. And then you're gonna have collection view, Dr. Height. So you're gonna give it height, and we're gonna be setting it to 400. Okay, Now, let's go ahead and implement our extend basically to provide delegate and data source for the collection view. So we gotta take station snapped. Uh, people told her you I collection spewed Eliot toe and you are collection you data source. And right here, we're gonna say, um number off off items in section, and we're gonna simply return there on our account for a number of items in section and sell for item at an expat is going to be Let's sell is equal to collection view dot de que sell for identify herself or index bath and expats. And this is gonna be costs as snappy cell so we can set It's super image you dot image is equal to data hot in next path dot item and we're gonna return itself. Okay, now, next thing we can have. So let's see. What have you been saying? Um, okay, nothing. So next thing we're gonna do is to have it gonna goto our app delegate. And, uh, here we are saying that advanced we controller is basically a trance collection view is our entry point, so we can actually, um, change that. So I'm just gonna come into slain, and I'm gonna keep ABC here, but I'm gonna say snap people told her harm, maybe snap BC. So let's put this name are steps up. Okay, so let's go ahead in. Ah, not septal snapped. We see. Okay, so let's go ahead and brought this and begin to see if are LIAT has bean successful. We set our not so OK. So there we go. We can see as you can see, our layout is actually successfully set, and it's actually working pretty nice. Have a So there you go. Okay. So ah, Singler is actually running up it crazy. But as you can see, you feel like, you know, scrawl really fast. It actually works really good. So a couple of things, I think the background view that we have chosen that you made a century of Children from the background is a little bit is not very nice. So does this one. And let's go ahead and rerun it and, uh, against take a look if actually made any difference. Okay, so that's actually good. Yeah, that looks good. Hi. So what we're gonna do next is are we going to simply add a table of you just to show you like how I can add a table view into the scene? But as far as our layout work, it's ah, like you know, is concerned. Ah, that's sexually already done. So let me really quickly put together a table of you and we can see how to have the table view into the interest seem so lazy. Far they will view you are a table. You and, uh let be school. Tell me why. Tell you have you Okay, So, uh, we wanna select a class to register aether. We use that. And five table cell. Um, now induced, we can create a because himself. So you are a table of you sell, and we're gonna say table. So for this one, really fancy name, but it'll or for us, um, table cell and still sell is going to have. First of all, it's gonna have superhero uh, perfect. So superhero. And, uh, whenever someone says that, um, we are gonna put it up there over here, and you're gonna set if super, you know, is equal to super. You know, that means we have something supplied here. If let, actually every Then we're gonna set our image in stuff. So let's create only reaches Lady bar, lazy, private bar. Average peak. You are image, Do you? We can provide the corner radius so later thought corner radius is equal to 10 and we can return that. All right, so that's our marriage. And then we gonna have our name label. So lady private, where? Name label, you know, said the farm size. So it's size 24 text color to white and recently gonna return that you hear? Okay. And then we're gonna be having description. So I'm going to copy this, and, uh, it's gonna be called the E S C label, and, uh, the front is going to be a little bit smaller. So 16 points color still will be white. There's no next property we were provide is number of Flynt's number. Appliance is equal to zero. Okay, that will make sure that we expand thesis l according toothy. According to the, um, the taste our content so you can expand our I spent cell sales height based on number of flights that are needed. Corrupt, that content. Okay, then we're gonna overwrite are in it. Um, super. Hey, we got a call, a function set up. All right, So, uh, we're gonna create a function, a private function set up, and we can set our background color or far the cell to be, um you eye color dot black start with half a component and 0.5, and we're gonna call this set up right here, and he can implement de quarter function is also super dot in it, um, a de quarter and we're gonna call our set up here is all just to, uh, make sure that we have properly Initially I see you sell and no, the other thing we were going to do is basically add all off our views that we have created into our cell. So we're going to simply say add some view a marriage you add some of you name label add some for you Description label, and we're gonna create are, firstly out constrained dot activate hand is constrained the so major u dot with Hincker daughter was framed and this is gonna be equal 200 image view dot High tanker dot constraint is equal to 100 Soul image you dot leaving anchor out constraint is equal to basically leaving anchor and 10 as a constant You made few dot trailing our top basically So we don't need really ah trailing If you remember from the last example that we had basically, we have this image of you said like you know, just the top and left and then it's width and height so gonna have top hanker out Constrained is equal to top Constrain top Come straight Top inker 10 maybe So this is gonna basically put on image and dislocation with 100 written height and ah, next we're gonna put our name label so named liberal, that leading anchor that constrain equal to and, uh, this is going to have, uh, basically is gonna start from image views trailing anchor. Ah, so you're gonna start it from here and the distance or the constant. Basically, the distance between these two is going to be 10 then named able dot Trailing. Because train, it's going to be trailing anchor and negative 10 top hanker is going to be constraint to top anchor with 10 and we don't need bottom, because how are we gonna put another view at the bottom to begin start with description level that top anchor are leading a bust. So leading is going to be Ah, same as what we have here. So image views, trailing anchors Ah, and 10 as a constant and D C label dot Trailing anchor is going to be constrained to trailing anchor for the view with negative 10 as the constant and its top anchor is going to be constrained to our name labels. Bottom could spark maker with value 10 so basically the constant distance between those two is gonna be 10 points and then description labelled up bottom maker dot Constrained. It's going to be equal to the bottom anchor and negative bed as a constant of it. So that is our that is our table view cell that's created Now let's go back to our you control her. And, um, we're gonna register this so table celled ourselves, you know, just of that. And then they simply gonna say, um, that data is equal to Are that table data a sequel to Super Hero that populate Avengers? So this is going to give us the array off avenges data and, uh, what we're gonna do basically, ah, gonna simply going make ourselves delegate and desolate for table Rias. Well, so table you dot delegate is equal to self. They will view that dinosaurs it tickled itself is And then we're gonna set table views. Estimated row, height 200. Ah, because you want to use the fact that our table you can they will be cell can grow are medically so we're gonna give row height to be you. I table view that automatic dimension So this property is basically gonna resize according to the content that's available. We then the views inside the cell. And for that reason, you have to actually provide an estimated row height. So, um, we have just chosen a number and just put that 100 there they will be that background color is going to be clear color. Okay. And, uh, we simply gonna had, as some of you say will view and gonna we're gonna just add a table view constraints. So table view that leaving Hank her it's going to be constrained to viewed out leading anchor. No constant releasing trading. Then you have top and top anchor. It's going to be constrained to your our view of your collection of you. So can they use how collection of you dot bottom anchor Sabah Domincan off the collection view with a constant value of 10 and table views. Bottom inker. It's going to because feigned to views dot if you don bottom inker. Thanks. So Okay, let's go ahead and build. Ah, the delegate and data source and excision so snapped. He control her extending you I table view delegate and you i table view editors. And one day we forgot is basically setting these values in super hero when this set. So let's go ahead and and do that really quickly. So you simply going to say imagery? You thought image is equal to super hero dot profile pic, uh, and then name. We will. That text is equal to superhero. That name and description labelled up text is equal to superhero dot description. Okay, so let's go back. And here we're gonna simply say, Ah, use number off. How? Number off roads as a festival. Number off rose number of rows in section. And we're going to return table data dot Count in this case and, uh, sell for rope at parole at index back. It is gonna be cell table view. Doctor Dick, you reusable haven't part. So car rather table cell, I think. Let's make sure it is a table cell as table table cell so we can use cell dot Super hero is equal to table data index path That wrote and begin to return the sale. All right, now, let's go ahead and run this really quickly to see if we have successfully influence at our table view. All right, so there we go you have are they will be yourself feeling up and, uh, are they will view content. Height is automatically adjusted based on are the content that's available for the text. Okay, so eso does it for the for the custom control A Z can see it is very easy to Bill, but they're like, you know, some pretty computer values that you have to actually complete. But I hope this gives you enough idea, like, you know, to do your own experiments. So I would highly recommend you to, ah, just of experiments and come up with new are different types. Off up layout. Raymond, Alec has a up interest layout on, and that's actually a good example. South actually told you recommend you trying that out. And I will try to build out something similar, like prison, so yeah, but but yeah, this is it for for this section. So thanks again for watching