 to talk about the UI8, UI Collection Views. So how many of you use UI Collection Views? So everyone, I think, yeah, so sounds good. So I tried my introduction. We got advice from using, stopped using UI Telling Views. And understanding Collection Views, well, they have basics. And creating a basic and advanced simple using and the homework, which you can do yourself. So basically, I'm going to work at Equinix as an iOS developer. And also, I do server-side programming as well. But I have a proper value-less experience into programming. And if you want to get in touch with me on GitHub, it's GitHub.com.flash as you can do it. So yeah, so why this step-by-step stop using UI Telling Views? Because UI Telling Views goes very, the rules of UI Telling Views goes very bad in GitHub and the programming started in the US world. So the API was made, right? They was all going to be in the outside of time. So they developed like this. So right now, maybe I can say it's not a scalable solution for your apps. So I think all, if you are going to write some apps today, I think you can better be using UI Connection Views instead of UI Telling Views, because it gives all the features which are in the UI Telling Views. So if someone comes and gives you some linear layout, don't use UI Telling Views, just go for UI Connection Views. And one of the main reasons is, one of the other reasons is if you have to scale to the tab version. So all the time, sometimes the linear layout cannot be moved. So you might want to read the scripts, by phone, and for other kind of stuff. So what we are going to do? We are going to progress in some stages. I will be demoing the code, and then we will move to some stages from basic to little level one. And then there will be a fully customized layout, which will be sort of a Pinterest, which you might have used. So at the last, when you're building that kind of layout, when you'll be starting in the app.com, everybody might use the iOS app.com, which is iOS 11 app store, how the layout comes. So yeah, I'll switch to the app. So the first step will be, we will be creating using this, using a flow layout, UI connection flow layout. So when you look at what is the UI connection with flow layout, so flow layout is actually basically a line-based layout. Line-based means, so line-based means you will have a line-based kind of layout. You cannot have custom layout. So like, like this, one, two, and then three, four, five. You cannot have adjustments according to your style. So if the width finishes, the next item goes here, automatically. And so it's like, item five, the width is initially automatically goes to the item six, based on the stalling direction. So when it takes a vertical stall direction, so if item zero, one, two, and then there's no space, it will just go like here, two, three, then four, five, and then six, and then most vertically, you can stall. OK, so, OK, so I have the code ready. So I'll be going through some, how I, I have designed this layout, using collection list. So the address will be like this. So we'll go some line-by-line, and we'll understand how it's been using collection view. And so, and sorry, there will be no stalling boards, so all these written in the search file. OK, so, yeah, so starting from item 14, everybody can see. So we have just written our collection view, and giving the frame of zero, and we are passing the flow layout. So it's kind of like doing collection view, and then just passing the empty frame right now. So I'll go to set up the frame using auto layout later, right now I'm just passing the layout object as in, collection view flow layout. So all that collection view should have some layout, which is the banking, which gives the items where it has to render, where it has not to be. So currently we are using the auto box flow layout, which is very diverse, so we are going to use it. For next item, it's simple. You will go and just type the title, and then the next one I'll put it in the collection view. So here, I'm just writing some view, which is the view I created in the first line order of six. So you understand I'm registering a cell, so that we'll be using that UI collection in the set. And right now I'm typing as a Y, and here I'm putting some constraints, like collection view, top anchor constraint, because you top anchor, bottom anchor, really anchor, and so these are basically auto layout created using code. So I'm just putting the collection view top to bottom from the left corner, from top, left, right, bottom, everything I'm putting 0, 0, 0. So the collection view is this, out like this using the auto layout constraint. So one thing I'll be coming back to show here, so the collection view is called delegated to the cell, like we do with the table views. So I'm setting the delegate method so that we can have a collection in the set up. So the number of sections, how much sections I want, so right now I have only one section. And for number of items, how many items you want to show, so going to the action, the three items. So as you can see here, one, two, three items we have, which are what you can use for the one. So what you call the small direction of the flow layout is a vertical, so if you don't give any strong end direction, so it will just go like this, okay? So I've taken on cell, which is image view part cell, which is kind of this cell. So this, so the first one cell, which I've created cell, we don't have to go into. So I have three types, three cells, because I've written in three items. So then the main part is how the layout works is, so right now we are using flow layout. So flow layout works on a delegate method, so which is like the size for item at the index part. So which means, as of now, how much the size will be of that index part. We get every index, what should be the size of the cell. So what I'm doing, because right now we have, right now you see here almost close to full width and some height. So we need a way to expand it to custom full height, and height will be passing some number right now. So what I'm doing is, so size for item at the part, so it's the CAC size, so width I'm passing as, the frame dot size dot width minus 40 and height I'm passing as 400. So every item, every cell between of this width and height. So width is the full frame width height taking 40, minus 40, and the height will be 400. So as you can see, all height of 400 and width is almost 40. And just to go to the cell, in the cell, and this one, as we discussed on our top, so we have image view card cell. So every cell has to, as we added from the your initial view cell, then only you can pass those cells to your initial view. So I'm doing nothing here, I'm setting the card view, which is having a 400 and 10, now what I want to do is, using direction and some image I put, I hard put images card, you are just fine, but you can change from, you can pass from the retro and everything. So all the standard labels I have here. So I have this future label, my standard label, and the set of subviews. So I'm adding the constraint on the label. So yeah, and then it looks like this. So what's going on is the flow, they have the size for index as far, we are passing as a width of minus 40, so it becomes so wide, and the height as we have already a 400, and in the image view cell, we are having a photo card with a corner radius of 10, and some labels we are putting some button and image is some standard image I have. So this kind of layout renders like this. So now you understand a bit more, so we are going to change something here. So let me try to put some in the running process. So understand what is the minimum line spacing. So what is the minimum line spacing? So as you can see, currently I can see this must fit, and actually this knowledge I put in sets in the constraint, so it looks like this. So if somebody asks, okay, can we do this without touching the election yourself? Yeah, we can kiss, so we can just, yeah. So if you see the minimum item line spacing, so if we go back to our original set, so this one is the minimum line spacing, so but in diagram you are seeing many items because I have five, six items in one line, but right now we have one. So minimum line spacing is actually in this space, which should be minimum, says minimum. If you give 50, it's not necessary to give you 50, but minimum says at least it has to give 50s of, all your system will decide how much it has to give, but minimum is a minimum, it has to be so much. So the spacing between the items is a minimum spacing, so now it looks like this, so now what, so what I'm going to do is, so if you imagine index, I'm going to put some more one index equal to, so I'm going to go back to zero, and so what I'm going to do, so anybody can tell what you have on how it will show, so let's see. The scoring direction is very important, and you are going to play the direction with all the options. So if you see, if you see I put this one more image, which is like this one, so if you remember I put that index number two, so if you see now the index number zero, it goes like a one, two, three, four, five, six. So the scoring direction is very important, you should take here and get scoring direction enough, so now it scrolls in a horizontal direction instead of over it in the, so now suddenly the manager comes and says, oh no this is the answer, I want to work here. So if you are doing your school, oh my goodness. So what, the direction is appropriate, so what I do is just, right? Just there, oh see, just in one line change, we have two by two, and you can just reduce the height, so it looks good, now we have a grid view in just one line change of code, so you just need to go to size for item, and change the width of each cell, now in the game policy we have divided by two minus 40, then change the map to suit your needs and item order, so what if we had used UIWS and just go inside each, each W7 and pay two more cards and everything, but if you have this one it's easy, and the UIWS provides animation out of box, so I don't want to put a much time to go through it, but so we just can create a layout like this, so yeah, so okay, so okay, so this one is another random layout, which is possible using UIWS, so what is there, this is called normal directions, one is around vertically and one is underneath, so if you have seen the UIWS app store, please try to find out that the same thing it stores in both directions, like some section is stored in the horizontal zone, and the main collection view is stored in the vertical direction, so you can see, so like it's stored in, main is stored in the horizontal zone, and this one is stored nicely in the horizontal direction, so the code is also simple, so don't be afraid of using collection view, even if you're beginning the UIWS programming, I have seen many people will be afraid of using, beginners will be afraid of using collection view, but they're damn simple and simple as UIWS, so the code for this is almost similar, so I'm again going to use the UIWS flow layout, so similar, the main collection view will be H2H, so and the store in action will be vertical, so the main collection just stores in the vertical direction, so only catch is here in, so we are going to create two different type of cells, one will be this cell, which is having image, and the second cell will be holding another collection view, which stores in the horizontal direction, so this one is a bit standard stuff we discussed, and then you can send UIWS and UIWS, so I have number of items as standard, so if you see beautifully here, index part value will be 2 equal to 0, what I'm doing is image view card, I'm going to register two cells, which I'm getting two cells now, if it's a new model of 2 is 0, I'm entering image view card, and if it's not, I'm using a feature cell card, feature cell sorry, so image view card is the one which we used previously, which is that top one, so if you see here to 0 and here, and you see the all model of my 2 location, you'll find the same which we had in previous, but here now we are doing that separate thing, so here what we are doing is we are having a feature cell, so if you see the feature cell, which is a subclass of UIWS collection you send, but here I'm using my ticker, no there will be any function, so what I'm doing is I'm getting one more collection inside a cell, and I'm adding it to this UITL view cell, if you see here, cell content view that adds some view, correction view, and inside that correction view, I have a stronger direction as one's own term, so it scores in the horizontal direction, so the catch is simple, you just need to have two kind of cells, one which have an S-grade correction view, and what is the simple card here, so we can give them the profile notes, so here we have number section one, and we need cell I number of cells is seven, so you can pass the models from outside, but I don't just, everything is hard going, so, so if you see the size I'm depending as a grid and I have a heart rate of 200, so I'll show you like this, okay, so any question, okay, so this is pretty, I think most of 90, a typosite acts, correction view, no one ever works, but sometimes there will be some new space here, it will not be nine ways, it means it will be, if we are used to just that, you will see one item is very high, one is small, so if you use nine ways, the previous item will be the nine way, so suppose one is having, so suppose this is item eight, and this item seven, if it's a nine ways layout, so it will go like nine to nine, the other item will come here, and here, so it will look very convenient, this space will be blank and it looks very empty, so for that, kind of stop being advanced, we need to subclass the UI collection view layout, so those are called as custom relation to layouts, so those are like little tricky in animating, but once you get a hold of things, that's very easy, so only thing is a basic simple thing, so connection view will be some kind of prepared layout method will be called, in which you have to use the layout of all the cells, and the collection view content size, so what happens is, if you are going to use your own layout, you cannot use the collection view content size methods, we have to use the content size for that collection view, like how long it has to be and how long it has to be, and so they are great to use for animate, it's where are the elements are in the rectangle, so these are a bit little, so I'll show a demo then it will be more easy, I'll share the code at the end of session, maybe explaining might not be so easy right now, but you can just see how it looks like, okay, so you can see, you can see here, it's a nine days layout, this first and second, so the third item will come from here and here, so in this case it looks very ugly, so this kind of two column layout, you cannot make the normal flow layout, so you have to use it, so in quickly mode through the time, 81 custom layout which is just layout, so which I'm setting in the layout of the collection view, so what this file does is, as I told in the, as I told here, so the only, so methods and some methods with the prepare, prepare is where you calculate each and every thing, so like how much size each item has to be and how much, what is the x position of each item, what should be the y position of each item, so in the prepare item, in the prepare method you have to call each and every attributes, and just remember to cache everything because the layout is very expensive, so if you don't cache you'll get so much, it's a choppy experience and it's very small thing, so what I'm doing is just, so the thing is while caching you have to cache the y collection view layout and attributes, so this is what the custom layout understands, so while you have to prepare methods you have to cache all the y collection you have to use and it expects all the play of each and every item, so what we are doing is, we will just take a simple map, so we have to calculate x function of each and every item, so how we are going to calculate, so since this is a two column, it's been simple, so here I have x is always will be this value and offset sum is more than offset 10 and the second one will be some width, width divided by two and this offset, so x position is very simple, so we for all items we can really quickly calculate the x position and what will be the y position in the previous, y position, top plus i plus offset, so like this way we have to calculate all the individual y positions and as I told we have to calculate the content sizing set, so the width is pretty obvious because we are installing in the vertical direction, so the width will be only this much by night size and the height will be the all sum of frequency of all the heights of this sense, so yeah, it's basically first time it will be difficult to make understand, but I'll be sharing that over and maybe you can go through how to create this two column layoffs more easily, and if you see it's not a complex because if you see in just 86 lines of code we are creating this layout, so it's not a complex, we just have to go through the methods of what these methods do, like layout attributes for element and rect, what it shows, what it says is the system is going to be the rect, so we have to see whether which attributes lie on this rectangle, so we have to return those elements and then just we have to return those elements, that means it's just four or five methods you have and in just 60 lines of code, in 80 lines of code we have that pretty much right up there, and everything else remains the same, no changes, yeah, so yeah, any questions, yeah? Well actually for example, when you see what the shelf size is, shelf size is, when you say that one medium, one medium to another medium, and you say that the managing the expectation is automatically, or you say that the paramount is only for about a month or two, but it goes to the laptop, and you find that when you export your, you know, your data, it may be configured, you are the one, you are only gearing at two and a half years, but not laptop, not the desktop, whatever not, and you find that so far, elementary wide, to the vertical, horizontal, you have to do that, you say no, you really need that to ensure that any result is expected, that's exactly it. And because as I come back, so you can, using collection, you can develop for all the same sizes, using cable use might not be possible because the only thing is you have to give the X and Y, so using cable use is, it's just not possible. So we have tested many times and we are working with the Y collection use in our apps, so we are trying to not use Y and Y please, yes. Because I'm like, with these, talented, what you call it, spaces for, you know, the, configured, reports. Yeah, talented area, sometimes you say that, which is this is the expectation of the, but because in this particular medium it's okay, but in the other medium it doesn't, because you know why it should be, you know, because you have to, you have to put some more, like it's our devices. So it's not automatic yet? Not automatic, you have to put something, because if device is this more than 500, 24 columns, if you have, it's a 500, that's kind of you have to put yourself. So have you got a, it's not yet. No, that's a beyond requirement I don't desire. So, this is all from my side. Yeah. The question is, you guys use collection views always over double views, right? Yeah. And one issue we face with collection view quite often is, the layout is done asynchronously. Right. And especially in the new iOS versions. So if you wanted the features like, you wanna know when the layout will end, it's quite hard. Let's say for example, you have a feature, where you need to scroll to the bottom of the view, always, right? How would you do that in the collection view? Because the scrolling, is the layout is done asynchronously, you don't know when the content size actually will be ready. So I'm curious if you ever face this kind of problem before. You want to do, you can manually make it non asynchronous by setting the estimated row height itself. No, that's kind of an issue in our, in our case, okay, it's there. Maybe the, but, since, my part is like, so all the apps, which we, if you go to all the apps at Instagram, Facebook, so all of them has been certainly removed. They will use, so everyone is using collection views, and I recommend using IG at this street, so which is Instagram powered collection views. So it makes the development very easy, so everyone can use IG at this street. Thanks everyone. Yeah.