Build Instagram like UI using Compositional Layout | Swift | Xcode

hey guys welcome to my channel i code i am pallav and today we are going to look at a very interesting and useful topic compositional layout while having conversations with ios developers through linkedin facebook and interviews i realized that most of them are not comfortable using compositional layout and when i tried finding the reason i realized that either they have not exploded or they found it confusing and i don't understand why because compositional layout is that one magical thing which is very easy to use and that takes your ui to next level with minimal efforts apps like photos instagram app store and i can keep on saying the names they all use compositional layout so if you are still using the conventional collection view flow layout you must give it a second thought today in this video we will deep dive into it this is the screenshot of instagram search screen and you can see that the layout is kind of staggered what i mean to say is that cells are not uniform some are larger in size some are comparatively smaller and we will be building something like this today or should i say that we will be building something more complex where the cells will have a more non-uniform fashion this is what we will be building today it will be a vertically scrollable collection view having images and the cells will be of different size will use compositional layout for it but imagine that if this is to be done using the conventional collection view flow layout how difficult it can be so here i am having this empty xcode project it is having nothing but just this empty view controller and before jumping to compositional layout that actually what it is how it can be used how it is different from the conventional flow layout how it can help in creating the complex layouts let's first set up the basic collection view in which we'll be using our compositional layout and we won't be using the storyboards or xivs for that so i'm having this same code snippet for setting up the collection view right here and you can see that there's nothing much going on there we have just initialized the collection view using the collection view flow layout for now we will definitely change this because that's the whole purpose of this video and we just gave the frame of the self dot view delegate and data source has been set as self we give the background color as white well that's optional we can even remove it and we have registered a collection you sell and added the collection view as a subview that's all that's all going on there and because we have set the self as delegate and data source let's confirm to those so right there here in these delegate methods i'm just returning 20 as number of cells and in this cell i'm doing nothing much but just setting a random color as the background color of the cell so for that we must have something known as random so for that i'm having this extension on the ui color this will return me a random color so let's just give it a run okay before that we need to call this method from our viewer load setup collection view and let's give it a run so this is just a basic setup a normal collection view that we have been using for years so once this will be set up we'll be replacing this collection view flow layout with our compositional layout this is how it looks and our basic collection view has been set up now let's understand that what is the difference between the flow layout and the compositional layout and how it can help us this is the anatomy of a conventional collection view flow layout well there is a layout and inside the layout we have sections in the sections we have items so that is how the layout works we can create different sections in sections we can have different cells what we call as items and of course we have the section view headers which i have not mentioned here but majorly these are all the components which together makes the collection viewflow layout and we have been using this for years now let's understand that what is the difference in the compositional layout so if you notice that in the anatomy of the compositional layout there's one more component added which was missing in the flow layout and that is groups so if you see in the layout there are sections in the sections there are groups and items reside within the groups so we can have more than one groups under a section and many sections in a layout like we used to have in collection view flow layout so that is similar but the new thing added here is the groups so items directly do not reside in the sections they are the part of the group and then group is the part of the section this is how it is organized and the best part is rather i would say that the power of the compositional layout is that you can have groups within the groups so you can have the nested groups and that is how we make those complex layouts so if you focus on what we will be building today here is a screenshot of the collection view that we saw earlier and next to it you can see that the cells are not having the images on them and that's just for making the understanding easier so this is how the items have been placed and you can notice that there's a pattern after the third row or should i say after eighth item you can see that pattern repeating so let's break it to have a clear picture this is the basic block after which the repetition is starting so we'll try to make this once we make this the repetition will keep on going so here you can see that there are three groups or should i say that there's one container group in which there are three subgroups the first group is having the item one the second group is having the item two three four five and the third group is having the item six seven eight so we are having one container group which is a vertical group it is having three horizontal groups the first group is having one item the second group is having four items and third group is having three items all these three groups are horizontal groups if we break it further you can notice that the second group is further having two horizontal groups one is having the item two and the second one is having item three four five this group can be further broken into two more groups that is the vertical group so in that vertical group the first item is item three and in the second group it is a horizontal group having the item four and five so we have our collection with set which is using ui collection view flow layout so the first thing that we need to do is change this collection view flow layout with the compositional layout for that we'll make a method here so one get compositional layout maybe and from here we'll return the compositional layout but for now let's call it here get compositional layout and here we'll be building our compositional layout for the ui that we want and our approach will be to start from the higher end component which depends on the other components so we'll start from layout layout require section will create section section requires group will create group and this way in no time our compositional layout will be built so let's start with that let layout is equal to i'll say collection view compositional layout and this requires a section so let's go for creating a section let section is equal to and the section should be of type collection layout section so i'll go for collection layout section and section requires a group so let's go for creating a group here let group is equal to and it should be of type ns collection layout group and this collection layout group and the group requires a size but here we have two options either we can go for creating a group this way or we can explicitly mention that what kind of group we want it can be a vertical group or it can be a horizontal group so here i'll go for creating a horizontal my bed a vertical group so i'll just write vertical here and this requires a size and the sub items so let's first create the size or or directly pass it here maybe ns collection layout size now for width and height we have four options here so either we can go for providing an absolute value or we can provide an estimated value in that case the layout will adjust itself as per the given estimated value or we can give a fractional width and a fractional height these fractional width or height takes the value from 0 to 1 and it corresponds to the width or height of the container so let's say if i am giving the width and height the fractional width and frictional height to an item it will correspond to the group in which it is embedded or if i am giving the fractional width and fractional height to a group it will correspond to the width and height of the group in which that group is embedded if it is a nested group i understand that it is appearing a little bit confusing but if you have worked with auto layout you can relate it with that and then it will be quite easy to understand so let's say that if i want to give the half of the width of the container i just put 1 by 2 or 0.5 whatever you are comfortable with so let's go for using it it will clear the picture so here for this group i'll give the fractional width as 1 because i want my group to have the width equal to my collection view so that's why i give it as 1 and the height i want it to be 600 so i'll use absolute here 600 and now it requires sub items so in the sub items either we can pass another group or an item so for now we'll go for passing an item let's create one so that item is equal to ns collection layout item and this item further requires a layout size so let's create it layout size and for width i want my item to have the equal bit as that of my group so i'll again use the fractional width here with value as one and the height of each of my item should be one third of my group so if i pass 600 here as height each of my items should have the height as 200 so for that i'll give it as fractional height and say one by three now let's just pass this item here item and let's pass the group in the section and the section in the layout and finally let's return the layout return layout and instead of my bed i forgot to mention the return type here compositional layout and instead of 20 i'll just change it to 3 just to verify our implementation and let's give it a run as expected this is our group the container group we can refer to it is having the height as 600 and each of my item is having the height one third of the group so these three items are having the equal height as 200 now let's proceed and now what i want is that two items in this place and three items in this place but because an item cannot have further sub items so what we'll do is we'll change these two as the groups and we'll leave the first one as the item so let's create a container group in which the other two groups will be embedded so here select container group is and the size will be what we gave here so let's just copy it from here and the sub items here will be passing the item that we are having here and the two other groups that we need to create so let's go for it let's create our first group first just let's replace this group one with the container group and let's create a group one maybe one ns collection layout group the group will be a horizontal group and the size so for the width the width will be equal to the group so this will be fractional width as 1 and the height of the group will be one third of the group just like we were having it for the item so this will be a fractional height it's one by three and let's create the items for it so here i'll create it as group one item one you can have more meaningful variable names but uh i'm just putting it as group one item here here and and this collection layout item it requires a layout size and for the size now what i want here is that the group should have two items having equal width so what i'll do is that i'll put the fractional width as one by two and the height should be equal to that of the group so we can maybe use fractional height as one this is group one item one and let's just pass it here group one item one and we want one more group having three items so let's just go for creating it let group two is equal to ns collection layout group this will also be a horizontal group and in the layout size i want the width of each item to be one third of the container's width so i'll put as one by three and the height should be equal to that of my group so i'll put it as one and now let's go for my bad the width of the group will be equal to its container group but the width of the items will be one third so we'll put it there so let say group two item one maybe and and this collection layout item the size required here so the width of the item will be one third so i'll put this one by three here and the height will be one that is equal to this group two the height of this group 2 and let's pass it here so here it's grouped to item 1 and now let's pass these two groups group 1 and group 2 in our container group where we are having this item so as i mentioned earlier that this sub items can take both items and groups so that's the power of compositional layout group 1 and group 2 and the fractional height that i gave to group 2 my bad it should have been one by three here and before giving it a run let's change the number of items from three to say six and let's change the background color i'm not liking the black color in the background so maybe background color isn't going to say white now let's give it a run right there so we are having this container group and which we are having three groups so this is the vertical group these are the horizontal groups this is just an item and these two are the horizontal groups each horizontal group are having items so these this is having two items and this is having three items we have divided the width accordingly and now something that is appearing weird to me is that these items are not having spacing between them so maybe we can give the content inserts to the items so let's go for it item dot content in sets is equal to directional edge inserts and just like instagram i guess it is having the spacing one between each cells so let's do the same here and one thing which is not directly related to the compositional layout but i would just like to share it with you did you ever give a thought that why do we call these constraints as leading and trailing instead of left and right because we are having the other two constraints as top and bottom it could have been left and right while leading and trailing because for the languages which are written from right to left your constraint do not break that's why it is called leading so let's proceed and let's copy this for all other items so this is for group one item one and i'll copy the same for group to item one and now let's see it awesome so we have made quite a good progress and now what we want is that we want to have further more items in this particular item so instead of keeping this as an item we'll have to change it as a group so let's go for it so we'll change this item in a vertical group which will be having two items and before making the changes because we are having you know quite an amount of code here so let's just put some separators maybe so let's say that this is for group one and this is for group two and this is where everything is being embedded so let's put it as container group now what we need to do is our item will remain as it is our group 2 will remain as it is we only need to make changes in group 1 so here where we are having this group 1 item 1 as the sub items will have one more sub item and that will be a group so let's create a nested group first and then we'll create the item the way we have been doing it so let's create that nested group one may be is equal to ns connection layout group and this group will be a vertical group so let's keep it as vertical and for its size it will be half of its container so one by two here and height will be equal to its containers height so one here and will give the sub items in a moment now let's create it sub item so let let's say nested group 1 item 1 maybe and this will be an item so n collection layout item and for the size it will be having the width equal to its container but the height will be half so the fractional width will be 1 and the fractional height will be 1 by 2 and let's put this nested input item 1 here also let's give it the content in sets same as we gave it to the other items so nested group one item one like that and here let's pause this nested group one right so now let's check it so we got our group here but we see that one item is missing and that is because a number of items is here six let me change it to seven now if we check it we'll have that missing item in place so this way we are having our groups inside the groups and we are having that complex layout which is very difficult i believe if you go for making this with the conventional collection view flow layout so and you can keep on playing with this you can keep on embedding the groups into the groups items into the groups you can go crazy with your imaginations and then can implement it using the compositional layout so this is really good thing and now in place of these random colors let's put some images there so that it actually looks like instagram screen or whatever you call it so let's go for it here in the collection view cell instead of this random color i'll just put an image here like this so we are doing nothing much here there's an image view we gave the frame of the cell to the image view and we are assigning it an image from the assets so in my assets i'm already having these images named as one two three four five six just use the index path for the naming the content mode is a scale to fill and for the constraints i'm having this method as add sub view so this is this is nothing much but it just anchors the sub due to its superview right there so now let's give it a run our collection view is having the images and why is seven why not seventy so let's increase the number of items here and let's give it a run and now we can just keep on scrolling keep on playing with our collection view and this is looking really nice and i understand that this would have been really really difficult if we would have been using the collection view fully out for implementing this and i understand that yes i have left this part here but because of the length of the video i'm just skipping it but you can implement it all you need to do is just replace this item with a horizontal group having two items that's all and if you are thinking that it is okay to have the compositional layout where we need to make such complex uis there but how can it help us in our regular the conventional layouts that we have normally in our app where we have one carousel we have certain sections down there and then we use it so let me just tell you that the compositional layout is very useful in those places too so i'll just tell you that how you can make the carousel using the compositional layout and it is damn easy believe me so instead of this i'll just comment it out for now and you don't worry about the code i'll share the github's repo link in the description so you can clone it from there i'm just commenting it for now and for the carousel i'm already having this save code snippet here i'll just explain it to you over there so we are doing the same thing except this so i'll explain this we are having this layout [Music] where we are passing the section we are having section we are we are passing the group we are having this group which is the horizontal group and then we have one item right there so let's just first see it and instead of images let me put it back to the random colors so cell dot background color is equal to random right there so we are having this as the vertically scrolling list and you would be thinking that this does not look like arousal so now this is the line that will do the magic so there's this property orthogonal scrolling behavior so if i change it to say continuous and we apply this on our section now if i give it a run you will see the magic happening you will see the carousel so like this and now with just one line extra you are having this sort of thing and if you want it to be aging you can just change the continuous to the paging and then it will scroll in the paginated fashion like this and you can even have animations for it so i'll not go into much details for the animation i'll just show you for explaining the power of the compositional layout so if i go for here and maybe if i make this width to 0.95 there's although there's not much going on here it's just basic math but still i'll put this code in the in my github repo so you can you can refer it from there or if you want me to explain it in detail and to make more videos on the compositional layout of such kind you can put it in comment i'll try to cover it and now if you see here like this so there's this animation sort of thing so what i want to convey here is that compositional layout is really useful if you are still using the conventional collection you flow layout give it a second thought that can it be replaced with the compositional layout and you will get the enormous benefits of it so that's pretty much for this video a new video comes out every sunday so stay tuned let's write better code together happy coding and stay safe

Channel: iCode

Views: 1,452

Keywords: Compositional Layout, collection view, iOS, swift, xcode, iCode, instagram, iOS interview question, interview, iOS interview, staggered view, staggered layout in iOS, collection view cell, instagram ui, instagram interview

Id: uka8HVBudpk

Length: 26min 21sec (1581 seconds)

Published: Sat May 15 2021